michael/grid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move icons to own file

Browse Source
This commit is contained in:
Michael Peters 2024-06-28 08:06:19 -07:00
parent 3c42c9232c
commit 6251ff5243
2 changed files with 47 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/grid/grid-config.tsx
View File

@ -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 = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="13"
viewBox="0 0 24 13"
>
<line x1="6" y1="9" x2="18" y2="4" stroke="#ffffff" strokeWidth="2" />
<circle cx="6" cy="9" r="3" fill="#ffffff" />
<circle cx="18" cy="4" r="3" fill="#ffffff" />
</svg>
);
const GridIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 13"
>
<line x1="5" y1="0" x2="18" y2="0" stroke="#ffffff" strokeWidth="4" />
<line x1="5" y1="7" x2="18" y2="7" stroke="#ffffff" strokeWidth="2" />
<line x1="5" y1="13" x2="18" y2="13" stroke="#ffffff" strokeWidth="4" />
<line x1="5" y1="0" x2="5" y2="13" stroke="#ffffff" strokeWidth="2" />
<line x1="11" y1="0" x2="11" y2="13" stroke="#ffffff" strokeWidth="2" />
<line x1="17" y1="0" x2="17" y2="13" stroke="#ffffff" strokeWidth="2" />
</svg>
);
const TrashIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
fill="#ffffff"
fillRule="evenodd"
d="M7 1a2 2 0 00-2 2v2H2a1 1 0 000 2h.884c.036.338.078.754.12 1.213.11 1.202.218 2.664.218 3.787 0 1.47-.183 3.508-.315 4.776a2.015 2.015 0 002 2.224h10.186a2.015 2.015 0 002-2.224c-.132-1.268-.315-3.306-.315-4.776 0-1.123.107-2.585.218-3.787.042-.459.084-.875.12-1.213H18a1 1 0 100-2h-3V3a2 2 0 00-2-2H7zm6 4V3H7v2h6zM4.996 8.03c-.035-.378-.07-.728-.101-1.03h10.21a81.66 81.66 0 00-.1 1.03c-.112 1.212-.227 2.75-.227 3.97 0 1.584.194 3.714.325 4.982v.007a.02.02 0 01-.005.008l-.003.003H4.905a.024.024 0 01-.008-.01v-.008c.131-1.268.325-3.398.325-4.982 0-1.22-.115-2.758-.226-3.97zM8 8a1 1 0 011 1v6a1 1 0 11-2 0V9a1 1 0 011-1zm5 1a1 1 0 10-2 0v6a1 1 0 102 0V9z"
/>
</svg>
);
function useKeyPress(
callback: (event: KeyboardEvent) => void,
key: string,
@ -112,8 +67,8 @@ const ColorOption: FC<ColorOptionProps> = (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) => {

42
src/components/grid/icons.tsx Normal file
View File

@ -0,0 +1,42 @@
export const LineIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="13"
viewBox="0 0 24 13"
>
<line x1="6" y1="9" x2="18" y2="4" stroke="#ffffff" strokeWidth="2" />
<circle cx="6" cy="9" r="3" fill="#ffffff" />
<circle cx="18" cy="4" r="3" fill="#ffffff" />
</svg>
);
export const GridIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 13"
>
<line x1="5" y1="0" x2="18" y2="0" stroke="#ffffff" strokeWidth="4" />
<line x1="5" y1="7" x2="18" y2="7" stroke="#ffffff" strokeWidth="2" />
<line x1="5" y1="13" x2="18" y2="13" stroke="#ffffff" strokeWidth="4" />
<line x1="5" y1="0" x2="5" y2="13" stroke="#ffffff" strokeWidth="2" />
<line x1="11" y1="0" x2="11" y2="13" stroke="#ffffff" strokeWidth="2" />
<line x1="17" y1="0" x2="17" y2="13" stroke="#ffffff" strokeWidth="2" />
</svg>
);
export const TrashIcon = (
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
fill="#ffffff"
fillRule="evenodd"
d="M7 1a2 2 0 00-2 2v2H2a1 1 0 000 2h.884c.036.338.078.754.12 1.213.11 1.202.218 2.664.218 3.787 0 1.47-.183 3.508-.315 4.776a2.015 2.015 0 002 2.224h10.186a2.015 2.015 0 002-2.224c-.132-1.268-.315-3.306-.315-4.776 0-1.123.107-2.585.218-3.787.042-.459.084-.875.12-1.213H18a1 1 0 100-2h-3V3a2 2 0 00-2-2H7zm6 4V3H7v2h6zM4.996 8.03c-.035-.378-.07-.728-.101-1.03h10.21a81.66 81.66 0 00-.1 1.03c-.112 1.212-.227 2.75-.227 3.97 0 1.584.194 3.714.325 4.982v.007a.02.02 0 01-.005.008l-.003.003H4.905a.024.024 0 01-.008-.01v-.008c.131-1.268.325-3.398.325-4.982 0-1.22-.115-2.758-.226-3.97zM8 8a1 1 0 011 1v6a1 1 0 11-2 0V9a1 1 0 011-1zm5 1a1 1 0 10-2 0v6a1 1 0 102 0V9z"
/>
</svg>
);