New design, added category & bug fixes

components/card/index.js

@@ -1,9 +1,9 @@
 import React from "react";
 import Link from "next/link";
-import { Box, Text, Icon } from "@chakra-ui/react";
+import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
 import Hover from "animations/hover";
 
-const Index = ({ title, url, icon }) => {
+const Index = ({ title, url, href }) => {
   return (
     <Hover>
       <Link href={url} passHref>
@@ -14,8 +14,10 @@ const Index = ({ title, url, icon }) => {
           p={4}
           cursor="pointer"
         >
-          <Icon as={icon} alt={title} boxSize="60px" />
-          <Text mt="2" fontWeight="semibold">
+          <Center>
+            <Image src={href} alt={title} boxSize="60px" />
+          </Center>
+          <Text mt="2" fontWeight="light" textAlign={"center"}>
             {title}
           </Text>
         </Box>

components/error/index.js

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+  Box,
+  Flex,
+  SimpleGrid,
+  Button,
+  Container,
+  Center,
+  Text,
+  Icon,
+} from "@chakra-ui/react";
+import {
+  IoAlertOutline,
+  IoArrowBackOutline,
+  IoHome,
+  IoShapesOutline,
+} from "react-icons/io5";
+import Link from "next/link";
+import Show from "animations/show";
+
+const Error = () => {
+  return (
+    <>
+      <Show delay="0">
+        <Container
+          maxW={{ base: "100%", md: "75%" }}
+          borderWidth="1px"
+          borderRadius="30px"
+        >
+          <Box px={{ base: 4, lg: 20 }} py={{ base: "3", md: "24" }}>
+            <Flex align="center" justify="center" direction="column" w="full">
+              <Icon name="error" boxSize="80px" mb="3" as={IoShapesOutline} />
+              <Text fontSize="40px" mb="2">
+                Oh no!
+              </Text>
+              <Text fontSize="20px" mb="3">
+                This page does not exist.
+              </Text>
+            </Flex>
+          </Box>
+          <Link href="/" passHref>
+            <Button
+              leftIcon={<IoHome />}
+              colorScheme="twitter"
+              variant="outline"
+              fontWeight="bold"
+              w="100%"
+              border="0"
+              mb="4"
+            >
+              Go home
+            </Button>
+          </Link>
+        </Container>
+      </Show>
+    </>
+  );
+};
+
+export default Error;

components/header/index.js

@@ -15,7 +15,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import Dark from "components/header/dark";
-import { IoApps, IoLogoGithub } from "react-icons/io5";
+import { IoApps, IoLogoGithub, IoLogoTwitter } from "react-icons/io5";
 import Link from "next/link";
 import Hover from "animations/hover";
 
@@ -34,14 +34,14 @@ const Header = () => {
         top="0"
         zIndex="1000"
       >
-        <Container maxW="container.xl" pb="4">
+        <Container maxW="container.xxl" pb="4">
           <Flex alignItems="center" justifyContent="space-between" mx="auto">
-            <Link href="/" passHref>
-              <Hover>
+            <Hover>
+              <Link href="/" passHref>
                 <Flex cursor="pointer">
                   <chakra.a title="iconr" display="flex" alignItems="center">
                     <Image
-                      src="images/logo.png"
+                      src="/images/logo.png"
                       boxSize="25px"
                       alt="iconr logo"
                     />
@@ -56,8 +56,8 @@ const Header = () => {
                     iconr
                   </chakra.h1>
                 </Flex>
-              </Hover>
-            </Link>
+              </Link>
+            </Hover>
             <HStack display="flex" alignItems="center">
               <HStack
                 spacing={2}
@@ -70,6 +70,15 @@ const Header = () => {
                 >
                   <Button variant="ghost">Library</Button>
                 </Link>
+                <Link href="https://twitter.com/iconrhq" passHref>
+                  <IconButton
+                    aria-label="Twitter profile"
+                    bg="transparent"
+                    border="0"
+                    variant="outline"
+                    icon={<IoLogoTwitter size="25" />}
+                  />
+                </Link>
                 <Link href="https://github.com/pheralb/iconr" passHref>
                   <IconButton
                     aria-label="Github Repository"

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;

components/search/withModal.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const WithModal = () => {
+    return (
+        <>
+            
+        </>
+    )
+}
+
+export default WithModal

components/sidebar/index.js

@@ -0,0 +1,96 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  Flex,
+  Icon,
+  IconButton,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { IoAlbums, IoAlbumsOutline } from "react-icons/io5";
+import Categories from "components/items/categories";
+import SideItem from "./sideItem";
+
+export default function Index({ children }) {
+  const sidebar = useDisclosure();
+
+  const SidebarContent = (props) => (
+    <Box
+      as="nav"
+      pos="fixed"
+      zIndex="sticky"
+      h={{ base: "full", md: "90%" }}
+      pb="10"
+      px={{ base: 2, md: 6 }}
+      overflowX="hidden"
+      overflowY="auto"
+      bg="brand.600"
+      w="30"
+      {...props}
+    >
+      <Flex
+        direction="column"
+        as="nav"
+        fontSize="sm"
+        aria-label="Main Navigation"
+        pt="2"
+      >
+        <SideItem
+          fontWeight="semibold"
+          fontSize="18px"
+          borderBottomWidth="1px"
+          borderRadius="0px"
+          mb="3"
+        >
+          <Icon as={IoAlbumsOutline} mr="2" />
+          Categories
+        </SideItem>
+        <Categories />
+      </Flex>
+    </Box>
+  );
+  return (
+    <Box as="section" minH="100vh">
+      <SidebarContent display={{ base: "none", md: "unset" }} />
+      <Drawer
+        isOpen={sidebar.isOpen}
+        onClose={sidebar.onClose}
+        placement="left"
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <SidebarContent w="full" borderRight="none" />
+        </DrawerContent>
+      </Drawer>
+      <Box ml={{ base: 0, md: "60" }} transition=".3s ease">
+        <Flex
+          as="header"
+          align="center"
+          justify="space-between"
+          w="full"
+          px="4"
+          h="14"
+          display={{ base: "inline-flex", md: "none" }}
+        >
+          <Button
+            onClick={sidebar.onOpen}
+            leftIcon={<IoAlbumsOutline />}
+            size="md"
+            borderWidth="1px"
+            bg="transparent"
+            w="100%"
+          >
+            Categories
+          </Button>
+        </Flex>
+        <Box as="main" p="4">
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

components/sidebar/sideItem.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Flex } from "@chakra-ui/react";
+
+const SideItem = (props) => {
+  const { icon, children, ...rest } = props;
+  return (
+    <Flex
+      align="center"
+      px="4"
+      mx="2"
+      rounded="md"
+      py="3"
+      role="group"
+      transition=".15s ease"
+      {...rest}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export default SideItem;