feat(tools): 🚧 Asset Page

src/pages/tools/assets.tsx

@@ -0,0 +1,48 @@
+import {
+  Button,
+  Container,
+  Paper,
+  SimpleGrid,
+  Text,
+  TextInput,
+} from "@mantine/core";
+
+import Layout from "@/components/layout";
+import { useState } from "react";
+import DynamicIcon from "@/components/core/DynamicIcon";
+import { IconError404 } from "@tabler/icons-react";
+
+interface Category {
+  id: string;
+  name: string;
+  icon: string;
+}
+
+export default function Assets() {
+  const [categoriesResult, setCategoriesResult] = useState<Category[]>([]);
+
+  const handleGetCategories = async () => {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_ASSET_SYSTEM_API}/assets/categories`
+    ).then((res) => res.json());
+    setCategoriesResult(res);
+  };
+
+  return (
+    <Layout currentLink="/assets" tools>
+      <Button onClick={handleGetCategories} fullWidth={false}>Get Categories</Button>
+      <Paper withBorder p="md" radius="sm">
+        <SimpleGrid cols={1}>
+          {categoriesResult.map((category) => {
+            return (
+              <Button key={category.id} radius="lg">
+                <h2>{category.name}</h2>
+                <DynamicIcon icon={category.icon} fallback={IconError404} />
+              </Button>
+            );
+          })}
+        </SimpleGrid>
+      </Paper>
+    </Layout>
+  );
+}

src/util/links.ts

@@ -1,5 +1,6 @@
 import {
   IconClock,
+  IconFiles,
   IconList,
   IconMap,
   IconMessageReport,
@@ -24,6 +25,7 @@ export const toolsNavLiks: NavLink[] = [
   { link: "/timezone", label: "Timezone Converter", icon: IconClock },
   { link: "/coordinates", label: "Coordinate Converter", icon: IconMap },
   { link: "/report", label: "Reports", icon: IconMessageReport },
+  { link: "/assets", label: "Assets", icon: IconFiles}
 ];
 
 /**