IconGrid: refactor props to accept a whole IconEntry

src/components/IconGrid/DetailsPanel.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue, useSetRecoilState } from "recoil";
 import { motion } from "framer-motion";
 import { Svg2Png } from "svg2png-converter";
 import { saveAs } from "file-saver";
-import { Icon, Copy, X, CheckCircle, Download } from "phosphor-react";
+import { Copy, X, CheckCircle, Download } from "phosphor-react";
 
 import {
   iconWeightAtom,
@@ -12,6 +12,8 @@ import {
   iconPreviewOpenAtom,
 } from "../../state/atoms";
 import useTransientState from "../../hooks/useTransientState";
+import TagCloud from "./TagCloud";
+import { IconEntry } from "../../lib";
 
 const panelVariants = {
   open: {
@@ -43,12 +45,12 @@ interface InfoPanelProps {
   index: number;
   spans: number;
   isDark: boolean;
-  name: string;
-  Icon: Icon;
+  entry: IconEntry;
 }
 
 const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
-  const { index, spans, isDark, name, Icon } = props;
+  const { index, spans, isDark, entry } = props;
+  const { name, Icon, categories, tags } = entry;
   const weight = useRecoilValue(iconWeightAtom);
   const size = useRecoilValue(iconSizeAtom);
   const color = useRecoilValue(iconColorAtom);
@@ -56,10 +58,12 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
   const [copied, setCopied] = useTransientState<string | false>(false, 2000);
   const ref = useRef<SVGSVGElement>(null);
 
-  const buttonBarStyle = { color: isDark ? "white" : buttonColor };
-  const snippetButtonStyle =
+  const buttonBarStyle: React.CSSProperties = {
+    color: isDark ? "white" : buttonColor,
+  };
+  const snippetButtonStyle: React.CSSProperties =
     weight === "duotone"
-      ? { color: disabledColor, "user-select": "none" }
+      ? { color: disabledColor, userSelect: "none" }
       : { color: buttonColor };
 
   const snippets = {

src/components/IconGrid/IconGrid.tsx

@@ -52,7 +52,7 @@ const IconGrid: React.FC<IconGridProps> = () => {
               index={index}
               spans={spans}
               isDark={isDark}
-              {...iconEntry}
+              entry={iconEntry}
               originOffset={originOffset}
             />
           ))}

src/components/IconGrid/IconGridItem.tsx

@@ -6,17 +6,16 @@ import React, {
 } from "react";
 import { useRecoilState } from "recoil";
 import { motion, AnimatePresence } from "framer-motion";
-import { IconProps, Icon } from "phosphor-react";
 
 import { iconPreviewOpenAtom } from "../../state/atoms";
 import DetailsPanel from "./DetailsPanel";
+import { IconEntry } from "../../lib";
 
-interface IconGridItemProps extends IconProps {
+interface IconGridItemProps {
   index: number;
   spans: number;
   isDark: boolean;
-  name: string;
-  Icon: Icon;
+  entry: IconEntry;
   originOffset: MutableRefObject<{ top: number; left: number }>;
 }
 
@@ -33,7 +32,8 @@ const itemVariants = {
 };
 
 const IconGridItem: React.FC<IconGridItemProps> = (props) => {
-  const { index, originOffset, name, Icon } = props;
+  const { index, originOffset, entry } = props;
+  const { name, Icon } = entry;
   const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
   const isOpen = open === name;
   const delayRef = useRef<number>(0);