processing-website/src/components/Topbar.js at main · processing/processing-website · GitHub - github.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import React, { memo } from 'react';
import classnames from 'classnames';

import * as grid from '../styles/grid.module.css';
import * as css from './Topbar.module.css';

import LanguageSelector from './LanguageSelector';

import LogoProcessing from '../images/logo-processing.svg';
import LogoProcessingFoundation from '../images/logo-processing-foundation.svg';
import LogoProcessingAndroid from '../images/logo-processing-android.svg';
import LogoProcessingPython from '../images/logo-processing-python.svg';

import LogoP5js from '../images/logo-p5js-original.svg';

export const items = [
  {
    className: css.foundation,
    name: (
      <>
        Processing
        <br /> Foundation
      </>
    ),
    link: 'https://processingfoundation.org',
    logo: <LogoProcessingFoundation className={css.logo} />,
    color: '#9c4bff'
  },
  {
    name: 'Processing',
    className: css.processing,
    link: 'https://processing.org',
    logo: <LogoProcessing className={css.logo} />,
    color: '#0564ff'
  },
  {
    className: css.p5,
    name: 'p5.js',
    link: 'https://p5js.org/',
    logo: <LogoP5js className={css.logo} />,
    color: '#ED225D'
  },
  {
    name: (
      <>
        Processing
        <br /> Android
      </>
    ),
    link: 'https://android.processing.org/',
    logo: <LogoProcessingAndroid className={css.logo} />,
    color: '#98C800'
  },
  {
    name: (
      <>
        Processing
        <br /> Python
      </>
    ),
    link: 'https://py.processing.org/',
    logo: <LogoProcessingPython className={css.logo} />,
    color: '#2D9E97'
  }
];

const Topbar = ({ show }) => {
  return (
    <div
      className={classnames(
        css.root,
        { [css.show]: show },
        { [css.noshow]: !show }
      )}>
      <div className={classnames(css.container, grid.container, grid.grid)}>
        <ul className={classnames(css.menu, grid.col)}>
          {items.map((item, key) => (
            <li key={key} className={classnames(css.item, item.className)}>
              <a className={css.itemLink} href={item.link}>
                {item.logo}
                <span className={css.name} style={{ color: item.color }}>
                  {item.name}
                </span>
              </a>
              <span
                className={css.itemBar}
                style={{ borderBottomColor: item.color }}
              />
            </li>
          ))}
        </ul>
        <LanguageSelector
          className={classnames(css.languageSelector, grid.col)}
        />
      </div>
    </div>
  );
};

export default memo(Topbar);