Initial commit

src/components/IconGrid/IconGrid.css

@@ -0,0 +1,16 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+.grid-item {
+  margin: 4px;
+  background-color: aquamarine;
+  filter: grayscale(100%);
+  transition: 0.5s ease;
+}
+
+.grid-item:hover {
+  filter: grayscale(0%);
+  transition: 0.5s ease;
+}

src/components/IconGrid/IconGrid.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useRecoilValue } from "recoil";
+
+import { filteredQueryResultsSelector } from "../../state/selectors";
+import "./IconGrid.css";
+
+type IconGridProps = {};
+
+const IconGrid: React.FC<IconGridProps> = () => {
+  const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
+
+  return (
+    <div className="grid">
+      {filteredQueryResults.map((icon) => (
+        <div key={`${icon.name}-${icon.style.type.toString()}`} className="grid-item">
+          <img
+            src="https://i.imgur.com/zaO12Y8m.jpeg"
+            alt={`${icon.name} icon`}
+            width="100%"
+          />
+          <div style={{ padding: 16 }}>{icon.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default IconGrid;