-
-
-
+
+ {filteredQueryResults.map((icon) => (
+
- {rowVirtualizer.virtualItems.map((virtualRow) => (
-
- {columnVirtualizer.virtualItems.map((virtualColumn) => (
- */}
+
- ))}
-
- ))}
- {icon.name}
+ + ))} + ); }; diff --git a/src/components/IconGrid/IconGridRL.tsx b/src/components/IconGrid/IconGridRL.tsx index 3ce0541..584a8bf 100644 --- a/src/components/IconGrid/IconGridRL.tsx +++ b/src/components/IconGrid/IconGridRL.tsx @@ -14,7 +14,7 @@ const IconGridRL: React.FC
- 
+ {/* */}
);
diff --git a/src/components/IconGrid/IconGridUV.css b/src/components/IconGrid/IconGridUV.css
new file mode 100644
index 0000000..1955de9
--- /dev/null
+++ b/src/components/IconGrid/IconGridUV.css
@@ -0,0 +1,20 @@
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+}
+
+.grid-item {
+ margin: 4px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: aquamarine;
+ filter: grayscale(100%);
+ transition: filter 0.5s ease;
+}
+
+.grid-item:hover {
+ filter: grayscale(0%);
+ transition: 0.5s ease;
+}
diff --git a/src/components/IconGrid/IconGridUV.tsx b/src/components/IconGrid/IconGridUV.tsx
new file mode 100644
index 0000000..65bc094
--- /dev/null
+++ b/src/components/IconGrid/IconGridUV.tsx
@@ -0,0 +1,102 @@
+import React, { useRef, useCallback, useMemo } from "react";
+import { useRecoilValue } from "recoil";
+import { useVirtual } from "react-virtual";
+
+import { filteredQueryResultsSelector } from "../../state/selectors";
+// import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
+// import "./IconGridUV.css";
+
+type IconGridProps = {};
+
+const COLUMN_COUNT = 5;
+
+const IconGrid: React.FC{icon.name}
+
+
+ );
+};
+
+export default IconGrid;
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
index 92e6e49..211ef06 100644
--- a/src/components/Toolbar/Toolbar.tsx
+++ b/src/components/Toolbar/Toolbar.tsx
@@ -34,7 +34,7 @@ const Toolbar: React.FC
+ {rowVirtualizer.virtualItems.map((virtualRow) => (
+
+ {columnVirtualizer.virtualItems.map((virtualColumn) => (
+
+ ))}
+
+
+ {(function () {
+ const icon =
+ filteredQueryResults[
+ virtualRow.index * COLUMN_COUNT + virtualColumn.index
+ ];
+ if (!icon) return null;
+ return (
+ <>
+ {/* */}
+
+ ))}
+ {icon.name}
+ + ); + })()} +
-
+
);
}
diff --git a/src/components/index.ts b/src/components/index.ts
index f310248..0842621 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
export { default as App } from "./App/App";
export { default as IconGrid } from "./IconGrid/IconGrid";
-export { default as Toolbar } from "./Toolbar/Toolbar";
\ No newline at end of file
+export { default as IconGridUV } from "./IconGrid/IconGridUV";
+export { default as Toolbar } from "./Toolbar/Toolbar";
diff --git a/src/lib/Icon.ts b/src/lib/Icon.ts
index 34c9a3a..b586e9f 100644
--- a/src/lib/Icon.ts
+++ b/src/lib/Icon.ts
@@ -31,5 +31,5 @@ export interface Icon {
style: IconStyle;
categories: IconCategory[];
tags: string[];
- asset: string;
+ asset: React.FC