1/* eslint-disable import/no-relative-packages */
 2import { Scale } from 'chroma-js';
 3
 4import { color } from '../../src/system/reference';
 5import styles from './page.module.css';
 6
 7function ColorChips({ colorScale }: { colorScale: Scale }) {
 8    const colors = colorScale.colors(11);
 9
10    return (
11        <div
12            style={{
13                display: 'flex',
14                flexDirection: 'column',
15                alignItems: 'center',
16                justifyContent: 'center',
17                gap: '1px',
18            }}
19        >
20            {colors.map((c) => (
21                <div
22                    key={c}
23                    style={{
24                        backgroundColor: c,
25                        width: '80px',
26                        height: '40px',
27                    }}
28                    className={styles.chip}
29                >
30                    {c}
31                </div>
32            ))}
33        </div>
34    );
35}
36
37export default function Home() {
38    return (
39        <main>
40            <div style={{ display: 'flex', gap: '1px' }}>
41                <ColorChips colorScale={color.grayLight} />
42                <ColorChips colorScale={color.roseLight} />
43                <ColorChips colorScale={color.redLight} />
44                <ColorChips colorScale={color.orangeLight} />
45                <ColorChips colorScale={color.amberLight} />
46                <ColorChips colorScale={color.yellowLight} />
47                <ColorChips colorScale={color.limeLight} />
48                <ColorChips colorScale={color.greenLight} />
49                <ColorChips colorScale={color.emeraldLight} />
50                <ColorChips colorScale={color.jadeLight} />
51                <ColorChips colorScale={color.tealLight} />
52                <ColorChips colorScale={color.cyanLight} />
53                <ColorChips colorScale={color.lightBlueLight} />
54                <ColorChips colorScale={color.blueLight} />
55                <ColorChips colorScale={color.indigoLight} />
56                <ColorChips colorScale={color.violetLight} />
57                <ColorChips colorScale={color.pinkLight} />
58                <ColorChips colorScale={color.brownLight} />
59            </div>
60        </main>
61    );
62}