From 0961ba41fde4b106ff70f443ebb3a9249edf3758 Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Sat, 27 Jan 2024 13:39:10 -0800 Subject: [PATCH] prototype color selector --- src/components/app/index.tsx | 11 +++- src/components/grid/grid-config.scss | 6 ++ src/components/grid/grid-config.tsx | 97 ++++++++++++++++++++++++++++ 3 files changed, 112 insertions(+), 2 deletions(-) create mode 100644 src/components/grid/grid-config.scss create mode 100644 src/components/grid/grid-config.tsx diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx index 68d97d7..9c96c8c 100644 --- a/src/components/app/index.tsx +++ b/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 ; + const [color, setColor] = useState('#ffffff'); + return ( + <> + + + + ); }; export default App; diff --git a/src/components/grid/grid-config.scss b/src/components/grid/grid-config.scss new file mode 100644 index 0000000..745e98e --- /dev/null +++ b/src/components/grid/grid-config.scss @@ -0,0 +1,6 @@ +.grid-config { + position: absolute; + top: 0; + left: 0; + display: flex; +} diff --git a/src/components/grid/grid-config.tsx b/src/components/grid/grid-config.tsx new file mode 100644 index 0000000..703e689 --- /dev/null +++ b/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 = (props: ColorOptionProps) => { + const { color, currentColor, setCurrentColor } = props; + + return ( +
setCurrentColor(color)} + > + {color} +
+ ); +}; + +interface ColorConfigProps { + color: string; + setColor: (newColor: string) => void; +} + +const ColorConfig: FC = (props: ColorConfigProps) => { + const { color, setColor } = props; + return ( +
+
Color: {color}
+
+ + + + + + + + +
+
+ ); +}; + +interface GridConfigProps { + color: string; + setColor: (newColor: string) => void; +} + +const GridConfig: FC = (props: GridConfigProps) => { + const { color, setColor } = props; + return ( +
+ +
+ ); +}; + +export default GridConfig;