prototype color selector

src/components/app/index.tsx

@@ -1,8 +1,15 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import Grid from '../grid/grid';
+import GridConfig from '../grid/grid-config';
 
 const App: FC = () => {
-    return <Grid />;
+    const [color, setColor] = useState('#ffffff');
+    return (
+        <>
+            <Grid />
+            <GridConfig color={color} setColor={setColor} />
+        </>
+    );
 };
 
 export default App;

src/components/grid/grid-config.scss

@@ -0,0 +1,6 @@
+.grid-config {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+}

src/components/grid/grid-config.tsx

@@ -0,0 +1,97 @@
+import { FC } from 'react';
+
+import './grid-config.scss';
+
+interface ColorOptionProps {
+    color: string;
+
+    currentColor: string;
+    setCurrentColor: (newColor: string) => void;
+}
+
+const ColorOption: FC<ColorOptionProps> = (props: ColorOptionProps) => {
+    const { color, currentColor, setCurrentColor } = props;
+
+    return (
+        <div
+            className={
+                color === currentColor ? 'color-option active' : 'color-option'
+            }
+            onClick={() => setCurrentColor(color)}
+        >
+            {color}
+        </div>
+    );
+};
+
+interface ColorConfigProps {
+    color: string;
+    setColor: (newColor: string) => void;
+}
+
+const ColorConfig: FC<ColorConfigProps> = (props: ColorConfigProps) => {
+    const { color, setColor } = props;
+    return (
+        <div className="color-config">
+            <div>Color: {color}</div>
+            <div className="color-options">
+                <ColorOption
+                    color="#ffffff"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#ff0000"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#00ff00"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#3cccff"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#eeee00"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#ff8800"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#ee66ee"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+                <ColorOption
+                    color="#2e8c41"
+                    currentColor={color}
+                    setCurrentColor={setColor}
+                />
+            </div>
+        </div>
+    );
+};
+
+interface GridConfigProps {
+    color: string;
+    setColor: (newColor: string) => void;
+}
+
+const GridConfig: FC<GridConfigProps> = (props: GridConfigProps) => {
+    const { color, setColor } = props;
+    return (
+        <div className="grid-config">
+            <ColorConfig color={color} setColor={setColor} />
+        </div>
+    );
+};
+
+export default GridConfig;