diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx index bdbc501..80d36a2 100644 --- a/src/components/IconGrid/IconGrid.tsx +++ b/src/components/IconGrid/IconGrid.tsx @@ -1,7 +1,6 @@ import React, { useRef, useEffect } from "react"; import { useRecoilValue } from "recoil"; import { motion, useAnimation } from "framer-motion"; -import { useWindowSize } from "react-use"; import { IconContext } from "phosphor-react"; import { iconWeightAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms"; @@ -9,6 +8,7 @@ import { filteredQueryResultsSelector, isDarkThemeSelector, } from "../../state/selectors"; +import useGridSpans from "../../hooks/useGridSpans"; import IconGridItem from "./IconGridItem"; import Warn from "../Warn/Warn"; import "./IconGrid.css"; @@ -20,9 +20,7 @@ const IconGrid: React.FC = () => { const size = useRecoilValue(iconSizeAtom); const color = useRecoilValue(iconColorAtom); const isDark = useRecoilValue(isDarkThemeSelector); - - const { width } = useWindowSize(); - const spans = Math.floor(Math.min(width - 32, 1120) / 168); + const spans = useGridSpans(); const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector); diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx index 4c02f90..287b9e1 100644 --- a/src/components/IconGrid/IconGridItem.tsx +++ b/src/components/IconGrid/IconGridItem.tsx @@ -79,7 +79,6 @@ const IconGridItem: React.FC = (props) => { backgroundColor: isOpen ? "rgba(163, 159, 171, 0.1)" : undefined, }} custom={delayRef} - // whileTap={whileTap} transition={transition} variants={itemVariants} onKeyPress={(e) => e.key === "Enter" && handleOpen()} diff --git a/src/components/IconGrid/InfoPanel.tsx b/src/components/IconGrid/InfoPanel.tsx index b84b8a0..05e1b11 100644 --- a/src/components/IconGrid/InfoPanel.tsx +++ b/src/components/IconGrid/InfoPanel.tsx @@ -63,8 +63,7 @@ const InfoPanel: React.FC = (props) => { event.currentTarget.blur(); setCopied(type); const data = snippets[type]; - // if (!navigator.clipboard) throw new Error("no clipboard!"); - data && void(navigator.clipboard?.writeText(data)); + data && void navigator.clipboard?.writeText(data); }; const handleDownloadSVG = ( @@ -81,7 +80,7 @@ const InfoPanel: React.FC = (props) => { ) => { event.currentTarget.blur(); setCopied("svg"); - ref.current && void(navigator.clipboard?.writeText(ref.current.outerHTML)); + ref.current && void navigator.clipboard?.writeText(ref.current.outerHTML); }; return ( diff --git a/src/hooks/useGridSpans.ts b/src/hooks/useGridSpans.ts new file mode 100644 index 0000000..cd5f36f --- /dev/null +++ b/src/hooks/useGridSpans.ts @@ -0,0 +1,13 @@ +import { useWindowSize } from "react-use"; + +const GRID_PADDING = 32; // .grid-container { padding } +const TOOLBAR_WIDTH = 17; // IS THIS BROWSER-SPECIFIC? +const MAX_GRID_WIDTH = 1120; // .grid { max-width } +const ITEM_WIDTH = 168; // .grid-item { width; height; margin } + +export default (): number => { + const { width } = useWindowSize(); + return Math.floor( + Math.min(width - GRID_PADDING - TOOLBAR_WIDTH, MAX_GRID_WIDTH) / ITEM_WIDTH + ); +};