New design, added category & bug fixes

components/items/all.js

@@ -0,0 +1,33 @@
+import React from "react";
+import useSWR from "swr";
+import Grid from "components/grid";
+import Card from "components/card";
+import Loader from "animations/loader";
+import { Text } from "@chakra-ui/react";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const All = () => {
+  const { data, error } = useSWR("/api/all", fetcher);
+  if (error) return <div>failed to load</div>;
+  if (!data) return <Loader />;
+  return (
+    <>
+      <Grid>
+        {data.map((link) => (
+          <>
+            <div key={link.id}>
+              <Card
+                title={link.title}
+                url={`/icon/${link.id}`}
+                href={link.href}
+              />
+            </div>
+          </>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default All;

components/items/categories.js

@@ -0,0 +1,37 @@
+import React from "react";
+import useSWR from "swr";
+import Grid from "components/grid";
+import Card from "components/card";
+import SideItem from "components/sidebar/sideItem";
+import Loader from "animations/loader";
+import Link from "next/link";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const All = () => {
+  const { data, error } = useSWR("/api/categories", fetcher);
+  if (error) return <div>failed to load</div>;
+  if (!data) return <Loader />;
+  return (
+    <>
+      {data.map((category) => (
+        <>
+          <div key={category}>
+            <Link href={`/category/${category}`} passHref>
+              <SideItem
+                cursor="pointer"
+                _hover={{
+                  bg: "blackAlpha.300",
+                }}
+              >
+                {category}
+              </SideItem>
+            </Link>
+          </div>
+        </>
+      ))}
+    </>
+  );
+};
+
+export default All;