docs: map icons page with developer-icons

docs/src/pages/icons.astro

@@ -1,12 +1,52 @@
 ---
-import UnderDevelopment from "@/components/UnderDevelopment.astro";
 import Layout from "@/layouts/Layout.astro";
+import { SearchIcon } from "lucide-react";
+import DI from "developer-icons";
+import { categoriesData, iconsData } from "../../../lib/iconsData";
+import { generateIconCompName } from "../../../lib/utils";
 ---
 
 <Layout title="Icons | Developer Icons">
-  <main
-    class="w-full h-[calc(100vh-78px)] px-12 flex flex-col justify-center items-center gap-6"
-  >
-    <UnderDevelopment />
+  <main class="relative w-full h-[calc(100vh-78px)] flex gap-4">
+    <aside
+      class="w-1/4 h-full border-r-2 border-zinc-800 flex flex-col gap-2 text-zinc-400 p-1"
+    >
+      {
+        ["All", ...categoriesData].map((category) => (
+          <div class="w-full rounded-lg hover:bg-zinc-800 px-4 py-2 cursor-pointer">
+            {category}
+          </div>
+        ))
+      }
+    </aside>
+    <section class="w-full flex flex-col gap-3">
+      <div class="relative w-full">
+        <SearchIcon
+          className="absolute top-1/2 left-3 -translate-y-1/2"
+          size={16}
+        />
+        <input
+          type="text"
+          placeholder="Search developer icons"
+          class="w-full p-2 px-5 pl-10 rounded-xl bg-transparent border border-zinc-800 placeholder:text-zinc-500"
+        />
+      </div>
+
+      <div class="grid grid-cols-auto-fit gap-4">
+        {
+          iconsData.map((icon, index) => {
+            //@ts-ignore
+            const DynamicIcon = DI[generateIconCompName(icon.name)];
+            return (
+              <div class="w-full h-32 border border-zinc-800 rounded-lg flex flex-col items-center justify-center">
+                {/* <img src={`../../../${icon.path}`} /> */}
+                <DynamicIcon />
+                <p class="">{icon.name}</p>
+              </div>
+            );
+          })
+        }
+      </div>
+    </section>
   </main>
 </Layout>

docs/tailwind.config.mjs

@@ -31,6 +31,9 @@ export default {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      gridTemplateColumns: {
+        "auto-fit": "repeat(auto-fit, minmax(200px, 1fr))",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],