From 2750c84431f04e010234fdc2594403fe6bfe93fe Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Wed, 7 Oct 2020 15:55:41 -0400
Subject: [PATCH] IconGrid: refactor props to accept a whole IconEntry

---
 src/components/IconGrid/DetailsPanel.tsx | 18 +++++++++++-------
 src/components/IconGrid/IconGrid.tsx     |  2 +-
 src/components/IconGrid/IconGridItem.tsx | 10 +++++-----
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/IconGrid/DetailsPanel.tsx b/src/components/IconGrid/DetailsPanel.tsx
index 4123995..d86abf6 100644
--- a/src/components/IconGrid/DetailsPanel.tsx
+++ b/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 = {
diff --git a/src/components/IconGrid/IconGrid.tsx b/src/components/IconGrid/IconGrid.tsx
index 2d7b88c..a8d3664 100644
--- a/src/components/IconGrid/IconGrid.tsx
+++ b/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}
             />
           ))}
diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx
index b515ad0..ecd2ee4 100644
--- a/src/components/IconGrid/IconGridItem.tsx
+++ b/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);