From 6251ff524353d1de0dd1f536f1b102c15ebc88ed Mon Sep 17 00:00:00 2001 From: Michael Peters Date: Fri, 28 Jun 2024 08:06:19 -0700 Subject: [PATCH] move icons to own file --- src/components/grid/grid-config.tsx | 55 +++-------------------------- src/components/grid/icons.tsx | 42 ++++++++++++++++++++++ 2 files changed, 47 insertions(+), 50 deletions(-) create mode 100644 src/components/grid/icons.tsx diff --git a/src/components/grid/grid-config.tsx b/src/components/grid/grid-config.tsx index be74025..3dca4ea 100644 --- a/src/components/grid/grid-config.tsx +++ b/src/components/grid/grid-config.tsx @@ -1,16 +1,13 @@ -import { ChangeEvent, FC, useCallback, useEffect } from 'react'; +import { FC, useCallback, useEffect } from 'react'; import * as lodash from 'lodash'; -import { PrimitiveAtom, useAtom } from 'jotai'; +import { useAtom, useSetAtom } from 'jotai'; import { - Action, COLORS, drawModeState, isAddLineAction, isAddLinesAction, isDeleteLinesAction, - Line, lineColorState, - Point, userActionsState, userLinesState, userRedoActionsState, @@ -18,54 +15,12 @@ import { } from '../../atoms'; import './grid-config.scss'; +import { GridIcon, LineIcon, TrashIcon } from './icons'; interface ColorOptionProps { color: string; } -const LineIcon = ( - - - - - -); - -const GridIcon = ( - - - - - - - - -); - -const TrashIcon = ( - - - -); - function useKeyPress( callback: (event: KeyboardEvent) => void, key: string, @@ -112,8 +67,8 @@ const ColorOption: FC = (props: ColorOptionProps) => { }; const ColorConfig: FC = () => { - const [userLineColor, setUserLineColor] = useAtom(lineColorState); - const [userDrawMode, setUserDrawMode] = useAtom(drawModeState); + const setUserLineColor = useSetAtom(lineColorState); + const setUserDrawMode = useSetAtom(drawModeState); const setUserColorBind = useCallback( (color: string) => { diff --git a/src/components/grid/icons.tsx b/src/components/grid/icons.tsx new file mode 100644 index 0000000..97a0a46 --- /dev/null +++ b/src/components/grid/icons.tsx @@ -0,0 +1,42 @@ +export const LineIcon = ( + + + + + +); + +export const GridIcon = ( + + + + + + + + +); + +export const TrashIcon = ( + + + +);