Merge branch 'develop'

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals"]
 }

.gitignore

@@ -1,34 +1,42 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
+# dependencies ->
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
-# testing
+# testing ->
 /coverage
 
-# next.js
+# next.js ->
 /.next/
 /out/
 
-# production
+# production ->
 /build
 
-# misc
+# misc ->
 .DS_Store
 *.pem
 
-# debug
+# debug ->
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+# local env files ->
+.env*.local
 
-# vercel
+# vercel ->
 .vercel
+
+# typescript ->
+*.tsbuildinfo
+
+# PWA files ->
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

README.md

@@ -1,27 +1,108 @@
-<p align="center" style="margin-top:5px">
-  <a href="https://strapi.io/#gh-light-mode-only">
-    <img src="https://iconr.vercel.app/images/logo.png" width="85px" alt="iconr logo" />
+<p align="center">
+  <a href="https://svgl.vercel.app/" target="_blank">
+    <img src="https://i.postimg.cc/1tzrP2rg/banner-corner.png" width="800px" alt="SVGL Banner" />
   </a>
 </p>
-<h2 align="center">Iconr - Beautiful SVG vector icons</h2>
-<br />
+
+## 📦 Packages:
+
+- ⚡️ [Nextjs](https://nextjs.org/) - The React Framework for Production.
+- ⚒️ [React 18](https://reactjs.org/) - A JavaScript library for building user interfaces.
+- 💙 [Typescript](https://www.typescriptlang.org/) - A superset of JavaScript.
+- ✅ [Vitest](https://vitest.dev/) - A blazing fast unit test framework.
+- 💅 [Chakra UI](https://chakra-ui.com/) - Create accessible React apps with speed.
+- 💥 [Framer Motion](https://www.framer.com/motion/) - Production-ready motion library.
+- 💖 [Phosphor Icons](https://phosphoricons.com/) - A flexible icon family for everyone.
+- ⬇️ [Next-PWA](https://github.com/shadowwalker/next-pwa) - Zero config PWA plugin for Next.js, with workbox.
 
 ## 🚀 Getting started:
 
 You need:
 
-- [Node.js 16+ (recommend: 16.13.2 LTS)](https://nodejs.org/en/)
+- [Node.js 16+ (recommend: 16.15.1 LTS)](https://nodejs.org/en/)
 - [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
 
-and run:
+1. Clone the repository:
+
+```bash
+git@github.com:pheralb/svgl.git
+```
+
+2. Install dependencies:
 
 ```bash
 npm install
-npm run dev
+# or
+yarn install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+3. Run:
 
-## 📦 Deployed on Vercel:
+```bash
+npm run dev
+# or
+yarn dev
+```
 
-[https://iconr.vercel.app/](https://iconr.vercel.app/)
+4. Test & Build:
+
+```bash
+npm run ready
+# or
+yarn ready
+```
+
+Open [localhost:3000](localhost:3000) with your browser to see the result.
+
+## 🤔 Can I add my logo?
+
+Yes! Here is a guide for you 🥳:
+
+1. [Fork the repository](https://github.com/pheralb/svgl/fork).
+
+2. Clone the forked repository:
+
+```bash
+git@github.com:YOUR_USERNAME/svgl.git
+```
+
+3. Add the **.svg** logo here: [`/public/library`](https://github.com/pheralb/svgl/tree/main/public/library).
+
+4. Add your logo information here following the structure: [`/data/svgs.json`](https://github.com/pheralb/svgl/tree/main/public/library).
+
+```json
+{
+  "id": 1,
+  "slug": "/library/your_logo.svg",
+  "title": "Logo Title",
+  "category": "Logo Category",
+  "url": "Your Website / app url"
+}
+```
+
+5. Create a commit and push:
+
+```bash
+git add .
+git commit -m "🥰 Added my logo"
+git push origin main
+```
+
+6. Create a pull request with your changes and 🥳 ready.
+
+## 🚂 Api endpoints:
+
+```bash
+- /api/all: returns all the logos.
+- /api/search?id=2: returns the logo with id 2.
+- /api/search?q=logo: returns the logo with query.
+```
+
+## ⚒️ Shortcuts:
+
+- ⭐ SVG Library: [/public/library/](https://github.com/pheralb/svgl/tree/main/public/library).
+- ✍️ SVG JSON logos: [/data/](https://github.com/pheralb/svgl/tree/main/data).
+
+## 🔑 License:
+
+- [MIT](https://github.com/pheralb/svgl/blob/main/LICENSE).

animations/hover.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-
-const Hover = ({ children }) => {
-  return (
-    <motion.div whileHover={{ scale: 1.020 }} whileTap={{ scale: 1 }}>
-      {children}
-    </motion.div>
-  );
-};
-
-export default Hover;

animations/loader.js

@@ -1,82 +0,0 @@
-import { motion } from "framer-motion";
-import React from "react";
-
-const LoadingDot = {
-  display: "block",
-  width: "1rem",
-  height: "1rem",
-  backgroundColor: "#50cdc5",
-  borderRadius: "50%",
-};
-
-const LoadingContainer = {
-  width: "5rem",
-  height: "5rem",
-  display: "flex",
-  justifyContent: "space-around",
-};
-
-const ContainerVariants = {
-  initial: {
-    transition: {
-      staggerChildren: 0.2,
-    },
-  },
-  animate: {
-    transition: {
-      staggerChildren: 0.2,
-    },
-  },
-};
-
-const DotVariants = {
-  initial: {
-    y: "0%",
-  },
-  animate: {
-    y: "100%",
-  },
-};
-
-const DotTransition = {
-  duration: 0.5,
-  yoyo: Infinity,
-  ease: "easeInOut",
-};
-
-export default function Loader() {
-  return (
-    <div
-      style={{
-        paddingTop: "5rem",
-        width: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <motion.div
-        style={LoadingContainer}
-        variants={ContainerVariants}
-        initial="initial"
-        animate="animate"
-      >
-        <motion.span
-          style={LoadingDot}
-          variants={DotVariants}
-          transition={DotTransition}
-        />
-        <motion.span
-          style={LoadingDot}
-          variants={DotVariants}
-          transition={DotTransition}
-        />
-        <motion.span
-          style={LoadingDot}
-          variants={DotVariants}
-          transition={DotTransition}
-        />
-      </motion.div>
-    </div>
-  );
-}

components/card/index.js

@@ -1,31 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
-import Hover from "animations/hover";
-
-const Index = ({ title, url, href }) => {
-  return (
-    <Link href={url} passHref>
-      <Box
-        _hover={{
-          shadow: "md",
-          transform: "translateY(-4px)",
-          transition: "all .3s",
-        }}
-        p={4}
-        cursor="pointer"
-        borderRadius="10px"
-        mb="3"
-      >
-        <Center>
-          <Image src={href} alt={title} boxSize="60px" />
-        </Center>
-        <Text mt="2" fontWeight="light" textAlign={"center"}>
-          {title}
-        </Text>
-      </Box>
-    </Link>
-  );
-};
-
-export default Index;

components/error/index.js

@@ -1,46 +0,0 @@
-import React from "react";
-import { Box, Flex, Button, Container, Text, Icon } from "@chakra-ui/react";
-import { 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/footer/index.js

@@ -1,17 +0,0 @@
-import React from "react";
-import { Center } from "@chakra-ui/react";
-import Link from "next/link";
-
-const Index = () => {
-  return (
-    <>
-      <Center h="100px" color="gray.500">
-        <Link href="https://github.com/pheralb" passHref>
-          Built by Pablo Hdez
-        </Link>
-      </Center>
-    </>
-  );
-};
-
-export default Index;

components/grid/index.js

@@ -1,12 +0,0 @@
-import React from 'react'
-import { SimpleGrid } from '@chakra-ui/react'
-
-const Index = ({children}) => {
-    return (
-        <SimpleGrid minChildWidth='200px' columns={3} spacing={5}>
-            {children}
-        </SimpleGrid>
-    )
-}
-
-export default Index

components/header/dark.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { useColorMode, useColorModeValue, IconButton } from "@chakra-ui/react";
-import { AnimatePresence, motion } from "framer-motion";
-import { IoMoon, IoSunnyOutline } from "react-icons/io5";
-
-const Index = () => {
-  const { colorMode, toggleColorMode } = useColorMode();
-  const iconChange = useColorModeValue(<IoSunnyOutline size="25" />, <IoMoon size="25" />);
-  const keyChange = useColorModeValue("light", "dark");
-
-  function toggleTheme() {
-    toggleColorMode();
-  }
-
-  return (
-    <AnimatePresence exitBeforeEnter initial={false}>
-      <motion.div
-        key={keyChange}
-        initial={{ y: -20, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        exit={{ y: 20, opacity: 0 }}
-        transition={{ duration: 0.2 }}
-      >
-        <IconButton
-          aria-label="Toggle theme"
-          bg="transparent"
-          border="0"
-          variant="outline"
-          icon={iconChange}
-          onClick={toggleTheme}
-        ></IconButton>
-      </motion.div>
-    </AnimatePresence>
-  );
-};
-
-export default Index;

components/header/index.js

@@ -1,185 +0,0 @@
-import React from "react";
-import {
-  chakra,
-  Box,
-  Flex,
-  VisuallyHidden,
-  HStack,
-  Button,
-  useDisclosure,
-  VStack,
-  IconButton,
-  CloseButton,
-  Container,
-  Image,
-  useColorModeValue,
-} from "@chakra-ui/react";
-import Dark from "components/header/dark";
-import {
-  IoApps,
-  IoBookOutline,
-  IoCloseSharp,
-  IoLogoGithub,
-  IoLogoTwitter,
-} from "react-icons/io5";
-import Link from "next/link";
-import Hover from "animations/hover";
-import Show from "animations/show";
-import { BiLinkExternal } from "react-icons/bi";
-
-const Header = () => {
-  const mobileNav = useDisclosure();
-  const bg = useColorModeValue("#fffffe", "#16161a");
-  const border = useColorModeValue("0", "1px");
-  const borderRadius = useColorModeValue("10px", "0");
-
-  return (
-    <>
-      <Box
-        w="full"
-        bg={bg}
-        mt="5"
-        mb="5"
-        px={{ base: 3, md: 5 }}
-        py="3"
-        pb="3"
-        borderRadius={borderRadius}
-        borderBottomWidth={border}
-        shadow="sm"
-        pos="sticky"
-        top="2"
-        zIndex="1000"
-      >
-        <Show>
-          <Flex alignItems="center" justifyContent="space-between" mx="auto">
-            <Hover>
-              <Link href="/" passHref>
-                <Flex cursor="pointer">
-                  <chakra.a title="iconr" display="flex" alignItems="center">
-                    <Image
-                      src="/images/logo.png"
-                      boxSize="25px"
-                      alt="iconr logo"
-                    />
-                    <VisuallyHidden>iconr</VisuallyHidden>
-                  </chakra.a>
-                  <chakra.h1
-                    fontSize="2xl"
-                    fontWeight="bold"
-                    fontFamily="Eina-Bold"
-                    ml="3"
-                  >
-                    iconr
-                  </chakra.h1>
-                </Flex>
-              </Link>
-            </Hover>
-            <HStack display="flex" alignItems="center">
-              <HStack
-                spacing={2}
-                color="brand.500"
-                display={{ base: "none", md: "inline-flex" }}
-              >
-                <Link
-                  href="https://github.com/pheralb/iconr/tree/main/public/library"
-                  passHref
-                >
-                  <Button
-                    variant="ghost"
-                    rightIcon={<BiLinkExternal />}
-                    fontWeight="light"
-                  >
-                    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"
-                    bg="transparent"
-                    border="0"
-                    variant="outline"
-                    icon={<IoLogoGithub size="25" />}
-                  />
-                </Link>
-                <Dark />
-              </HStack>
-              <Box display={{ base: "inline-flex", md: "none" }}>
-                <IconButton
-                  display={{ base: "flex", md: "none" }}
-                  aria-label="Open menu"
-                  fontSize="20px"
-                  variant="ghost"
-                  icon={<IoApps />}
-                  onClick={mobileNav.onOpen}
-                />
-                <VStack
-                  pos="absolute"
-                  borderWidth="2px"
-                  bg={bg}
-                  top={0}
-                  left={0}
-                  right={0}
-                  display={mobileNav.isOpen ? "flex" : "none"}
-                  flexDirection="column"
-                  pt="4"
-                  pb={4}
-                  spacing={3}
-                  rounded="sm"
-                  shadow="sm"
-                >
-                  <Button
-                    bg="transparent"
-                    border="0"
-                    variant="outline"
-                    leftIcon={<IoCloseSharp size="25" />}
-                    fontWeight="light"
-                    onClick={mobileNav.onClose}
-                  >
-                    Close
-                  </Button>
-                  <Link
-                    href="https://github.com/pheralb/iconr/tree/main/public/library"
-                    passHref
-                  >
-                    <Button
-                      bg="transparent"
-                      border="0"
-                      variant="outline"
-                      leftIcon={<IoBookOutline size="25" />}
-                      fontWeight="light"
-                    >
-                      Library
-                    </Button>
-                  </Link>
-                  <Link href="https://github.com/pheralb/iconr" passHref>
-                    <Button
-                      bg="transparent"
-                      border="0"
-                      variant="outline"
-                      leftIcon={<IoLogoGithub size="25" />}
-                      fontWeight="light"
-                    >
-                      Github
-                    </Button>
-                  </Link>
-                  <Dark />
-                </VStack>
-              </Box>
-            </HStack>
-          </Flex>
-        </Show>
-      </Box>
-    </>
-  );
-};
-
-export default Header;

components/header/logo.js

@@ -1,64 +0,0 @@
-import * as React from "react";
-
-function Logo(props) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 256 256"
-      color="currentColor"
-      {...props}
-    >
-      <path fill="none" d="M0 0H256V256H0z" />
-      <path
-        d="M37.9 207.9L91.7 59.8a8 8 0 0113.2-2.9l94.2 94.2a8 8 0 01-2.9 13.2L48.1 218.1a7.9 7.9 0 01-10.2-10.2zM168 72s0-24 24-24 24-24 24-24"
-        fill="none"
-        stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={16}
-      />
-      <path
-        fill="none"
-        stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={16}
-        d="M102.4 198.4L57.6 153.6"
-      />
-      <path
-        fill="none"
-        stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={16}
-        d="M144 16L144 40"
-      />
-      <path
-        fill="none"
-        stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={16}
-        d="M216 112L232 128"
-      />
-      <path
-        fill="none"
-        stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={16}
-        d="M216 80L240 72"
-      />
-      <path
-        fill="none"
-        stroke="#000"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={16}
-        d="M76.8 100.8L155.2 179.2"
-      />
-    </svg>
-  );
-}
-
-export default Logo;

components/items/all.js

@@ -1,33 +0,0 @@
-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/search/index.js

@@ -1,145 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import { createAutocomplete } from "@algolia/autocomplete-core";
-import Link from "next/link";
-import {
-  chakra,
-  Box,
-  Input,
-  InputLeftElement,
-  InputGroup,
-  Image,
-  Center,
-  Button,
-  Flex,
-} from "@chakra-ui/react";
-import { IoCloudDownloadOutline, IoLink, IoSearch } from "react-icons/io5";
-import { Algolia } from "components/svg";
-
-const AutocompleteItem = ({ id, title, href, url }) => {
-  return (
-    <>
-      <Box
-        w="100%"
-        id={id}
-        borderWidth="1px"
-        borderRadius="10px"
-        roundedTop={3}
-        mt="3"
-      >
-        <Box py={12} px={6}>
-          <Center>
-            <Image src={href} alt={title} boxSize="60px" mb="3" />
-          </Center>
-          <chakra.h2 fontSize={{ base: "2xl", md: "2xl" }} fontWeight="bold">
-            {title}
-          </chakra.h2>
-          <Box mt="3">
-            <Link href={href} passHref>
-              <Button
-                leftIcon={<IoCloudDownloadOutline />}
-                colorScheme="black"
-                variant="outline"
-                bg="transparent"
-                fontWeight="light"
-                mr="2"
-              >
-                Download .svg
-              </Button>
-            </Link>
-            <Link href={url} passHref>
-              <Button
-                rightIcon={<IoLink />}
-                colorScheme="teal"
-                variant="outline"
-                border="0"
-              >
-                {title} website
-              </Button>
-            </Link>
-          </Box>
-        </Box>
-      </Box>
-    </>
-  );
-};
-
-export default function Search(props) {
-  const [autocompleteState, setAutocompleteState] = useState({
-    collections: [],
-  });
-
-  const autocomplete = useMemo(
-    () =>
-      createAutocomplete({
-        placeholder: "Search icons...",
-        onStateChange: ({ state }) => setAutocompleteState(state),
-        getSources: () => [
-          {
-            sourceId: "svgs-next-api",
-            getItems: ({ query }) => {
-              if (!!query) {
-                return fetch(`/api/search?q=${query}`).then((res) =>
-                  res.json()
-                );
-              }
-            },
-          },
-        ],
-        ...props,
-      }),
-    [props]
-  );
-
-  const formRef = useRef(null);
-  const inputRef = useRef(null);
-
-  const formProps = autocomplete.getFormProps({
-    inputElement: inputRef.current,
-  });
-  const inputProps = autocomplete.getInputProps({
-    inputElement: inputRef.current,
-  });
-
-  return (
-    <form ref={formRef} {...formProps}>
-      <Flex>
-        <InputGroup w="full">
-          <InputLeftElement pointerEvents="none" mt="1">
-            <IoSearch size="20" />
-          </InputLeftElement>
-          <Input
-            w="100%"
-            shadow="none"
-            size="lg"
-            type="tel"
-            placeholder="Search icons..."
-            _focus={{ shadow: "md" }}
-            ref={inputRef}
-            {...inputProps}
-          />
-        </InputGroup>
-        <Box mt="4" ml="3" mr="2" cursor="pointer">
-          <Link href="https://www.algolia.com/" passHref>
-            <Algolia width="70px" />
-          </Link>
-        </Box>
-      </Flex>
-      <>
-        {autocompleteState.collections.map((collection, index) => {
-          const { items } = collection;
-          return (
-            <div key={`${index}`}>
-              {items.length > 0 && (
-                <ul {...autocomplete.getListProps()}>
-                  {items.map((item) => (
-                    <AutocompleteItem key={item.id} {...item} />
-                  ))}
-                </ul>
-              )}
-            </div>
-          );
-        })}
-      </>
-    </form>
-  );
-}

data/icons.js

@@ -1,277 +0,0 @@
-const Icons = [
-  {
-    id: 1,
-    href: "/library/discord.svg",
-    title: "Discord",
-    category: "Videocall",
-    url: "https://discord.com/",
-  },
-  {
-    id: 2,
-    href: "/library/github.svg",
-    title: "Github",
-    category: "Repository",
-    url: "https://github.com/",
-  },
-  {
-    id: 3,
-    href: "/library/preact.svg",
-    title: "Preact",
-    category: "Library",
-    url: "https://preactjs.com/",
-  },
-  {
-    id: 4,
-    href: "/library/react.svg",
-    title: "React",
-    category: "Library",
-    url: "https://reactjs.org/",
-  },
-  {
-    id: 5,
-    href: "/library/vercel.svg",
-    title: "Vercel",
-    category: "Hosting",
-    url: "https://vercel.com/",
-  },
-  {
-    id: 6,
-    href: "/library/svelte.svg",
-    title: "Svelte",
-    category: "Framework",
-    url: "https://svelte.dev/",
-  },
-  {
-    id: 7,
-    href: "/library/vue.svg",
-    title: "Vue",
-    category: "Framework",
-    url: "https://vuejs.org/",
-  },
-  {
-    id: 8,
-    href: "/library/nuxt.svg",
-    title: "Nuxt",
-    category: "Framework",
-    url: "https://nuxtjs.org/",
-  },
-  {
-    id: 9,
-    href: "/library/nextjs.svg",
-    title: "Nextjs",
-    category: "Framework",
-    url: "https://nextjs.org/",
-  },
-  {
-    id: 10,
-    href: "/library/vscode.svg",
-    title: "VSCode",
-    category: "Text Editor",
-    url: "https://code.visualstudio.com/",
-  },
-  {
-    id: 11,
-    href: "/library/jwt.svg",
-    title: "JWT",
-    category: "Security",
-    url: "https://jwt.io/",
-  },
-  {
-    id: 12,
-    href: "/library/strapi.svg",
-    title: "Strapi",
-    category: "CMS",
-    url: "https://strapi.io/",
-  },
-  {
-    id: 13,
-    href: "/library/figma.svg",
-    title: "Figma",
-    category: "Design",
-    url: "https://www.figma.com/",
-  },
-  {
-    id: 14,
-    href: "/library/spotify.svg",
-    title: "Spotify",
-    category: "Music",
-    url: "https://www.spotify.com/",
-  },
-  {
-    id: 15,
-    href: "/library/postman.svg",
-    title: "Postman",
-    category: "API",
-    url: "https://www.getpostman.com/",
-  },
-  {
-    id: 16,
-    href: "/library/algolia.svg",
-    title: "Algolia",
-    category: "Search",
-    url: "https://www.algolia.com/",
-  },
-  {
-    id: 17,
-    href: "/library/bootstrap.svg",
-    title: "Bootstrap",
-    category: "CSS Framework",
-    url: "https://getbootstrap.com/",
-  },
-  {
-    id: 18,
-    href: "/library/firebase.svg",
-    title: "Firebase",
-    category: "Hosting",
-    url: "https://firebase.google.com/",
-  },
-  {
-    id: 19,
-    href: "/library/supabase.svg",
-    title: "Supabase",
-    category: "Database",
-    url: "https://supabase.com/",
-  },
-  {
-    id: 20,
-    href: "/library/vitejs.svg",
-    title: "Vite.js",
-    category: "JavaScript Compiler",
-    url: "https://vitejs.dev",
-  },
-  {
-    id: 21,
-    href: "/library/facebook.svg",
-    title: "Facebook",
-    category: "Social",
-    url: "https://www.facebook.com/",
-  },
-  {
-    id: 22,
-    href: "/library/twitter.svg",
-    title: "Twitter",
-    category: "Social",
-    url: "https://twitter.com/",  
-  },
-  {
-    id: 23,
-    href: "/library/nodejs.svg",
-    title: "Node.js",
-    category: "JavaScript Runtime",
-    url: "https://nodejs.org/",
-  },
-  {
-    id: 24,
-    href: "/library/esbuild.svg",
-    title: "Esbuild",
-    category: "JavaScript Compiler",
-    url: "https://esbuild.github.io/",
-  },
-  {
-    id: 25,
-    href: "/library/deno.svg",
-    title: "Deno",
-    category: "JavaScript Runtime",
-    url: "https://deno.land/",
-  },
-  {
-    id: 26,
-    href: "/library/gatsby.svg",
-    title: "Gatsby",
-    category: "Static Site Generator",
-    url: "https://www.gatsbyjs.org/",
-  },
-  {
-    id: 27,
-    href: "/library/npm.svg",
-    title: "NPM",
-    category: "Package Manager",
-    url: "https://www.npmjs.com/",
-  },
-  {
-    id: 28,
-    href: "/library/homebrew.svg",
-    title: "Homebrew",
-    category: "Package Manager",
-    url: "https://brew.sh/",
-  },
-  {
-    id: 29,
-    href: "/library/sublimetext.svg",
-    title: "Sublime Text",
-    category: "Text Editor",
-    url: "https://www.sublimetext.com/",
-  },
-  {
-    id: 30,
-    href: "/library/turborepo.svg",
-    title: "TurboRepo",
-    category: "Package Manager",
-    url: "https://turborepo.org/",
-  },
-  {
-    id: 31,
-    href: "/library/tailwindcss.svg",
-    title: "Tailwind CSS",
-    category: "CSS Framework",
-    url: "https://tailwindcss.com/",
-  },
-  {
-    id: 32,
-    href: "/library/styledcomponents.svg",
-    title: "Styled Components",
-    category: "CSS-in-JS",
-    url: "https://styled-components.com/",
-  },
-  {
-    id: 33,
-    href: "/library/angular.svg",
-    title: "Angular",
-    category: "Framework",
-    url: "https://angular.io/",
-  },
-  {
-    id: 34,
-    href: "/library/blitzjs.svg",
-    title: "Blitz",
-    category: "Framework",
-    url: "https://blitzjs.com/",
-  },
-  {
-    id: 35,
-    href: "/library/lit.svg",
-    title: "Lit",
-    category: "Web Components", 
-    url: "https://lit.dev/",
-  },
-  {
-    id: 36,
-    href: "/library/atom.svg",
-    title: "Atom",
-    category: "Text Editor",
-    url: "https://atom.io/",
-  },
-  {
-    id: 37,
-    href: "/library/youtube.svg",
-    title: "YouTube",
-    category: "Video Platform",
-    url: "https://www.youtube.com/",
-  },
-  {
-    id: 38,
-    href: "/library/astro.svg",
-    title: "Astro",
-    category: "Framework",
-    url: "https://astro.build/",
-  },
-  {
-    id: 39,
-    href: "/library/google.svg",
-    title: "Google",
-    category: "Search",
-    url: "https://www.google.com/",
-  },
-];
-
-export default Icons;

data/svgs.json

@@ -0,0 +1,345 @@
+[
+  {
+    "id": 1,
+    "slug": "/library/discord.svg",
+    "title": "Discord",
+    "category": "Software",
+    "url": "https://discord.com/"
+  },
+  {
+    "id": 2,
+    "slug": "/library/github.svg",
+    "title": "Github",
+    "category": "Software",
+    "url": "https://github.com/"
+  },
+  {
+    "id": 3,
+    "slug": "/library/preact.svg",
+    "title": "Preact",
+    "category": "Library",
+    "url": "https://preactjs.com/"
+  },
+  {
+    "id": 4,
+    "slug": "/library/react.svg",
+    "title": "React",
+    "category": "Library",
+    "url": "https://reactjs.org/"
+  },
+  {
+    "id": 5,
+    "slug": "/library/vercel.svg",
+    "title": "Vercel",
+    "category": "Hosting",
+    "url": "https://vercel.com/"
+  },
+  {
+    "id": 6,
+    "slug": "/library/svelte.svg",
+    "title": "Svelte",
+    "category": "Library",
+    "url": "https://svelte.dev/"
+  },
+  {
+    "id": 7,
+    "slug": "/library/vue.svg",
+    "title": "Vue",
+    "category": "Framework",
+    "url": "https://vuejs.org/"
+  },
+  {
+    "id": 8,
+    "slug": "/library/nuxt.svg",
+    "title": "Nuxt",
+    "category": "Framework",
+    "url": "https://nuxtjs.org/"
+  },
+  {
+    "id": 9,
+    "slug": "/library/nextjs.svg",
+    "title": "Nextjs",
+    "category": "Framework",
+    "url": "https://nextjs.org/"
+  },
+  {
+    "id": 10,
+    "slug": "/library/vscode.svg",
+    "title": "VSCode",
+    "category": "Software",
+    "url": "https://code.visualstudio.com/"
+  },
+  {
+    "id": 11,
+    "slug": "/library/jwt.svg",
+    "title": "JWT",
+    "category": "Library",
+    "url": "https://jwt.io/"
+  },
+  {
+    "id": 12,
+    "slug": "/library/strapi.svg",
+    "title": "Strapi",
+    "category": "CMS",
+    "url": "https://strapi.io/"
+  },
+  {
+    "id": 13,
+    "slug": "/library/figma.svg",
+    "title": "Figma",
+    "category": "Software",
+    "url": "https://www.figma.com/"
+  },
+  {
+    "id": 14,
+    "slug": "/library/spotify.svg",
+    "title": "Spotify",
+    "category": "Software",
+    "url": "https://www.spotify.com/"
+  },
+  {
+    "id": 15,
+    "slug": "/library/postman.svg",
+    "title": "Postman",
+    "category": "Software",
+    "url": "https://www.getpostman.com/"
+  },
+  {
+    "id": 16,
+    "slug": "/library/algolia.svg",
+    "title": "Algolia",
+    "category": "Library",
+    "url": "https://www.algolia.com/"
+  },
+  {
+    "id": 17,
+    "slug": "/library/bootstrap.svg",
+    "title": "Bootstrap",
+    "category": "Framework",
+    "url": "https://getbootstrap.com/"
+  },
+  {
+    "id": 18,
+    "slug": "/library/firebase.svg",
+    "title": "Firebase",
+    "category": "Hosting",
+    "url": "https://firebase.google.com/"
+  },
+  {
+    "id": 19,
+    "slug": "/library/supabase.svg",
+    "title": "Supabase",
+    "category": "Database",
+    "url": "https://supabase.com/"
+  },
+  {
+    "id": 20,
+    "slug": "/library/vitejs.svg",
+    "title": "Vite.js",
+    "category": "Compiler",
+    "url": "https://vitejs.dev"
+  },
+  {
+    "id": 21,
+    "slug": "/library/facebook.svg",
+    "title": "Facebook",
+    "category": "Social",
+    "url": "https://www.facebook.com/"
+  },
+  {
+    "id": 22,
+    "slug": "/library/twitter.svg",
+    "title": "Twitter",
+    "category": "Social",
+    "url": "https://twitter.com/"
+  },
+  {
+    "id": 23,
+    "slug": "/library/nodejs.svg",
+    "title": "Node.js",
+    "category": "Library",
+    "url": "https://nodejs.org/"
+  },
+  {
+    "id": 24,
+    "slug": "/library/esbuild.svg",
+    "title": "Esbuild",
+    "category": "Compiler",
+    "url": "https://esbuild.github.io/"
+  },
+  {
+    "id": 25,
+    "slug": "/library/deno.svg",
+    "title": "Deno",
+    "category": "Library",
+    "url": "https://deno.land/"
+  },
+  {
+    "id": 26,
+    "slug": "/library/gatsby.svg",
+    "title": "Gatsby",
+    "category": "Framework",
+    "url": "https://www.gatsbyjs.org/"
+  },
+  {
+    "id": 27,
+    "slug": "/library/npm.svg",
+    "title": "NPM",
+    "category": "Software",
+    "url": "https://www.npmjs.com/"
+  },
+  {
+    "id": 28,
+    "slug": "/library/homebrew.svg",
+    "title": "Homebrew",
+    "category": "Software",
+    "url": "https://brew.sh/"
+  },
+  {
+    "id": 29,
+    "slug": "/library/sublimetext.svg",
+    "title": "Sublime Text",
+    "category": "Software",
+    "url": "https://www.sublimetext.com/"
+  },
+  {
+    "id": 30,
+    "slug": "/library/turborepo.svg",
+    "title": "TurboRepo",
+    "category": "Library",
+    "url": "https://turborepo.org/"
+  },
+  {
+    "id": 31,
+    "slug": "/library/tailwindcss.svg",
+    "title": "Tailwind CSS",
+    "category": "Framework",
+    "url": "https://tailwindcss.com/"
+  },
+  {
+    "id": 32,
+    "slug": "/library/styledcomponents.svg",
+    "title": "Styled Components",
+    "category": "Library",
+    "url": "https://styled-components.com/"
+  },
+  {
+    "id": 33,
+    "slug": "/library/angular.svg",
+    "title": "Angular",
+    "category": "Framework",
+    "url": "https://angular.io/"
+  },
+  {
+    "id": 34,
+    "slug": "/library/blitzjs.svg",
+    "title": "Blitz",
+    "category": "Framework",
+    "url": "https://blitzjs.com/"
+  },
+  {
+    "id": 35,
+    "slug": "/library/lit.svg",
+    "title": "Lit",
+    "category": "Library",
+    "url": "https://lit.dev/"
+  },
+  {
+    "id": 36,
+    "slug": "/library/atom.svg",
+    "title": "Atom",
+    "category": "Software",
+    "url": "https://atom.io/"
+  },
+  {
+    "id": 37,
+    "slug": "/library/youtube.svg",
+    "title": "YouTube",
+    "category": "Social",
+    "url": "https://www.youtube.com/"
+  },
+  {
+    "id": 38,
+    "slug": "/library/astro.svg",
+    "title": "Astro",
+    "category": "Framework",
+    "url": "https://astro.build/"
+  },
+  {
+    "id": 39,
+    "slug": "/library/google.svg",
+    "title": "Google",
+    "category": "Social",
+    "url": "https://www.google.com/"
+  },
+  {
+    "id": 40,
+    "slug": "/library/framer.svg",
+    "title": "Framer",
+    "category": "Software",
+    "url": "https://framer.com/"
+  },
+  {
+    "id": 41,
+    "slug": "/library/netflix.svg",
+    "title": "Netflix",
+    "category": "Entertainment",
+    "url": "https://www.netflix.com/"
+  },
+  {
+    "id": 42,
+    "slug": "/library/firefox.svg",
+    "title": "Firefox",
+    "category": "Software",
+    "url": "https://www.mozilla.org/en-US/firefox/"
+  },
+  {
+    "id": 43,
+    "slug": "/library/linkedin.svg",
+    "title": "LinkedIn",
+    "category": "Social",
+    "url": "https://www.linkedin.com/"
+  },
+  {
+    "id": 44,
+    "slug": "/library/telegram.svg",
+    "title": "Telegram",
+    "category": "Social",
+    "url": "https://web.telegram.org/"
+  },
+  {
+    "id": 45,
+    "slug": "/library/whatsapp.svg",
+    "title": "WhatsApp",
+    "category": "Social",
+    "url": "https://web.whatsapp.com/"
+  },
+  {
+    "id": 46,
+    "slug": "/library/headlessui.svg",
+    "title": "Headless UI",
+    "category": "Library",
+    "url": "https://headlessui.dev/"
+  },
+  {
+    "id": 47,
+    "slug": "/library/kotlin.svg",
+    "title": "Kotlin",
+    "category": "Language",
+    "url": "https://kotlinlang.org/"
+  },
+  {
+    "id": 48,
+    "slug": "/library/vitest.svg",
+    "title": "Vitest",
+    "category": "Framework",
+    "url": "https://vitest.dev/"
+  },
+  {
+    "id": 49,
+    "slug": "/library/storybook.svg",
+    "title": "Storybook",
+    "category": "Software",
+    "url": "https://storybook.js.org/"
+  }
+]

jsconfig.json

@@ -1,5 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "./"
-  }
-}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-seo.config.ts

@@ -0,0 +1,57 @@
+export default {
+  title: "A beautiful library with SVG logos",
+  titleTemplate: "%s - Svgl",
+  description: "Svgl is a library of free and open source SVG logos.",
+  defaultTitle: "svgl",
+  additionalLinkTags: [
+    {
+      rel: "icon",
+      href: "/icons/icon.ico",
+    },
+    {
+      rel: "apple-touch-icon",
+      href: "/icons/apple-touch-icon-180x180.png",
+      sizes: "180x180",
+    },
+    {
+      rel: "apple-touch-icon",
+      href: "/icons/apple-touch-icon-152x152.png",
+      sizes: "152x152",
+    },
+    {
+      rel: "apple-touch-icon",
+      href: "/icons/apple-touch-icon-114x114.png",
+      sizes: "114x114",
+    },
+    {
+      rel: "manifest",
+      href: "/manifest.json",
+    },
+    {
+      rel: "preload",
+      href: "/fonts/Inter-Regular.woff2",
+      as: "font",
+      type: "font/woff2",
+      crossOrigin: "anonymous",
+    },
+  ],
+  openGraph: {
+    site_name: "Svgl",
+    url: "https://svgl.vercel.app/",
+    type: "website",
+    locale: "en_IE",
+    images: [
+      {
+        url: "/images/banner.png",
+        width: 1920,
+        height: 1080,
+        type: "image/png",
+      }
+    ],
+  },
+  twitter: {
+    handle: "@pheralb_",
+    site: "@pheralb_",
+    cardType: "summary_large_image",
+  },
+};

next.config.js

@@ -1,3 +1,12 @@
-module.exports = {
+/** @type {import('next').NextConfig} */
+const withPWA = require("next-pwa");
+
+module.exports = withPWA({
   reactStrictMode: true,
-}
+  pwa: {
+    dest: "public",
+    register: true,
+    skipWaiting: true,
+    disable: process.env.NODE_ENV === "development",
+  },
+});

package.json

@@ -1,29 +1,55 @@
 {
-  "name": "iconr",
-  "version": "1.0.5",
-  "description": "Beautiful SVG vector icons",
-  "author": "pheralb",
+  "name": "svgl",
+  "version": "2.0.0",
+  "description": "A beautiful library with SVG logos.",
+  "private": true,
+  "author": "@pheralb_",
   "license": "MIT",
+  "keywords": [
+    "svgs",
+    "logos",
+    "images",
+    "library"
+  ],
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "vitest",
+    "ready": "vitest && next build"
   },
   "dependencies": {
-    "@algolia/autocomplete-core": "^1.5.2",
-    "@chakra-ui/react": "^1.8.3",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "framer-motion": "^6.2.6",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-icons": "^4.3.1",
-    "swr": "^1.2.1"
+    "@chakra-ui/react": "2.1.2",
+    "@emotion/react": "11.9.0",
+    "@emotion/styled": "11.8.1",
+    "@uiball/loaders": "1.2.6",
+    "canvas-confetti": "1.5.1",
+    "downloadjs": "1.4.7",
+    "framer-motion": "6.3.9",
+    "next": "12.1.6",
+    "next-pwa": "5.5.4",
+    "next-seo": "5.4.0",
+    "nextjs-progressbar": "0.0.14",
+    "phosphor-react": "1.4.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-hot-toast": "2.2.0",
+    "swr": "1.3.0"
   },
   "devDependencies": {
-    "eslint": "8.9.0",
-    "eslint-config-next": "12.1.0"
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.3.0",
+    "@types/canvas-confetti": "1.4.2",
+    "@types/downloadjs": "1.4.3",
+    "@types/node": "17.0.38",
+    "@types/react": "18.0.10",
+    "@types/react-dom": "18.0.5",
+    "@vitejs/plugin-react": "1.3.2",
+    "eslint": "8.16.0",
+    "eslint-config-next": "12.1.6",
+    "jsdom": "20.0.0",
+    "typescript": "4.7.2",
+    "vitest": "0.15.2"
   }
 }

pages/404.js

@@ -1,8 +0,0 @@
-import Error from 'components/error';
-import React from 'react';
-
-const Error404 = () => {
-  return <Error />;
-};
-
-export default Error404;

pages/_app.js

@@ -1,52 +0,0 @@
-// 🖤 Next Head ->
-import Head from "next/head";
-
-// 🌿 Chakra UI ->
-import { ChakraProvider, Container } from "@chakra-ui/react";
-
-// 📦 Components ->
-import Header from "components/header";
-import Footer from "components/footer";
-
-// 💙 Global CSS ->
-import "styles/globals.css";
-
-// 🎨 Theme ->
-import theme from "styles/theme";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <Head>
-        <title>iconr - Beautiful SVG vector icons</title>
-        <meta name="description" content="SVGs for everyone, totally free" />
-        <meta property="og:type" content="website" />
-        <meta
-          property="og:title"
-          content="iconr - Beautiful SVG vector icons"
-        />
-        <meta property="og:url" content="https://iconr.vercel.app/" />
-        <meta
-          property="og:description"
-          content="Beautiful SVG vector icons. Free and open source."
-        />
-        <meta
-          property="og:image"
-          content="https://iconr.vercel.app/images/banner.png"
-        />
-        <meta name="keywords" content="svg,vector,logo,logos,download" />
-        <meta content="#16161a" name="theme-color" />
-        <link rel="icon" href="/images/logo.png" />
-      </Head>
-      <ChakraProvider theme={theme}>
-        <Container maxW={{ base: "100%", md: "85%" }}>
-          <Header />
-          <Component {...pageProps} />
-          <Footer />
-        </Container>
-      </ChakraProvider>
-    </>
-  );
-}
-
-export default MyApp;

pages/api/all.js

@@ -1,6 +0,0 @@
-import db from "data/icons";
-
-// 📦 Show all content ->
-export default function handler(req, res) {
-  res.status(200).json(db);
-}

pages/api/categories.js

@@ -1,13 +0,0 @@
-import db from "data/icons";
-
-// 📦 Show categories ->
-export default function handler(req, res) {
-  try {
-    const categories = db
-      .map((item) => item.category)
-      .filter((category, index, self) => self.indexOf(category) === index);
-    return res.status(200).json(categories);
-  } catch (err) {
-    res.status(400).json({ message: err });
-  }
-}

pages/icon/[id].js

@@ -1,129 +0,0 @@
-import Head from "next/head";
-import {
-  chakra,
-  Box,
-  Flex,
-  Badge,
-  SimpleGrid,
-  Button,
-  Image,
-  Container,
-  Center,
-  HStack,
-} from "@chakra-ui/react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-import Error from "components/error";
-import { IoArrowBackOutline, IoCloudDownloadOutline } from "react-icons/io5";
-import { BiLinkExternal } from "react-icons/bi";
-import Link from "next/link";
-import Show from "animations/show";
-import Loader from "animations/loader";
-import Hover from "animations/hover";
-
-const fetcher = async (url) => {
-  const res = await fetch(url);
-  const data = await res.json();
-  if (res.status !== 200) {
-    throw new Error(data.message);
-  }
-  return data;
-};
-
-export default function Icon() {
-  const { query } = useRouter();
-  const { data, error } = useSWR(
-    () => query.id && `/api/search?id=${query.id}`,
-    fetcher
-  );
-
-  if (error) return <Error />;
-  if (!data) return <Loader />;
-
-  return (
-    <>
-      <Head>
-        <title>{data.title} - iconr</title>
-      </Head>
-      <Show delay="0">
-        <Container
-          maxW="100%"
-          borderWidth="1px"
-          borderRadius="30px"
-        >
-          <SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} spacing={0}>
-            <Box py={{ base: "10", md: "24" }}>
-              <Center>
-                <Image
-                  src={data.href}
-                  alt={data.title}
-                  w={{ base: "30%", md: "20%", lg: "30%" }}
-                  fit="cover"
-                  loading="lazy"
-                />
-              </Center>
-            </Box>
-            <Flex
-              direction="column"
-              alignItems="start"
-              justifyContent="center"
-              px={{ base: 4, lg: 4 }}
-              py={{ base: "3", md: "0", lg: "10" }}
-            >
-              <chakra.h1
-                mb={3}
-                fontSize={{ base: "4xl", md: "4xl", lg: "5xl" }}
-                fontWeight="semibold"
-                lineHeight="shorter"
-              >
-                {data.title}
-              </chakra.h1>
-              <Flex direction={{ base: "column", md: "row" }} mt="2">
-                <Hover>
-                  <Link href={data.href} passHref>
-                    <Button
-                      leftIcon={<IoCloudDownloadOutline />}
-                      colorScheme="black"
-                      variant="outline"
-                      bg="transparent"
-                      fontWeight="light"
-                      mr="2"
-                    >
-                      Download .svg
-                    </Button>
-                  </Link>
-                </Hover>
-                <Link href={data.url} passHref>
-                  <Button
-                    colorScheme="teal"
-                    variant="outline"
-                    fontWeight="light"
-                    borderWidth="1px"
-                    rightIcon={<BiLinkExternal />}
-                  >
-                    {data.title} website
-                  </Button>
-                </Link>
-              </Flex>
-            </Flex>
-          </SimpleGrid>
-
-          <Link href="/" passHref>
-            <Button
-              leftIcon={<IoArrowBackOutline />}
-              colorScheme="twitter"
-              variant="outline"
-              fontWeight="bold"
-              w="100%"
-              border="0"
-              mt="4"
-              mb="4"
-            >
-              Continue discovering
-            </Button>
-          </Link>
-        </Container>
-      </Show>
-    </>
-  );
-}

pages/index.js

@@ -1,32 +0,0 @@
-import { chakra, Box, Container } from "@chakra-ui/react";
-import Search from "components/search";
-import Items from "components/items/all";
-import Show from "animations/show";
-
-export default function Index() {
-  return (
-    <>
-      <Box mt="10">
-        <Box w="full" border="solid 1px transparent">
-          <Box textAlign="center">
-            <Show delay="0">
-              <chakra.h1
-                fontSize={{ base: "30px", sm: "35px", md: "6xl" }}
-                letterSpacing="tight"
-                lineHeight="short"
-                fontWeight="extrabold"
-                mb={{ base: 4, md: 8 }}
-              >
-                Beautiful SVG vector icons
-              </chakra.h1>
-            </Show>
-            <Search />
-            <Box mt={{ base: 4, md: 8 }}>
-              <Items />
-            </Box>
-          </Box>
-        </Box>
-      </Box>
-    </>
-  );
-}

public/images/svgl.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="#4343e5" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M128,92a20,20,0,0,0-40,0v24" fill="none" stroke="#4343e5" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></path><path d="M168,108V92a20,20,0,0,0-40,0v32" fill="none" stroke="#4343e5" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></path><path d="M88,148V116H68a20.1,20.1,0,0,0-20,20v16a80,80,0,0,0,160,0V108a20,20,0,0,0-40,0v16" fill="none" stroke="#4343e5" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></path></svg>

public/library/firefox.svg

@@ -0,0 +1,201 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="256px" height="265px" viewBox="0 0 256 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<defs>
+		<radialGradient id="SVGID_1_" cx="-14920.2256" cy="-8274.0713" r="124.382" fx="-14928.1611" fy="-8274.0713" gradientTransform="matrix(0.7398 2.920152e-02 -4.866920e-02 1.0902 10886.5264 9537.6963)" gradientUnits="userSpaceOnUse">
+			<stop offset="0.1" style="stop-color:#FFEA00"/>
+			<stop offset="0.17" style="stop-color:#FFDE00"/>
+			<stop offset="0.28" style="stop-color:#FFBF00"/>
+			<stop offset="0.43" style="stop-color:#FF8E00"/>
+			<stop offset="0.77" style="stop-color:#FF272D"/>
+			<stop offset="0.87" style="stop-color:#E0255A"/>
+			<stop offset="0.95" style="stop-color:#CC2477"/>
+			<stop offset="1" style="stop-color:#C42482"/>
+		</radialGradient>
+		<radialGradient id="_Path__1_" cx="-8176.5342" cy="-7746.3013" r="218.2726" gradientTransform="matrix(1.1973 0 0 1.1973 9957.373 9315.5225)" gradientUnits="userSpaceOnUse">
+			<stop offset="0" style="stop-color:#00CCDA"/>
+			<stop offset="0.22" style="stop-color:#0083FF"/>
+			<stop offset="0.26" style="stop-color:#007AF9"/>
+			<stop offset="0.33" style="stop-color:#0060E8"/>
+			<stop offset="0.33" style="stop-color:#005FE7"/>
+			<stop offset="0.44" style="stop-color:#2639AD"/>
+			<stop offset="0.52" style="stop-color:#401E84"/>
+			<stop offset="0.57" style="stop-color:#4A1475"/>
+		</radialGradient>
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="145.2425" y1="481.7857" x2="93.8365" y2="313.6288" gradientTransform="matrix(1 0 0 1 0 -286)">
+			<stop offset="0" style="stop-color:#000F43;stop-opacity:0.4"/>
+			<stop offset="0.48" style="stop-color:#001962;stop-opacity:0.17"/>
+			<stop offset="1" style="stop-color:#002079;stop-opacity:0"/>
+		</linearGradient>
+		<radialGradient id="SVGID_3_" cx="-9132.6758" cy="-6696.7002" r="73.6256" gradientTransform="matrix(1.1875 0.1168 -0.1168 1.1875 10322.1836 9194.8447)" gradientUnits="userSpaceOnUse">
+			<stop offset="0" style="stop-color:#FFEA00"/>
+			<stop offset="0.5" style="stop-color:#FF272D"/>
+			<stop offset="1" style="stop-color:#C42482"/>
+		</radialGradient>
+		<radialGradient id="SVGID_4_" cx="-9139.3379" cy="-6767.2969" r="122.9475" gradientTransform="matrix(1.1875 0.1168 -0.1168 1.1875 10322.1836 9194.8447)" gradientUnits="userSpaceOnUse">
+			<stop offset="0" style="stop-color:#FFE900"/>
+			<stop offset="0.16" style="stop-color:#FFAF0E"/>
+			<stop offset="0.32" style="stop-color:#FF7A1B"/>
+			<stop offset="0.47" style="stop-color:#FF4E26"/>
+			<stop offset="0.62" style="stop-color:#FF2C2E"/>
+			<stop offset="0.76" style="stop-color:#FF1434"/>
+			<stop offset="0.89" style="stop-color:#FF0538"/>
+			<stop offset="1" style="stop-color:#FF0039"/>
+		</radialGradient>
+		<radialGradient id="SVGID_5_" cx="-9121.9473" cy="-6653.3262" r="112.8177" gradientTransform="matrix(1.1875 0.1168 -0.1168 1.1875 10322.1836 9194.8447)" gradientUnits="userSpaceOnUse">
+			<stop offset="0" style="stop-color:#FF272D"/>
+			<stop offset="0.5" style="stop-color:#C42482"/>
+			<stop offset="0.99" style="stop-color:#620700"/>
+		</radialGradient>
+		<radialGradient id="SVGID_6_" cx="227.574" cy="408.42" r="215.776" fx="235.2917" fy="404.6054" gradientTransform="matrix(0.9734 0 0 0.9734 -29.4728 -291.7491)" gradientUnits="userSpaceOnUse">
+			<stop offset="0.16" style="stop-color:#FFEA00"/>
+			<stop offset="0.23" style="stop-color:#FFDE00"/>
+			<stop offset="0.37" style="stop-color:#FFBF00"/>
+			<stop offset="0.54" style="stop-color:#FF8E00"/>
+			<stop offset="0.76" style="stop-color:#FF272D"/>
+			<stop offset="0.8" style="stop-color:#F92433"/>
+			<stop offset="0.84" style="stop-color:#E91C45"/>
+			<stop offset="0.89" style="stop-color:#CF0E62"/>
+			<stop offset="0.94" style="stop-color:#B5007F"/>
+		</radialGradient>
+		<radialGradient id="SVGID_7_" cx="215.2015" cy="308.3499" r="245.9198" gradientTransform="matrix(0.9734 0 0 0.9734 -29.4728 -291.7491)" gradientUnits="userSpaceOnUse">
+			<stop offset="0.28" style="stop-color:#FFEA00"/>
+			<stop offset="0.4" style="stop-color:#FFDD00"/>
+			<stop offset="0.63" style="stop-color:#FFBA00"/>
+			<stop offset="0.86" style="stop-color:#FF9100"/>
+			<stop offset="0.93" style="stop-color:#FF6711"/>
+			<stop offset="0.99" style="stop-color:#FF4A1D"/>
+		</radialGradient>
+		<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="-9348.6621" y1="-6754.1943" x2="-9266.2168" y2="-6775.209" gradientTransform="matrix(1.22 0.12 -0.12 1.22 10634.7598 9460)">
+			<stop offset="0" style="stop-color:#C42482;stop-opacity:0.5"/>
+			<stop offset="0.47" style="stop-color:#FF272D;stop-opacity:0.5"/>
+			<stop offset="0.49" style="stop-color:#FF2C2C;stop-opacity:0.51"/>
+			<stop offset="0.68" style="stop-color:#FF7A1A;stop-opacity:0.72"/>
+			<stop offset="0.83" style="stop-color:#FFB20D;stop-opacity:0.87"/>
+			<stop offset="0.94" style="stop-color:#FFD605;stop-opacity:0.96"/>
+			<stop offset="1" style="stop-color:#FFE302"/>
+		</linearGradient>
+		<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="103.0922" y1="-1126.7808" x2="88.439" y2="-1164.3336" gradientTransform="matrix(0.99 0.1 -0.1 0.99 -175.62 1176.2098)">
+			<stop offset="0" style="stop-color:#891551;stop-opacity:0.6"/>
+			<stop offset="1" style="stop-color:#C42482;stop-opacity:0"/>
+		</linearGradient>
+		<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="-193.2793" y1="534.1769" x2="-168.0087" y2="562.8766" gradientTransform="matrix(0.99 0.1 -0.1 0.99 303.51 -384.2)">
+			<stop offset="1.000000e-02" style="stop-color:#891551;stop-opacity:0.5"/>
+			<stop offset="0.48" style="stop-color:#FF272D;stop-opacity:0.5"/>
+			<stop offset="1" style="stop-color:#FF272D;stop-opacity:0"/>
+		</linearGradient>
+		<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-144.6839" y1="583.6765" x2="-144.6651" y2="563.5964" gradientTransform="matrix(0.99 0.1 -0.1 0.99 303.51 -384.2)">
+			<stop offset="0" style="stop-color:#C42482"/>
+			<stop offset="8.000000e-02" style="stop-color:#C42482;stop-opacity:0.81"/>
+			<stop offset="0.21" style="stop-color:#C42482;stop-opacity:0.57"/>
+			<stop offset="0.33" style="stop-color:#C42482;stop-opacity:0.36"/>
+			<stop offset="0.45" style="stop-color:#C42482;stop-opacity:0.2"/>
+			<stop offset="0.56" style="stop-color:#C42482;stop-opacity:9.000000e-02"/>
+			<stop offset="0.67" style="stop-color:#C42482;stop-opacity:2.000000e-02"/>
+			<stop offset="0.77" style="stop-color:#C42482;stop-opacity:0"/>
+		</linearGradient>
+		<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="166.5909" y1="295.7137" x2="248.6675" y2="479.2461" gradientTransform="matrix(1 0 0 1 0 -286)">
+			<stop offset="0" style="stop-color:#FFF14F"/>
+			<stop offset="0.27" style="stop-color:#FFEE4C"/>
+			<stop offset="0.45" style="stop-color:#FFE643"/>
+			<stop offset="0.61" style="stop-color:#FFD834"/>
+			<stop offset="0.76" style="stop-color:#FFC41E"/>
+			<stop offset="0.89" style="stop-color:#FFAB02"/>
+			<stop offset="0.9" style="stop-color:#FFA900"/>
+			<stop offset="0.95" style="stop-color:#FFA000"/>
+			<stop offset="1" style="stop-color:#FF9100"/>
+		</linearGradient>
+		<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="182.8878" y1="401.2735" x2="144.0111" y2="505.6616" gradientTransform="matrix(1 0 0 1 0 -286)">
+			<stop offset="0" style="stop-color:#FF8E00"/>
+			<stop offset="4.000000e-02" style="stop-color:#FF8E00;stop-opacity:0.86"/>
+			<stop offset="8.000000e-02" style="stop-color:#FF8E00;stop-opacity:0.73"/>
+			<stop offset="0.13" style="stop-color:#FF8E00;stop-opacity:0.63"/>
+			<stop offset="0.18" style="stop-color:#FF8E00;stop-opacity:0.56"/>
+			<stop offset="0.23" style="stop-color:#FF8E00;stop-opacity:0.51"/>
+			<stop offset="0.28" style="stop-color:#FF8E00;stop-opacity:0.5"/>
+			<stop offset="0.39" style="stop-color:#FF8E00;stop-opacity:0.48"/>
+			<stop offset="0.52" style="stop-color:#FF8E00;stop-opacity:0.42"/>
+			<stop offset="0.68" style="stop-color:#FF8E00;stop-opacity:0.31"/>
+			<stop offset="0.84" style="stop-color:#FF8E00;stop-opacity:0.17"/>
+			<stop offset="1" style="stop-color:#FF8E00;stop-opacity:0"/>
+		</linearGradient>
+	</defs>
+	<g>
+		<path fill="url(#SVGID_1_)" d="M206.8,24.6c-6.4,7.5-9.4,24.3-2.9,41.4s16.5,13.4,22.7,30.8c8.2,23,4.4,53.9,4.4,53.9 s9.9,28.6,16.8-1.8C263.1,91.8,206.8,38.7,206.8,24.6z"/>
+		<path id="_Path_" fill="url(#_Path__1_)" d="M128.4,261.7c65.9,0,119.2-53.6,119.2-119.8S194.2,22.2,128.4,22.2S9.3,75.8 9.3,141.9
+		C9.2,208.1,62.6,261.7,128.4,261.7z"/>
+		<path
+			fill="url(#SVGID_2_)"
+			d="M217.7,215.8c-2.6,1.8-5.3,3.4-8.1,4.9c3.7-5.5,7.2-11.1,10.3-16.9c2.5-2.8,4.9-5.5,6.8-8.5
+		c0.9-1.5,2-3.2,3.1-5.3c6.7-12.1,14.1-31.6,14.3-51.6v-1.5c0-5-0.5-10.1-1.5-15c0.1,0.4,0.1,0.8,0.2,1.2c-0.1-0.3-0.1-0.6-0.2-0.9
+		c0.1,0.5,0.2,1.1,0.3,1.6c1.4,11.6,0.4,22.9-4.5,31.3c-0.1,0.1-0.2,0.2-0.2,0.4c2.5-12.7,3.4-26.7,0.6-40.7c0,0-1.1-6.8-9.5-27.5
+		c-4.8-11.9-13.4-21.7-20.9-28.8c-6.6-8.2-12.7-13.7-16-17.2c-6.9-7.3-9.8-12.8-11-16.3c-1-0.5-14.3-13.4-15.3-13.9
+		c-5.8,9-23.9,37-15.3,63.1c3.9,11.9,13.8,24.2,24.2,31.1c0.5,0.5,6.2,6.7,8.9,20.7c2.8,14.5,1.3,25.7-4.4,42.4
+		c-6.8,14.6-24.2,29.1-40.5,30.6c-34.8,3.2-47.6-17.5-47.6-17.5c12.4,5,26.2,3.9,34.6-1.2c8.4-5.2,13.5-9.1,17.7-7.6
+		c4.1,1.5,7.3-2.9,4.4-7.5c-4.6-7.1-13-10.7-21.3-9.3c-8.4,1.4-16.2,8.1-27.2,1.6c-0.7-0.4-1.4-0.9-2.1-1.4s2.4,0.7,1.6,0.2
+		c-2.1-1.2-6-3.7-6.9-4.6c-0.2-0.2,1.7,0.6,1.5,0.4c-10.3-8.5-9-14.3-8.7-17.9c0.3-2.9,2.1-6.6,5.3-8.1c1.5,0.8,2.5,1.5,2.5,1.5
+		s-0.7-1.3-1-2c0.1-0.1,0.2,0,0.4-0.1c1.3,0.6,4,2.2,5.5,3.1c1.9,1.3,2.5,2.5,2.5,2.5s0.5-0.3,0.1-1.4c-0.1-0.5-0.7-2-2.6-3.5h0.1
+		c1.1,0.6,2.2,1.4,3.2,2.2c0.5-1.9,1.5-3.9,1.3-7.5c-0.1-2.5-0.1-3.2-0.5-4.2c-0.4-0.8,0.2-1.2,0.9-0.3c-0.1-0.7-0.3-1.4-0.6-2v-0.1
+		c0.9-3,18.3-10.9,19.6-11.8c2.1-1.5,3.8-3.4,5.1-5.6c1-1.5,1.7-3.7,1.9-7c0.1-2.4-1-4-18.7-5.8c-4.8-0.5-7.7-4-9.3-7.2
+		c-0.3-0.7-0.6-1.3-0.9-2s-0.5-1.5-0.7-2.3c2.9-8.3,7.7-15.3,14.9-20.6c0.4-0.4-1.6,0.1-1.2-0.3c0.5-0.4,3.4-1.6,4-1.9
+		c0.7-0.3-2.9-1.9-6.1-1.5s-3.9,0.8-5.7,1.5c0.7-0.7,3-1.7,2.5-1.6c-3.5,0.5-7.8,2.6-11.5,4.9c0-0.4,0.1-0.8,0.2-1.2
+		c-1.7,0.7-6,3.7-7.2,6.2c0.1-0.5,0.1-1,0.1-1.5c-1.3,1.1-2.5,2.3-3.5,3.7L85,60.5c-10-4-18.9-4.3-26.3-2.5c-1.6-1.6-2.4-0.4-6.2-8.6
+		c-0.3-0.5,0.2,0.5,0,0c-0.6-1.6,0.4,2.1,0,0c-6.2,5-14.4,10.6-18.4,14.5c0,0.2,4.6-1.3,0,0c-1.6,0.5-1.5,1.4-1.7,10.1
+		c-0.1,0.7,0,1.4-0.1,2c-3.2,4-5.3,7.4-6.1,9.2c-4.1,7-8.6,18-12.9,35.3c1.9-4.7,4.2-9.2,6.9-13.5c-3.6,9.2-7.1,23.7-7.8,45.9
+		c0.9-4.6,2-9.1,3.4-13.6c-0.9,18.5,2.3,36.9,9.3,54c2.5,6.1,6.6,15.4,13.7,25.6c22.2,23.3,53.4,37.8,88,37.8
+		C162.9,256.7,195.4,240.9,217.7,215.8z"/>
+		<path fill="url(#SVGID_3_)" d="M190.9,232.7c43.7-5.1,63.1-50.1,38.2-51C206.7,181,170.2,235.1,190.9,232.7z"/>
+		<path fill="url(#SVGID_4_)" d="M232.3,172.5c30.1-17.5,22.2-55.3,22.2-55.3s-11.6,13.5-19.5,35C227.3,173.5,214.2,183.1,232.3,172.5
+		z"/>
+		<path fill="url(#SVGID_5_)" d="M136.8,255.1c42,13.4,78-19.7,55.8-30.7C172.4,214.5,116.9,248.8,136.8,255.1z"/>
+
+		<path
+			fill="url(#SVGID_6_)"
+			d="M235.5,188.6c1-1.4,2.4-6,3.6-8.1c7.4-12,7.5-21.5,7.5-21.7c4.5-22.3,4.1-31.5,1.3-48.3
+		c-2.2-13.6-11.9-33.1-20.3-42.4c-8.6-9.7-2.6-6.5-10.9-13.6c-7.3-8.1-14.5-16.2-18.3-19.4c-28-23.4-27.4-28.4-26.8-29.2
+		c-0.1,0.1-0.2,0.2-0.4,0.4c-0.3-1.3-0.6-2.4-0.6-2.4S155.2,19.1,152,44.6c-2.1,16.6,4.1,34,13.2,45.1c4.7,5.8,10,11,15.8,15.6l0,0
+		c6.8,9.8,10.6,21.9,10.6,34.9c0,32.6-26.4,58.9-59,58.9c-4.4,0-8.9-0.5-13.2-1.5c-15.4-2.9-24.2-10.7-28.7-16
+		c-2.5-3-3.6-5.2-3.6-5.2c13.8,4.9,29,3.9,38.3-1.2c9.3-5.2,15-9,19.6-7.5c4.5,1.5,8.1-2.9,4.9-7.4c-3.2-4.5-11.4-11-23.6-9.2
+		c-9.3,1.4-17.9,8-30.1,1.6c-0.8-0.4-1.6-0.9-2.3-1.3c-0.8-0.5,2.6,0.7,1.8,0.2c-2.4-1.2-6.6-3.7-7.7-4.6c-0.2-0.2,1.8,0.6,1.7,0.4
+		c-11.4-8.4-10-14.1-9.7-17.7c0.3-2.9,2.4-6.5,5.9-8c1.7,0.8,2.7,1.5,2.7,1.5s-0.7-1.3-1.1-2c0.1-0.1,0.3,0,0.4-0.1
+		c1.4,0.6,4.5,2.1,6.1,3.1c2.1,1.3,2.8,2.5,2.8,2.5s0.6-0.3,0.1-1.4c-0.2-0.5-0.8-2-2.9-3.5h0.1c1.2,0.6,2.4,1.4,3.5,2.2
+		c0.6-1.9,1.6-3.9,1.4-7.5c-0.1-2.5-0.1-3.2-0.6-4.1c-0.4-0.8,0.2-1.2,1-0.3c-0.1-0.7-0.4-1.3-0.7-2V110c1-3,20.3-10.8,21.7-11.7
+		c2.3-1.4,4.2-3.3,5.7-5.5c1.1-1.5,1.9-3.7,2.1-7c0.1-1.5-0.4-2.6-5.5-3.8c-3.1-0.7-7.8-1.3-15.2-2c-5.3-0.5-8.5-3.9-10.3-7.1
+		c-0.3-0.7-0.7-1.3-1-1.9c-0.3-0.7-0.6-1.5-0.8-2.2c3.2-8.4,9-15.5,16.5-20.4c0.4-0.4-1.7,0.1-1.3-0.3c0.5-0.4,3.8-1.6,4.4-1.9
+		c0.8-0.3-3.2-1.8-6.8-1.5c-3.6,0.4-4.3,0.7-6.3,1.5c0.8-0.7,3.3-1.6,2.7-1.6C101,45,96.2,47,92.1,49.3c0-0.4,0.1-0.8,0.2-1.2
+		c-1.9,0.7-6.6,3.7-8,6.2c0.1-0.5,0.1-1,0.1-1.4c-1.4,1.1-2.8,2.3-3.9,3.7l-0.1,0.1c-11.1-4-20.9-4.3-29.1-2.5
+		c-1.8-1.6-4.7-4.1-8.8-12.2c-0.3-0.5-0.4,1-0.6,0.5c-1.6-3.7-2.6-9.8-2.4-14c0,0-3.3,1.5-6,7.8c-0.5,1.1-0.8,1.8-1.2,2.4
+		c-0.2,0.2,0.3-2.1,0.3-1.9c-0.5,0.8-1.7,1.9-2.2,3.4c-0.4,1.1-0.9,1.7-1.2,3l-0.1,0.1c0-0.4,0.1-1.6,0-1.4c-1.3,2.6-2.4,5.3-3.3,8
+		c-1.5,4.8-3.2,11.4-3.5,20c-0.1,0.6,0,1.4-0.1,2c-3.5,4-5.9,7.4-6.8,9.1c-4.5,7-9.5,17.8-14.3,35c2.1-4.7,4.7-9.2,7.7-13.4
+		c-4,9.1-7.9,23.5-8.7,45.5c1-4.6,2.2-9.1,3.7-13.5c-0.7,14.7,1,33,10.3,53.6c5.5,12.1,18.2,36.7,49.3,55.9l0,0
+		c0,0,10.6,7.9,28.7,13.8c1.3,0.5,2.7,1,4.1,1.4c-0.4-0.2-0.9-0.4-1.3-0.5c12.1,3.6,24.6,5.5,37.3,5.5c47,0,60.9-18.9,60.9-18.9
+		l-0.1,0.1c0.7-0.6,1.3-1.3,1.9-1.9c-7.4,7-24.4,7.5-30.7,7c10.8-3.2,17.9-5.9,31.7-11.1c1.6-0.6,3.3-1.3,5-2.1l0.5-0.3
+		c0.3-0.2,0.7-0.3,1-0.5c6.7-3.2,13.1-7.1,18.9-11.8c13.9-11.1,16.9-21.9,18.5-29c-0.2,0.7-0.9,2.3-1.4,3.3
+		c-3.6,7.6-11.5,12.4-20.1,16.4c4.1-5.4,7.9-11,11.4-16.8C232.5,195.9,233.3,191.5,235.5,188.6z"/>
+		<path
+			fill="url(#SVGID_7_)"
+			d="M218.6,215.1c5.7-6.2,10.7-13.4,14.6-21.5c9.9-20.8,25.2-55.5,13.2-91.6
+		c-9.5-28.6-22.6-44.2-39.2-59.5c-27-24.8-34.5-35.9-34.5-42.5c0,0-31.2,34.7-17.7,71s41.2,34.9,59.5,72.7
+		c21.6,44.5-17.4,93.1-49.7,106.7c2-0.4,71.7-16.2,75.4-56.1C240,195,238.4,206.1,218.6,215.1z"/>
+		<path fill="url(#SVGID_8_)" d="M128.2,85.8c0.1-2.4-1.1-3.9-20.6-5.8c-8-0.7-11.1-8.1-12-11.3c-2.8,7.4-4,15.2-3.4,24.6
+		c0.4,6.2,4.6,12.8,6.5,16.6c0,0,0.4-0.6,0.6-0.8c3.7-3.9,19.3-9.8,20.8-10.6C121.8,97.5,128,93,128.2,85.8z"/>
+		<path
+			fill="url(#SVGID_9_)"
+			d="M42.5,42c-0.3-0.5-0.4,1-0.6,0.5c-1.6-3.7-2.6-9.7-2.3-14c0,0-3.3,1.5-6,7.8
+		c-0.5,1.1-0.8,1.8-1.2,2.4c-0.2,0.2,0.3-2.1,0.3-1.9c-0.5,0.8-1.7,1.9-2.2,3.3c-0.4,1.1-0.9,1.8-1.2,3.2c-0.1,0.4,0.1-1.7,0-1.4
+		c-6.4,12.3-7.6,30.9-6.9,30.1C36,57.5,51.5,54.1,51.5,54.1C49.6,52.9,46,49.3,42.5,42L42.5,42z"/>
+		<path fill="url(#SVGID_10_)" d="M93.9,193.4c-18.7-8-40-19.3-39.2-44.9c1.1-33.7,31.5-27.1,31.5-27.1c-1.1,0.3-4.2,2.5-5.3,4.8
+		c-1.1,2.9-3.2,9.5,3.1,16.4c10,10.8-20.5,25.6,26.5,53.6C111.7,196.8,99.5,195.8,93.9,193.4L93.9,193.4z"/>
+		<path
+			fill="url(#SVGID_11_)"
+			d="M87.3,176.6c13.3,4.6,28.7,3.8,38-1.3c6.2-3.5,14.2-9,19-7.6c-4.2-1.7-7.4-2.5-11.3-2.6
+		c-0.7,0-1.4,0-2.1-0.1c-1.4,0-2.8,0.1-4.2,0.2c-2.4,0.2-5,1.7-7.4,1.5c-0.1,0,2.3-1,2.1-1c-1.3,0.3-2.7,0.3-4.1,0.5
+		c-0.9,0.1-1.7,0.2-2.7,0.3c-27.7,2.3-51-15-51-15C61.6,158.1,72.5,171.4,87.3,176.6L87.3,176.6z"/>
+		<path
+			fill="url(#SVGID_12_)"
+			d="M218.5,215.3c28-27.5,42.1-60.8,36.1-98.3c0,0,2.4,19.2-6.7,38.8c4.4-19.2,4.9-43-6.7-67.7
+		c-15.4-32.9-40.8-50.3-50.5-57.5c-14.7-11-20.8-22.1-20.9-24.4c-4.4,9-17.7,39.8-1.4,66.3c15.2,24.9,39.2,32.2,55.9,55
+		C255.3,169.6,218.5,215.3,218.5,215.3z"/>
+		<path fill="url(#SVGID_13_)" d="M214.5,143.8c-9.8-20.2-22-29-33.5-38.5c1.3,1.9,1.7,2.5,2.4,3.8c10.2,10.8,25.1,37.2,14.3,70.4
+		c-20.5,62.4-102.3,33-110.9,24.8c3.5,36.1,63.9,53.4,103.3,30C212.4,212.9,230.5,176.9,214.5,143.8z"/>
+	</g>
+</svg>

public/library/framer.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="384px" viewBox="0 0 256 384" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Framer</title>
+    <g>
+        <path d="M0,0 L256,0 L256,128 L128,128 L0,0 Z M0,128 L128,128 L256,256 L128,256 L128,384 L0,256 L0,128 Z" fill="#000000"></path>
+    </g>
+</svg>

public/library/headlessui.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Headless UI</title>
+    <defs>
+        <linearGradient x1="35.8706002%" y1="7.22395026%" x2="60.3143692%" y2="115.987925%" id="linearGradient-1">
+            <stop stop-color="#66E3FF" offset="0%"></stop>
+            <stop stop-color="#7064F9" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="39.1716101%" y1="-0.000258114803%" x2="55.0500969%" y2="99.1811839%" id="linearGradient-2">
+            <stop stop-color="#66E3FF" offset="0%"></stop>
+            <stop stop-color="#7064F9" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+        <path d="M50.6986759,159.08871 L206.923729,106.936393 C203.80243,87.4132795 201.577503,74.3711999 199.00043,64.4176124 C196.223274,53.7119051 194.022357,50.8474482 193.157997,49.8552901 C190.14581,46.4084468 186.395385,43.6845493 182.185428,41.8860191 C180.968922,41.3659363 177.559502,40.1577436 166.53091,40.8218494 C154.86205,41.5259618 139.543672,43.9103419 115.28557,47.7509546 C91.0354724,51.591567 75.7250972,54.0639613 64.4163882,56.9924283 C53.7159324,59.7688711 50.8427359,61.9772231 49.8503228,62.8413611 C46.4088895,65.857842 43.6877564,69.6024394 41.8870066,73.8111103 C41.3667899,75.0273045 40.1582869,78.4358481 40.8225634,89.4696076 C41.5268568,101.135468 43.9118497,116.457912 47.7534494,140.709779 C48.8258961,147.510864 49.7942992,153.591833 50.6986759,159.08871 L50.6986759,159.08871 Z" id="Path" fill="url(#linearGradient-1)"></path>
+        <path d="M7.62473955,147.062792 C0.197646837,100.14331 -3.52390284,76.6835685 4.52744981,57.8485649 C8.72454124,48.0252484 15.0819292,39.2737796 23.1271949,32.2444815 C38.549617,18.778334 62.0073849,15.065742 108.922921,7.63255653 C155.854464,0.191369851 179.312232,-3.52122222 198.16008,4.52806145 C207.980567,8.72542915 216.728782,15.0811604 223.754738,23.1230269 C237.23235,38.5494871 240.945896,62.0092284 248.372989,108.936712 C255.808085,155.856195 259.521632,179.323937 251.470279,198.15094 C247.275985,207.973747 240.921308,216.72525 232.878537,223.755023 C217.456115,237.229172 193.990344,240.941764 147.066804,248.374949 C100.151269,255.808135 76.6854971,259.520727 57.8536554,251.471443 C48.0333048,247.273835 39.2851393,240.91814 32.2589976,232.876477 C18.7813853,217.450017 15.0678389,193.990276 7.63274287,147.062792 L7.62473955,147.062792 Z M90.3872026,230.388081 C102.952435,229.62796 119.135174,227.091555 143.089148,223.29895 C167.051126,219.506345 183.209855,216.913932 195.406934,213.753428 C207.211849,210.688939 212.654116,207.704463 216.167578,204.631973 C221.336653,200.112766 225.420781,194.487252 228.116554,188.173349 C229.957321,183.884665 231.117804,177.787692 230.381497,165.60975 C229.621181,153.047747 227.084124,136.861165 223.290544,112.905345 C219.496965,88.9495246 216.911889,72.7789457 213.750572,60.5930026 C210.685296,48.7831189 207.692049,43.3422514 204.626773,39.8296913 C200.109733,34.6598101 194.485483,30.5739786 188.171921,27.8757849 C183.882135,26.0354914 177.783595,24.8753064 165.602523,25.6114238 C153.037291,26.371545 136.862555,28.9079495 112.900577,32.7005543 C88.9466028,36.5011605 72.7798707,39.0855725 60.590795,42.2460764 C48.7778761,45.3105653 43.3436133,48.3030424 39.8301503,51.3675312 C34.6583762,55.8860779 30.5715011,61.5116077 27.8731712,67.8261559 C26.040408,72.1148399 24.8799248,78.2118123 25.6162313,90.3897542 C26.376548,102.959759 28.9056012,119.138339 32.707184,143.094159 C36.5007639,167.04998 39.0858402,183.220558 42.2471565,195.406502 C45.3124331,207.216385 48.2976761,212.657253 51.3709559,216.169813 C55.8881822,221.33949 61.5123817,225.425286 67.8258079,228.12372 C72.1155942,229.964013 78.2061302,231.124198 90.3952059,230.388081 L90.3872026,230.388081 Z" id="Shape" fill="url(#linearGradient-2)"></path>
+    </g>
+</svg>

public/library/kotlin.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Kotlin</title>
+    <defs>
+        <linearGradient x1="99.9909179%" y1="-0.0107311249%" x2="0.00995772309%" y2="100.010253%" id="linearGradient-1">
+            <stop stop-color="#E44857" offset="0.3435144%"></stop>
+            <stop stop-color="#C711E1" offset="46.89%"></stop>
+            <stop stop-color="#7F52FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+        <polygon fill="url(#linearGradient-1)" fill-rule="nonzero" points="256 256 0 256 0 0 256 0 128 127.948759"></polygon>
+    </g>
+</svg>

public/library/linkedin.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055" fill="#0A66C2"></path>
+    </g>
+</svg>

public/library/netflix.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <radialGradient cx="48.3397178%" cy="49.4186213%" fx="48.3397178%" fy="49.4186213%" r="70.4380887%" gradientTransform="translate(0.483397,0.494186),scale(1.000000,0.550875),translate(-0.483397,-0.494186)" id="radialGradient-1">
+            <stop stop-color="#000000" offset="0%"></stop>
+            <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+		<g>
+				<polygon fill="#000000" fill-rule="nonzero" points="1.80114185e-07 1.13710799e-06 255.904254 1.13710799e-06 255.904254 255.904255 1.80114171e-07 255.904255"></polygon>
+				<path d="M141.676338,41.2746569 L141.608906,79.6360396 L141.541118,117.997421 L138.385008,109.0921 C138.383912,109.089031 138.380021,109.077687 138.378943,109.074618 L134.30055,194.477217 C138.310388,205.800934 140.458766,211.845937 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.736852,214.631624 175.788229,175.572658 175.756672,127.918505 L175.69923,41.2746569 L158.687784,41.2746569 L141.676338,41.2746569 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
+				<path d="M80.1382878,41.1604861 L80.1382878,127.892104 C80.1382878,175.594555 80.1849645,214.670743 80.242112,214.727902 C80.2992558,214.785042 83.2534257,214.50614 86.8069318,214.108168 C90.3604343,213.710178 95.2716247,213.215292 97.7205879,213.008561 C101.476527,212.691477 112.690651,211.970454 113.989212,211.962472 C114.366954,211.960097 114.391182,210.011234 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C117.636362,147.356673 117.767894,147.727198 118.176424,148.883116 L122.253748,63.5015679 C121.389836,61.0590106 121.842711,62.3412234 120.852658,59.5419824 C117.521259,50.1228923 114.694332,42.1337874 114.570412,41.7884254 L114.344924,41.1604861 L97.2417849,41.1604861 L80.1382878,41.1604861 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
+				<path d="M80.1382787,41.1604861 L80.1382878,89.8454048 L114.434478,180.820963 C114.438058,178.736175 114.44215,177.609688 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.70735,214.658045 175.749683,195.506553 175.760954,168.489092 L141.625319,70.3489604 L141.608897,79.6360396 L141.541109,117.997421 L138.384999,109.0921 C135.301137,100.390624 133.24206,94.5714036 120.852649,59.5419824 C117.52125,50.1228923 114.694323,42.1337874 114.570403,41.7884254 L114.344915,41.1604861 L97.2417758,41.1604861 L80.1382787,41.1604861 Z" fill="url(#radialGradient-1)"></path>
+				<path d="M80.1390021,41.160477 L114.503693,138.537458 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.971627,214.683611 175.530793,214.799226 175.639648,214.717197 L141.541118,117.979583 L141.541118,117.997412 L138.385008,109.092091 C135.301146,100.390615 133.242069,94.5713945 120.852658,59.5419732 C117.521259,50.1228832 114.694332,42.1337783 114.570412,41.7884163 L114.344924,41.160477 L97.2417849,41.160477 L80.1390021,41.160477 Z" fill="#E50914"></path>
+				<path d="M141.676338,41.2746569 L141.608906,79.6360396 L141.541118,117.997421 L138.385008,109.0921 C138.383912,109.089031 138.380021,109.077687 138.378943,109.074618 L134.30055,194.477217 C138.310388,205.800934 140.458766,211.845937 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.736852,214.631624 175.788229,175.572658 175.756672,127.918505 L175.69923,41.2746569 L158.687784,41.2746569 L141.676338,41.2746569 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
+				<path d="M80.1382878,41.1604861 L80.1382878,127.892104 C80.1382878,175.594555 80.1849645,214.670743 80.242112,214.727902 C80.2992558,214.785042 83.2534257,214.50614 86.8069318,214.108168 C90.3604343,213.710178 95.2716247,213.215292 97.7205879,213.008561 C101.476527,212.691477 112.690651,211.970454 113.989212,211.962472 C114.366954,211.960097 114.391182,210.011234 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C117.636362,147.356673 117.767894,147.727198 118.176424,148.883116 L122.253748,63.5015679 C121.389836,61.0590106 121.842711,62.3412234 120.852658,59.5419824 C117.521259,50.1228923 114.694332,42.1337874 114.570412,41.7884254 L114.344924,41.1604861 L97.2417849,41.1604861 L80.1382878,41.1604861 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
+				<path d="M80.1382787,41.1604861 L80.1382878,89.8454048 L114.434478,180.820963 C114.438058,178.736175 114.44215,177.609688 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.70735,214.658045 175.749683,195.506553 175.760954,168.489092 L141.625319,70.3489604 L141.608897,79.6360396 L141.541109,117.997421 L138.384999,109.0921 C135.301137,100.390624 133.24206,94.5714036 120.852649,59.5419824 C117.52125,50.1228923 114.694323,42.1337874 114.570403,41.7884254 L114.344915,41.1604861 L97.2417758,41.1604861 L80.1382787,41.1604861 Z" fill="url(#radialGradient-1)"></path>
+				<path d="M80.1390021,41.160477 L114.503693,138.537458 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.971627,214.683611 175.530793,214.799226 175.639648,214.717197 L141.541118,117.979583 L141.541118,117.997412 L138.385008,109.092091 C135.301146,100.390615 133.242069,94.5713945 120.852658,59.5419732 C117.521259,50.1228832 114.694332,42.1337783 114.570412,41.7884163 L114.344924,41.160477 L97.2417849,41.160477 L80.1390021,41.160477 Z" fill="#E50914"></path>
+		</g>
+</svg>

public/library/remix.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="297px" viewBox="0 0 256 297" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Shape</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M141.674538,-7.10542736e-15 C218.04743,-7.10542736e-15 256,36.3493031 256,94.4136694 C256,137.843796 229.292875,166.16709 193.214546,170.888177 C223.670152,177.025429 241.473826,194.491998 244.754554,228.952544 L245.229325,235.289856 L245.643706,241.214203 L246.00181,246.756109 L246.250531,250.934795 L246.517683,255.865245 L246.656217,258.679019 L246.853693,263.148984 L247.012965,267.370833 L247.091895,269.797544 L247.198581,273.685906 L247.290626,278.131883 L247.324005,280.280236 L247.384197,286.505871 L247.403543,293.002292 L247.40462,296.886512 L168.646185,296.886512 L168.650135,295.266478 L168.650135,295.266478 L168.678181,292.120279 L168.678181,292.120279 L168.725186,289.055223 L168.861417,281.631321 L168.895871,279.142491 L168.922852,275.239899 L168.922852,275.239899 L168.919162,272.744266 L168.896218,270.127045 L168.864335,268.072886 L168.799537,265.197081 L168.706158,262.147348 L168.580806,258.904651 L168.42009,255.449957 L168.325411,253.637163 L168.164297,250.804473 L167.978998,247.828446 L167.691838,243.623566 L167.444542,240.281862 C167.373519,239.25114 167.291291,238.24473 167.19786,237.262104 L166.996058,235.328408 C164.395177,212.50087 155.340815,203.170989 139.832974,200.059114 L138.525715,199.814028 C137.64425,199.660026 136.742867,199.52459 135.821566,199.406474 L134.424675,199.242133 C134.189371,199.216855 133.952821,199.192621 133.715026,199.169411 L132.27332,199.042283 L132.27332,199.042283 L130.801736,198.938792 L130.801736,198.938792 L129.300276,198.858003 L129.300276,198.858003 L127.785563,198.799503 L126.241612,198.761396 L124.668422,198.742777 L124.668422,198.742777 L0,198.740492 L0,136.900224 L127.619345,136.900224 C129.706029,136.900224 131.728173,136.860653 133.685777,136.779928 L135.621869,136.685425 L135.621869,136.685425 L137.514935,136.563134 L137.514935,136.563134 L139.364974,136.412701 C139.669729,136.385264 139.97269,136.35664 140.273859,136.326822 L142.05936,136.133518 C143.235352,135.995014 144.382659,135.837162 145.501284,135.659493 L147.157707,135.378069 C167.866574,131.62361 178.22062,120.630459 178.22062,99.1783057 C178.22062,75.1035054 161.354066,60.5128152 127.619345,60.5128152 L0,60.5128152 L0,-7.10542736e-15 L141.674538,-7.10542736e-15 Z M83.2762921,250.785352 C93.6094556,250.785352 97.9327877,256.522818 99.4729615,262.01452 L99.6761617,262.804225 L99.6761617,262.804225 L99.8429155,263.58653 L99.9515227,264.204367 L99.9979397,264.509915 L100.075689,265.112992 L100.134243,265.703672 L100.156667,265.993728 L100.188494,266.561991 L100.198173,266.839685 L100.205751,267.380932 L100.205751,296.886512 L0,296.886512 L0,250.785352 L83.2762921,250.785352 Z" fill="#121212" fill-rule="nonzero"></path>
+    </g>
+</svg>

public/library/storybook.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="319px" viewBox="0 0 256 319" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <path d="M9.87245893,293.324145 L0.0114611411,30.5732167 C-0.314208957,21.8955842 6.33948896,14.5413918 15.0063196,13.9997149 L238.494389,0.0317105427 C247.316188,-0.519651867 254.914637,6.18486163 255.466,15.0066607 C255.486773,15.339032 255.497167,15.6719708 255.497167,16.0049907 L255.497167,302.318596 C255.497167,311.157608 248.331732,318.323043 239.492719,318.323043 C239.253266,318.323043 239.013844,318.317669 238.774632,318.306926 L25.1475605,308.712253 C16.8276309,308.338578 10.1847994,301.646603 9.87245893,293.324145 L9.87245893,293.324145 Z" id="path-1"></path>
+    </defs>
+		<g>
+				<mask id="mask-2" fill="white">
+						<use xlink:href="#path-1"></use>
+				</mask>
+				<use fill="#FF4785" fill-rule="nonzero" xlink:href="#path-1"></use>
+				<path d="M188.665358,39.126973 L190.191903,2.41148534 L220.883535,0 L222.205755,37.8634126 C222.251771,39.1811466 221.22084,40.2866846 219.903106,40.3327009 C219.338869,40.3524045 218.785907,40.1715096 218.342409,39.8221376 L206.506729,30.4984116 L192.493574,41.1282444 C191.443077,41.9251106 189.945493,41.7195021 189.148627,40.6690048 C188.813185,40.2267976 188.6423,39.6815326 188.665358,39.126973 Z M149.413703,119.980309 C149.413703,126.206975 191.355678,123.222696 196.986019,118.848893 C196.986019,76.4467826 174.234041,54.1651411 132.57133,54.1651411 C90.9086182,54.1651411 67.5656805,76.7934542 67.5656805,110.735941 C67.5656805,169.85244 147.345341,170.983856 147.345341,203.229219 C147.345341,212.280549 142.913138,217.654777 133.162291,217.654777 C120.456641,217.654777 115.433477,211.165914 116.024438,189.103298 C116.024438,184.317101 67.5656805,182.824962 66.0882793,189.103298 C62.3262146,242.56887 95.6363019,257.990394 133.753251,257.990394 C170.688279,257.990394 199.645341,238.303123 199.645341,202.663511 C199.645341,139.304202 118.683759,141.001326 118.683759,109.604526 C118.683759,96.8760922 128.139127,95.178968 133.753251,95.178968 C139.662855,95.178968 150.300143,96.2205679 149.413703,119.980309 Z" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)"></path>
+		</g>
+</svg>

public/library/telegram.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+		<g>
+				<path d="M128,0 C57.307,0 0,57.307 0,128 L0,128 C0,198.693 57.307,256 128,256 L128,256 C198.693,256 256,198.693 256,128 L256,128 C256,57.307 198.693,0 128,0 L128,0 Z" fill="#40B3E0"></path>
+				<path d="M190.2826,73.6308 L167.4206,188.8978 C167.4206,188.8978 164.2236,196.8918 155.4306,193.0548 L102.6726,152.6068 L83.4886,143.3348 L51.1946,132.4628 C51.1946,132.4628 46.2386,130.7048 45.7586,126.8678 C45.2796,123.0308 51.3546,120.9528 51.3546,120.9528 L179.7306,70.5928 C179.7306,70.5928 190.2826,65.9568 190.2826,73.6308" fill="#FFFFFF"></path>
+				<path d="M98.6178,187.6035 C98.6178,187.6035 97.0778,187.4595 95.1588,181.3835 C93.2408,175.3085 83.4888,143.3345 83.4888,143.3345 L161.0258,94.0945 C161.0258,94.0945 165.5028,91.3765 165.3428,94.0945 C165.3428,94.0945 166.1418,94.5735 163.7438,96.8115 C161.3458,99.0505 102.8328,151.6475 102.8328,151.6475" fill="#D2E5F1"></path>
+				<path d="M122.9015,168.1154 L102.0335,187.1414 C102.0335,187.1414 100.4025,188.3794 98.6175,187.6034 L102.6135,152.2624" fill="#B5CFE4"></path>
+		</g>
+</svg>

public/library/tiktok.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="290px" viewBox="0 0 256 290" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>TikTok</title>
+    <g>
+				<path d="M189.720224,104.421475 C208.398189,117.766281 231.279538,125.618095 255.992548,125.618095 L255.992548,78.0872726 C251.315611,78.0882654 246.650588,77.6008156 242.074913,76.6318726 L242.074913,114.045382 C217.363889,114.045382 194.485518,106.193568 175.80259,92.8497541 L175.80259,189.846306 C175.80259,238.368905 136.447224,277.701437 87.902784,277.701437 C69.7897057,277.701437 52.9543216,272.228299 38.9691786,262.841664 C54.9309256,279.153859 77.1908018,289.273158 101.81744,289.273158 C150.364858,289.273158 189.72221,249.940626 189.72221,201.416041 L189.72221,104.421475 L189.720224,104.421475 Z M206.889179,56.4687254 C197.343701,46.0456391 191.076347,32.5757434 189.720224,17.6842019 L189.720224,11.5707278 L176.531282,11.5707278 C179.851103,30.497877 191.174632,46.6681056 206.889179,56.4687254 L206.889179,56.4687254 Z M69.6735517,225.606854 C64.3403943,218.617757 61.4583846,210.068027 61.4712906,201.277053 C61.4712906,179.084685 79.472186,161.090739 101.680438,161.090739 C105.819294,161.089747 109.933331,161.723134 113.877603,162.974023 L113.877603,114.380938 C109.268175,113.749536 104.616057,113.481488 99.9659254,113.579773 L99.9659254,151.402303 C96.0186741,150.151413 91.9026521,149.516041 87.7628035,149.520012 C65.5545513,149.520012 47.5546487,167.511972 47.5546487,189.707318 C47.5546487,205.401018 56.552118,218.98806 69.6735517,225.606854 Z" fill="#FF004F"></path>
+				<path d="M175.80259,92.8487613 C194.485518,106.192575 217.363889,114.044389 242.074913,114.044389 L242.074913,76.6308799 C228.281375,73.6942679 216.070311,66.4897401 206.889179,56.4687254 C191.173639,46.6671128 179.851103,30.4968842 176.531282,11.5707278 L141.8876,11.5707278 L141.8876,201.414056 C141.809172,223.545865 123.839052,241.466346 101.678453,241.466346 C88.6195635,241.466346 77.0180599,235.24466 69.6705734,225.606854 C56.5501325,218.98806 47.5526631,205.400025 47.5526631,189.708311 C47.5526631,167.51495 65.5525657,149.521004 87.760818,149.521004 C92.0158278,149.521004 96.1169583,150.183182 99.9639399,151.403295 L99.9639399,113.580765 C52.272289,114.565593 13.9166419,153.513923 13.9166419,201.415048 C13.9166419,225.326893 23.4680767,247.004014 38.9701714,262.842657 C52.9553144,272.228299 69.7906985,277.70243 87.9037768,277.70243 C136.449209,277.70243 175.803582,238.367912 175.803582,189.846306 L175.803582,92.8487613 L175.80259,92.8487613 Z" fill="#000000"></path>
+				<path d="M242.074913,76.6308799 L242.074913,66.5145593 C229.636505,66.5334219 217.442318,63.0517795 206.889179,56.4677326 C216.231139,66.6902795 228.532545,73.7389425 242.074913,76.6308799 Z M176.531282,11.5707278 C176.214589,9.76190185 175.971361,7.9411627 175.80259,6.11347418 L175.80259,0 L127.968973,0 L127.968973,189.845313 C127.89253,211.974144 109.923403,229.894625 87.760818,229.894625 C81.2542071,229.894625 75.1109499,228.350869 69.6705734,225.607847 C77.0180599,235.24466 88.6195635,241.465353 101.678453,241.465353 C123.837066,241.465353 141.810164,223.546857 141.8876,201.415048 L141.8876,11.5707278 L176.531282,11.5707278 Z M99.9659254,113.580765 L99.9659254,102.811203 C95.9690357,102.265179 91.9393845,101.991175 87.9047695,101.99315 C39.3553659,101.99315 0,141.326686 0,189.845313 C0,220.263769 15.4673478,247.071522 38.9711641,262.840672 C23.4690694,247.003021 13.9176347,225.324907 13.9176347,201.414056 C13.9176347,153.513923 52.272289,114.565593 99.9659254,113.580765 Z" fill="#00F2EA"></path>
+		</g>
+</svg>

public/library/vitest.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="234px" viewBox="0 0 256 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>vitest</title>
+    <g>
+        <path d="M192.115018,70.8083821 L130.914358,159.296327 C130.265568,160.234541 129.327185,160.937354 128.241634,161.298075 C127.156084,161.658796 125.982639,161.655409 124.899291,161.292995 C123.815942,160.928886 122.881962,160.222686 122.23876,159.282779 C121.595728,158.341178 121.278531,157.216676 121.335772,156.08032 L123.78512,107.225806 L84.2429694,98.839802 C83.3978997,98.6607962 82.6105792,98.2768738 81.950612,97.7222438 C81.2906447,97.1677833 80.7783529,96.4595505 80.4592925,95.6603753 C80.1402321,94.8612002 80.0242256,93.9958081 80.121434,93.1407466 C80.2186424,92.2858544 80.5260175,91.4675424 81.0164627,90.7584629 L142.217801,2.27034881 C142.86676,1.33162707 143.805143,0.628982928 144.890693,0.268769843 C145.976413,-0.0914432423 147.149858,-0.0895803631 148.233376,0.27435848 C149.316725,0.638127971 150.250874,1.34398981 150.893906,2.28491313 C151.536938,3.2256671 151.853966,4.34999934 151.796556,5.48737173 L149.347208,54.3423934 L188.88885,62.7277204 C189.73392,62.9067262 190.52141,63.2906486 191.181885,63.8451092 C191.842361,64.3997391 192.353806,65.1079719 192.672189,65.9071471 C192.992265,66.7063222 193.107425,67.5717143 193.010894,68.4266064 C192.914363,69.281668 192.606141,70.09998 192.115018,70.8090595 L192.115018,70.8083821 Z" fill="#FCC72B"></path>
+        <path d="M128.024524,233.537148 C126.396707,233.538835 124.784639,233.220452 123.280787,232.597234 C121.776936,231.974016 120.410937,231.059512 119.261541,229.907914 L61.4337079,172.084145 C59.1203507,169.758934 57.8236174,166.610668 57.8278409,163.330307 C57.8322544,160.049946 59.1372859,156.903374 61.4570785,154.584936 C63.7767018,152.264805 66.9217498,150.959096 70.20228,150.954015 C73.4829795,150.950628 76.631584,152.246176 78.9576426,154.559533 L128.024524,203.620996 L234.917207,96.7333937 C237.247499,94.4406975 240.388991,93.1617463 243.657497,93.1750213 C246.927697,93.1883347 250.059027,94.4928582 252.368997,96.8043525 C254.680661,99.1160161 255.98637,102.247177 256,105.516191 C256.011773,108.785206 254.73316,111.927036 252.440126,114.257159 L136.785306,229.907914 C135.636079,231.061206 134.270419,231.974016 132.766907,232.597234 C131.263563,233.220452 129.651834,233.538835 128.024524,233.537148 Z" fill="#729B1B"></path>
+        <path d="M127.974735,233.537148 C129.602552,233.538835 131.21462,233.220452 132.718472,232.597234 C134.222323,231.974016 135.588152,231.059512 136.737718,229.907914 L194.565551,172.084145 C196.878908,169.758934 198.17615,166.610668 198.171084,163.330307 C198.167682,160.049946 196.861973,156.903374 194.541842,154.584936 C192.221711,152.264805 189.076832,150.959096 185.796471,150.954015 C182.51611,150.950628 179.367844,152.246176 177.040939,154.559533 L127.974735,203.620996 L21.0822215,96.7333937 C18.751929,94.4406975 15.6100986,93.1617463 12.3412538,93.1750213 C9.07223962,93.1883347 5.94090913,94.4928582 3.62943176,96.8043525 C1.31790358,99.1160161 0.013413991,102.247177 -1.20332295e-14,105.516191 C-0.0132082455,108.785206 1.26574296,111.927036 3.55837139,114.257159 L119.213783,229.907914 C120.36318,231.061206 121.72884,231.974016 123.232183,232.597234 C124.735696,233.220452 126.347425,233.538835 127.974735,233.537148 Z" fill-opacity="0.5" fill="#729B1B"></path>
+    </g>
+</svg>

public/library/whatsapp.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="259px" viewBox="0 0 256 259" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M67.6631045,221.823373 L71.8484512,223.916047 C89.2873956,234.379413 108.819013,239.262318 128.350631,239.262318 L128.350631,239.262318 C189.735716,239.262318 239.959876,189.038158 239.959876,127.653073 C239.959876,98.3556467 228.101393,69.7557778 207.17466,48.8290445 C186.247927,27.9023111 158.345616,16.0438289 128.350631,16.0438289 C66.9655467,16.0438289 16.7413867,66.2679889 17.4389445,128.350631 C17.4389445,149.277365 23.7169645,169.50654 34.1803311,186.945485 L36.9705622,191.130831 L25.8096378,232.28674 L67.6631045,221.823373 Z" fill="#00E676"></path>
+        <path d="M219.033142,37.66812 C195.316178,13.2535978 162.530962,0 129.048189,0 C57.8972956,0 0.697557778,57.8972956 1.39511556,128.350631 C1.39511556,150.67248 7.67313556,172.296771 18.1365022,191.828389 L0,258.096378 L67.6631045,240.657433 C86.4971645,251.1208 107.423898,256.003705 128.350631,256.003705 L128.350631,256.003705 C198.803967,256.003705 256.003705,198.106409 256.003705,127.653073 C256.003705,93.4727423 242.750107,61.3850845 219.033142,37.66812 Z M129.048189,234.379413 L129.048189,234.379413 C110.214129,234.379413 91.380069,229.496509 75.3362401,219.7307 L71.1508934,217.638027 L30.6925422,228.101393 L41.1559089,188.3406 L38.3656778,184.155253 C7.67313556,134.628651 22.3218489,69.05822 72.5460089,38.3656778 C122.770169,7.67313556 187.643042,22.3218489 218.335585,72.5460089 C249.028127,122.770169 234.379413,187.643042 184.155253,218.335585 C168.111425,228.798951 148.579807,234.379413 129.048189,234.379413 Z M190.433273,156.9505 L182.760138,153.462711 C182.760138,153.462711 171.599213,148.579807 164.623636,145.092018 C163.926078,145.092018 163.22852,144.39446 162.530962,144.39446 C160.438289,144.39446 159.043173,145.092018 157.648058,145.789576 L157.648058,145.789576 C157.648058,145.789576 156.9505,146.487133 147.184691,157.648058 C146.487133,159.043173 145.092018,159.740731 143.696902,159.740731 L142.999345,159.740731 C142.301787,159.740731 140.906671,159.043173 140.209113,158.345616 L136.721325,156.9505 L136.721325,156.9505 C129.048189,153.462711 122.072611,149.277365 116.492149,143.696902 C115.097033,142.301787 113.00436,140.906671 111.609245,139.511556 C106.72634,134.628651 101.843436,129.048189 98.3556467,122.770169 L97.658089,121.375053 C96.9605312,120.677496 96.9605312,119.979938 96.2629734,118.584822 C96.2629734,117.189707 96.2629734,115.794591 96.9605312,115.097033 C96.9605312,115.097033 99.7507623,111.609245 101.843436,109.516571 C103.238551,108.121456 103.936109,106.028782 105.331225,104.633667 C106.72634,102.540993 107.423898,99.7507623 106.72634,97.658089 C106.028782,94.1703001 97.658089,75.3362401 95.5654156,71.1508934 C94.1703001,69.05822 92.7751845,68.3606623 90.6825112,67.6631045 L88.5898378,67.6631045 C87.1947223,67.6631045 85.1020489,67.6631045 83.0093756,67.6631045 C81.6142601,67.6631045 80.2191445,68.3606623 78.8240289,68.3606623 L78.1264712,69.05822 C76.7313556,69.7557778 75.3362401,71.1508934 73.9411245,71.8484512 C72.5460089,73.2435667 71.8484512,74.6386823 70.4533356,76.0337978 C65.5704312,82.3118178 62.7802,89.9849534 62.7802,97.658089 L62.7802,97.658089 C62.7802,103.238551 64.1753156,108.819013 66.2679889,113.701918 L66.9655467,115.794591 C73.2435667,129.048189 81.6142601,140.906671 92.7751845,151.370038 L95.5654156,154.160269 C97.658089,156.252942 99.7507623,157.648058 101.145878,159.740731 C115.794591,172.296771 132.535978,181.365022 151.370038,186.247927 C153.462711,186.945485 156.252942,186.945485 158.345616,187.643042 L158.345616,187.643042 C160.438289,187.643042 163.22852,187.643042 165.321193,187.643042 C168.808982,187.643042 172.994329,186.247927 175.78456,184.852811 C177.877233,183.457696 179.272349,183.457696 180.667465,182.06258 L182.06258,180.667465 C183.457696,179.272349 184.852811,178.574791 186.247927,177.179676 C187.643042,175.78456 189.038158,174.389445 189.735716,172.994329 C191.130831,170.204098 191.828389,166.716309 192.525947,163.22852 C192.525947,161.833405 192.525947,159.740731 192.525947,158.345616 C192.525947,158.345616 191.828389,157.648058 190.433273,156.9505 Z" fill="#FFFFFF"></path>
+    </g>
+</svg>

public/manifest.json

@@ -0,0 +1,38 @@
+{
+  "theme_color": "#4343E5",
+  "background_color": "#050505",
+  "display": "minimal-ui",
+  "scope": "/",
+  "start_url": "/",
+  "name": "SVGL",
+  "short_name": "SVGL",
+  "description": "Beautiful SVG vector logos",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

src/_tests_/categories.test.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { test, expect, describe } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Categories from "@/layout/header/categories";
+
+describe("Categories", () => {
+  test("renders learn react link", () => {
+    render(<Categories />);
+    const showText = screen.getByText(/software/i);
+    expect(showText).toBeInTheDocument();
+  });
+});

src/animations/show.tsx

@@ -1,7 +1,12 @@
 import React, { FC } from "react";
 import { motion } from "framer-motion";
 
-const Show = ({ children, delay }) => {
+type ShowProps = {
+  children: React.ReactNode;
+  delay?: number;
+};
+
+const Show = ({ children, delay }: ShowProps) => {
   return (
     <motion.div
       initial={{ y: 10, opacity: 0 }}

src/animations/tap.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+type TapAnimation = {
+  children: React.ReactNode;
+};
+
+const Tap = ({ children } : TapAnimation) => {
+  return (
+    <motion.div whileTap={{ scale: 0.97 }}>
+      {children}
+    </motion.div>
+  );
+};
+
+export default Tap;

src/common/grid.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { LayoutProps } from "@/interfaces/components";
+import { SimpleGrid } from "@chakra-ui/react";
+
+const Grid = (props: LayoutProps) => {
+  return (
+    <SimpleGrid minChildWidth="160px" spacing="30px" >
+      {props.children}
+    </SimpleGrid>
+  );
+};
+
+export default Grid;

src/common/iconBtn.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { CustomIconBtnProps } from "@/interfaces/components";
+import { IconButton } from "@chakra-ui/react";
+
+const CustomIconBtn = (props: CustomIconBtnProps) => {
+  return (
+    <IconButton
+      variant="ghost"
+      aria-label={props.title}
+      icon={props.icon}
+      onClick={props.onClick}
+    />
+  );
+};
+
+export default CustomIconBtn;

src/common/link.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "@chakra-ui/react";
+import NextLink from "next/link";
+import { CustomLinkProps } from "@/interfaces/components";
+
+const CustomLink = ({ href, children, external }: CustomLinkProps) => {
+  return (
+    <NextLink href={href} passHref>
+      <Link
+        isExternal={external}
+        _hover={{ textDecoration: "none" }}
+        _focus={{ border: "none" }}
+      >
+        {children}
+      </Link>
+    </NextLink>
+  );
+};
+
+export default CustomLink;

src/components/error.tsx

@@ -0,0 +1,47 @@
+import { ErrorProps } from "@/interfaces/components";
+import {
+  Button,
+  Center,
+  Heading,
+  HStack,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { ArrowClockwise, ArrowSquareOut, Warning } from "phosphor-react";
+import { useRouter } from "next/router";
+import CustomLink from "@/common/link";
+
+const Error = (props: ErrorProps) => {
+  const router = useRouter();
+
+  const handleRefresh = () => {
+    router.reload();
+  };
+
+  return (
+    <Center>
+      <VStack>
+        <Warning size={90} />
+        <Heading fontSize="3xl">{props.title}</Heading>
+        <Text>{props.description}</Text>
+        <HStack>
+          <Button
+            variant="ghost"
+            borderWidth="1px"
+            leftIcon={<ArrowClockwise />}
+            onClick={handleRefresh}
+          >
+            Refresh
+          </Button>
+          <CustomLink href="https://github.com/pheralb/svgl/issues/new" external={true}>
+            <Button variant="ghost" rightIcon={<ArrowSquareOut />}>
+              Create issue
+            </Button>
+          </CustomLink>
+        </HStack>
+      </VStack>
+    </Center>
+  );
+};
+
+export default Error;

src/components/loading.tsx

@@ -0,0 +1,16 @@
+import { LoadingProps } from "@/interfaces/components";
+import { Center, Spinner, Text, VStack } from "@chakra-ui/react";
+import { LeapFrog } from "@uiball/loaders";
+
+const Loading = (props: LoadingProps) => {
+  return (
+    <Center>
+      <VStack spacing={3} mt="3">
+        <LeapFrog size={32} speed={2.5} color="#4343E5" />
+        <Text>{props.text}</Text>
+      </VStack>
+    </Center>
+  );
+};
+
+export default Loading;

src/components/search.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { Input, Text, Image, HStack, Box, Center } from "@chakra-ui/react";
+import useDebounce from "@/hooks/useDebounce";
+import { SVGCardProps } from "@/interfaces/components";
+import CustomLink from "@/common/link";
+import { getSvgByQuery } from "@/services";
+import CustomIconBtn from "@/common/iconBtn";
+import { Trash } from "phosphor-react";
+import Tap from "@/animations/tap";
+
+const Search = () => {
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState<SVGCardProps[]>([]);
+  const debouncedSearch = useDebounce(search, 500);
+
+  useEffect(() => {
+    if (debouncedSearch) {
+      fetch(getSvgByQuery + debouncedSearch).then((res) => {
+        if (res.ok) {
+          res.json().then((data) => {
+            setResults(data);
+          });
+        }
+      });
+    }
+  }, [debouncedSearch]);
+
+  const handleClear = () => {
+    setSearch("");
+    setResults([]);
+  };
+
+  return (
+    <>
+      <Input
+        width="full"
+        variant="flushed"
+        size="lg"
+        placeholder="Search svgs..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+      />
+      {results && results.length > 0 && (
+        <>
+          <HStack spacing={4} mt={4} overflowX="auto" overflowY="hidden">
+            {results.map((item: SVGCardProps) => (
+              <Tap key={item.title}>
+                <CustomLink href={`/svg/${item.id}`}>
+                  <Box
+                    mb="2"
+                    p="3"
+                    shadow="sm"
+                    borderWidth="1px"
+                    borderRadius="5px"
+                    width="100%"
+                  >
+                    <Center>
+                      <Image
+                        width="25px"
+                        mb="2"
+                        src={item.slug}
+                        alt={item.title}
+                      />
+                    </Center>
+                    <Text>{item.title}</Text>
+                  </Box>
+                </CustomLink>
+              </Tap>
+            ))}
+          </HStack>
+          <Box p="3">
+            <CustomIconBtn
+              title="clear"
+              icon={<Trash size={16} />}
+              onClick={handleClear}
+            />
+          </Box>
+        </>
+      )}
+    </>
+  );
+};
+
+export default Search;

src/components/svgCard.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { SVGCardProps } from "@/interfaces/components";
+import { Box, Center, Image, Text, useColorModeValue } from "@chakra-ui/react";
+import Tap from "@/animations/tap";
+import CustomLink from "@/common/link";
+
+const SVGCard = (props: SVGCardProps) => {
+  const bg = useColorModeValue("bg.light", "bg.dark");
+  return (
+    <Tap>
+      <CustomLink href={`/svg/${props.id}`}>
+        <Box
+          bg={bg}
+          p={4}
+          cursor="pointer"
+          borderRadius="10px"
+          borderWidth="1px"
+          mb="2"
+          _hover={{
+            shadow: "md",
+          }}
+          transition="all 0.2s"
+        >
+          <Center>
+            <Image boxSize="50px" src={props.svg} alt={props.title} />
+          </Center>
+          <Text mt="2" fontWeight="light" textAlign="center">
+            {props.title}
+          </Text>
+        </Box>
+      </CustomLink>
+    </Tap>
+  );
+};
+
+export default SVGCard;

src/components/svgInfo.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  Button,
+  Flex,
+  Heading,
+  HStack,
+  Icon,
+  Image,
+  Link,
+} from "@chakra-ui/react";
+import { ArrowSquareOut, Copy, DownloadSimple } from "phosphor-react";
+import confetti from "canvas-confetti";
+import download from "downloadjs";
+import { toast } from "react-hot-toast";
+import { ToastTheme } from "@/theme/toast";
+import { SVGCardProps } from "@/interfaces/components";
+
+// Download SVG =>
+const downloadSvg = (url?: string) => {
+  confetti({
+    particleCount: 200,
+    startVelocity: 30,
+    spread: 300,
+    gravity: 1.2,
+    origin: { y: 0 },
+  });
+  download(url || "");
+};
+
+// Copy to clipboard =>
+const copyToClipboard = (url?: string) => {
+  fetch(url || "").then((response) => {
+    response.text().then((content) => {
+      navigator.clipboard.writeText(content);
+      toast("Copied to clipboard", ToastTheme);
+    });
+  });
+};
+
+const SVGInfo = (props: SVGCardProps) => {
+  return (
+    <Flex
+      pt="7"
+      pb="7"
+      direction="column"
+      align="center"
+      justify="center"
+      borderWidth="1px"
+      borderRadius="10px"
+    >
+      <Image
+        src={props.slug}
+        alt={props.title}
+        fit="cover"
+        loading="lazy"
+        width="85px"
+      />
+      <Heading mt={6} mb={6} fontSize="4xl">
+        {props.title}
+      </Heading>
+      <Flex direction={{ base: "column", md: "row" }}>
+        <Button
+          variant="ghost"
+          borderWidth="1px"
+          leftIcon={<Copy />}
+          onClick={() => copyToClipboard(props.slug)}
+          mb={{ base: "2", md: "0" }}
+          mr={{ base: "0", md: "3" }}
+        >
+          Copy to clipboard
+        </Button>
+        <Button
+          leftIcon={<DownloadSimple />}
+          variant="primary"
+          onClick={() => downloadSvg(props.slug)}
+          mb={{ base: "2", md: "0" }}
+          mr={{ base: "0", md: "3" }}
+        >
+          Download .svg
+        </Button>
+        <Link href={props.url} isExternal={true}>
+          {props.title} website <Icon as={ArrowSquareOut} mt="2" />
+        </Link>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default SVGInfo;

src/hooks/useDebounce.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;

src/interfaces/components.ts

@@ -0,0 +1,39 @@
+export interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export interface CustomLinkProps {
+  href: string;
+  children: React.ReactNode;
+  external?: boolean;
+}
+
+export interface CustomIconBtnProps {
+  title: string;
+  icon: React.ReactElement;
+  onClick?: () => void;
+}
+
+export interface SVGCardProps {
+  id: number;
+  svg: string;
+  title: string;
+  slug?: string;
+  url?: string;
+}
+
+export interface SidebarContentProps {
+  display?: object;
+  w?: string;
+  borderRight?: string;
+  children?: React.ReactNode;
+}
+
+export interface LoadingProps {
+  text: string;
+}
+
+export interface ErrorProps {
+  title: string;
+  description: string;
+}

src/interfaces/svgData.ts

@@ -0,0 +1,8 @@
+export interface SvgData {
+  id: number;
+  slug: string;
+  title: string;
+  category: string;
+  categories?: string[];
+  url: string;
+}

src/layout/footer/index.tsx

@@ -0,0 +1,21 @@
+import CustomLink from "@/common/link";
+import { Flex, Heading, HStack, Icon, Text } from "@chakra-ui/react";
+import { RocketLaunch, TwitterLogo } from "phosphor-react";
+import React from "react";
+
+type Props = {};
+
+const Index = (props: Props) => {
+  return (
+    <Flex direction="column" pt="8" pb="8" justifyContent="center" alignItems="center">
+      <HStack>
+        <Icon as={RocketLaunch} />
+        <CustomLink href="https://twitter.com/pheralb_" external={true}>
+          Created by Pablo
+        </CustomLink>
+      </HStack>
+    </Flex>
+  );
+};
+
+export default Index;

src/layout/header/categories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import useSWR from "swr";
+import { getCategorySvgs } from "@/services";
+import CustomLink from "@/common/link";
+import { Box } from "@chakra-ui/react";
+import { RaceBy } from "@uiball/loaders";
+
+const Categories = () => {
+  const { data, error } = useSWR(getCategorySvgs);
+
+  if (error) return <div>failed to load</div>;
+  if (!data)
+    return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />;
+
+  return (
+    <>
+      {data.map((category: string) => (
+        <Box key={category} p="4" borderRadius="5px" borderWidth="1px">
+          <CustomLink href={`/category/${category}`}>{category}</CustomLink>
+        </Box>
+      ))}
+    </>
+  );
+};
+
+export default Categories;

src/layout/header/index.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  Box,
+  Flex,
+  useColorModeValue,
+  HStack,
+  Button,
+  Container,
+  Heading,
+  Icon,
+  useDisclosure,
+  Collapse,
+} from "@chakra-ui/react";
+import { ArrowSquareOut, MagnifyingGlass, Sticker, X } from "phosphor-react";
+import Theme from "./theme";
+import Tap from "@/animations/tap";
+import Mobile from "./mobile";
+import { Links } from "./links";
+import CustomLink from "@/common/link";
+import Categories from "./categories";
+import Search from "@/components/search";
+import CustomIconBtn from "@/common/iconBtn";
+
+const Header = () => {
+  const bg = useColorModeValue("bg.light", "bg.dark");
+  const { isOpen, onToggle } = useDisclosure();
+  return (
+    <>
+      <Box
+        as="header"
+        position="sticky"
+        top="0"
+        bg={bg}
+        borderBottomWidth="1px"
+        w="full"
+        py={6}
+        zIndex={1}
+        shadow="sm"
+      >
+        <Container maxW={{ base: "full", md: "70%" }}>
+          <Flex alignItems="center" justifyContent="space-between" mx="auto">
+            <CustomLink href="/">
+              <Tap>
+                <HStack spacing={3} cursor="pointer">
+                  <Sticker size={32} color="#4343e5" weight="bold" />
+                  <Heading fontSize="19px">svgl</Heading>
+                </HStack>
+              </Tap>
+            </CustomLink>
+            <HStack display="flex" alignItems="center" spacing={1}>
+              <HStack
+                spacing={1}
+                mr={1}
+                display={{ base: "none", md: "inline-flex" }}
+              >
+                {Links.map((link) => (
+                  <CustomLink
+                    key={link.title}
+                    href={link.slug}
+                    external={link.external}
+                  >
+                    <Button variant="ghost" fontFamily="Inter-Semibold">
+                      {link.title}
+                      {link.external ? (
+                        <Icon as={ArrowSquareOut} ml="2" />
+                      ) : null}
+                    </Button>
+                  </CustomLink>
+                ))}
+                <CustomIconBtn
+                  title="Toggle Search bar"
+                  icon={
+                    isOpen ? <X size={22} /> : <MagnifyingGlass size={22} />
+                  }
+                  onClick={onToggle}
+                />
+                <Theme />
+              </HStack>
+              <Box display={{ base: "inline-flex", md: "none" }}>
+                <Mobile />
+              </Box>
+            </HStack>
+          </Flex>
+          <Collapse in={isOpen} animateOpacity>
+            <Box mt="3">
+              <Search />
+            </Box>
+          </Collapse>
+          <Box mt="2" display={{ base: "block", md: "none" }}>
+            <Search />
+          </Box>
+        </Container>
+      </Box>
+      <Box p="4" overflowX="hidden" overflowY="auto">
+        <HStack
+          justifyContent={{ base: "none", md: "center" }}
+          spacing={4}
+          overflowX="auto"
+          overflowY="hidden"
+          bg={bg}
+          pb="4"
+          borderBottomWidth="1px"
+        >
+          <Categories />
+        </HStack>
+      </Box>
+    </>
+  );
+};
+
+export default Header;

src/layout/header/links.ts

@@ -0,0 +1,12 @@
+export const Links = [
+  {
+    title: "Github",
+    slug: "https://github.com/pheralb/svgl",
+    external: true,
+  },
+  {
+    title: "Twitter",
+    slug: "https://twitter.com/pheralb_",
+    external: true,
+  },
+];

src/layout/header/mobile.tsx

@@ -0,0 +1,57 @@
+import CustomLink from "@/common/link";
+import {
+  Button,
+  CloseButton,
+  IconButton,
+  useColorModeValue,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { List } from "phosphor-react";
+import { Links } from "./links";
+
+const Mobile = () => {
+  const bg = useColorModeValue("bg.light", "bg.dark");
+  const mobileNav = useDisclosure();
+  return (
+    <>
+      <IconButton
+        display={{ base: "flex", md: "none" }}
+        aria-label="Open menu navbar"
+        variant="ghost"
+        icon={<List size={22} />}
+        onClick={mobileNav.onOpen}
+      />
+
+      <VStack
+        pos="absolute"
+        top={0}
+        left={0}
+        right={0}
+        display={mobileNav.isOpen ? "flex" : "none"}
+        flexDirection="column"
+        p={4}
+        pb={4}
+        bg={bg}
+        spacing={3}
+        rounded="sm"
+        shadow="sm"
+        borderWidth="1px"
+        zIndex={2}
+      >
+        <CloseButton aria-label="Close menu" onClick={mobileNav.onClose} />
+        {Links.map((link) => (
+          <CustomLink
+            key={link.title}
+            href={link.slug}
+            external={link.external}
+          >
+            <Button variant="ghost">{link.title}</Button>
+          </CustomLink>
+        ))}
+      </VStack>
+    </>
+  );
+};
+
+export default Mobile;

src/layout/header/theme.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useColorMode, useColorModeValue } from "@chakra-ui/react";
+import CustomIconBtn from "@/common/iconBtn";
+import { Moon, Sun } from "phosphor-react";
+
+const Theme = () => {
+  const { toggleColorMode } = useColorMode();
+  const key = useColorModeValue("light", "dark");
+  const icon = useColorModeValue(
+    <Moon size={22} />,
+    <Sun size={22} />
+  );
+  return (
+    <AnimatePresence exitBeforeEnter initial={false}>
+      <motion.div
+        key={key}
+        initial={{ y: -20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: 20, opacity: 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        <CustomIconBtn
+          title="Toggle theme"
+          icon={icon}
+          onClick={toggleColorMode}
+        />
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default Theme;

src/layout/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { LayoutProps } from "@/interfaces/components";
+import { Container } from "@chakra-ui/react";
+import Header from "./header";
+import Footer from "./footer";
+
+const Index = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <Header />
+      <Container maxW={{ base: "100%", md: "70%" }} mt={{ base: "1", md: "3" }}>{children}</Container>
+      <Footer />
+    </>
+  );
+};
+
+export default Index;

src/pages/404.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+type Props = {};
+
+const Error = (props: Props) => {
+  return <div>Error 404</div>;
+};
+
+export default Error;

src/pages/_app.tsx

@@ -0,0 +1,63 @@
+import type { AppProps } from "next/app";
+
+// Chakra UI & custom styles ->
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "@/theme";
+import "@/styles/globals.css";
+
+// Layout ->
+import Layout from "@/layout";
+
+// Nextjs Progressbar ->
+import NextNProgress from "nextjs-progressbar";
+
+// Framer ->
+import { motion } from "framer-motion";
+
+// SWR Config & services ->
+import { SWRConfig } from "swr";
+import { fetcher } from "@/services/fetcher";
+
+// React Hot Toast ->
+import { Toaster } from "react-hot-toast";
+import { DefaultSeo } from "next-seo";
+import nextSeoConfig from "next-seo.config";
+
+function MyApp({ Component, pageProps, router }: AppProps) {
+  return (
+    <>
+      <DefaultSeo {...nextSeoConfig} />
+      <NextNProgress
+        color="#4343E5"
+        startPosition={0.3}
+        stopDelayMs={200}
+        height={2}
+        showOnShallow={true}
+      />
+      <ChakraProvider theme={theme}>
+        <SWRConfig value={{ fetcher }}>
+          <Layout>
+            <motion.div
+              key={router.route}
+              initial="initial"
+              animate="animate"
+              variants={{
+                initial: {
+                  opacity: 0,
+                },
+                animate: {
+                  opacity: 1,
+                },
+              }}
+            >
+              <Component {...pageProps} />
+            </motion.div>
+          </Layout>
+        </SWRConfig>
+      </ChakraProvider>
+      <Toaster position="bottom-center" reverseOrder={false} />
+    </>
+  );
+}
+
+export default MyApp;

src/pages/_document.tsx

@@ -0,0 +1,18 @@
+import { ColorModeScript } from "@chakra-ui/react";
+import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import theme from "@/theme";
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

src/pages/api/all.ts

@@ -0,0 +1,12 @@
+import db from "data/svgs.json";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { SvgData } from "@/interfaces/svgData";
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<SvgData[]>
+) {
+  // Begin with the last id in the db:
+  const svgs = db.sort((a, b) => b.id - a.id);
+  return res.status(200).json(svgs);
+}

src/pages/api/categories.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import db from "data/svgs.json";
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  // Get unique categories:
+  const categories = db
+    .map((svg) => svg.category)
+    .filter((category, index, array) => array.indexOf(category) === index);
+  res.status(200).json(categories);
+}

src/pages/api/search.ts

@@ -1,6 +1,7 @@
-import db from "data/icons";
+import db from "data/svgs.json";
+import { NextApiRequest, NextApiResponse } from "next";
 
-export default function handler(req, res) {
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
   const { id, q, c } = req.query;
 
   // 🔎 Search by id (ex: ?id=1) ->
@@ -13,7 +14,7 @@ export default function handler(req, res) {
   if (q) {
     const results = db.filter((product) => {
       const { title } = product;
-      return title.toLowerCase().includes(q.toLowerCase());
+      return title.toLowerCase().includes(q.toString().toLowerCase());
     });
     return res.status(200).json(results);
   }
@@ -22,11 +23,11 @@ export default function handler(req, res) {
   if (c) {
     const results = db.filter((product) => {
       const { category } = product;
-      return category.toLowerCase().includes(c.toLowerCase());
+      return category.toLowerCase().includes(c.toString().toLowerCase());
     });
     return res.status(200).json(results);
   }
 
   // ✖ Error ->
-  res.status(400).json({ info: 'Error: api query not found.' });
+  res.status(400).json({ info: "[/api/search] Error: api query not found." });
 }

src/pages/category/[category].tsx

@@ -0,0 +1,39 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { getSvgByCategory } from "@/services";
+import Loading from "@/components/loading";
+import Grid from "@/common/grid";
+import SVGCard from "@/components/svgCard";
+import { SvgData } from "@/interfaces/svgData";
+import { Center, Heading } from "@chakra-ui/react";
+import Show from "@/animations/show";
+
+export default function Category() {
+  const router = useRouter();
+  const { data, error } = useSWR(
+    () => router.query.category && `${getSvgByCategory}${router.query.category}`
+  );
+
+  if (error) router.push("/404");
+  if (!data) return <Loading text="Loading..." />;
+
+  return (
+    <>
+      <Head>
+        <title>{router.query.category} logos - svgl</title>
+      </Head>
+      <Show>
+        <Center>
+          <Heading mb="5">{router.query.category}</Heading>
+        </Center>
+      </Show>
+
+      <Grid>
+        {data.map((svg: SvgData) => (
+          <SVGCard key={svg.id} id={svg.id} svg={svg.slug} title={svg.title} />
+        ))}
+      </Grid>
+    </>
+  );
+}

src/pages/index.tsx

@@ -0,0 +1,28 @@
+import type { NextPage } from "next";
+import useSWR from "swr";
+import { getAllSvgs } from "@/services";
+import { SvgData } from "@/interfaces/svgData";
+import SVGCard from "@/components/svgCard";
+import Grid from "@/common/grid";
+import Loading from "@/components/loading";
+import Error from "@/components/error";
+
+const Home: NextPage = () => {
+  const { data, error } = useSWR(getAllSvgs);
+
+  if (error)
+    return (
+      <Error title="Error" description="An unexpected error has occurred" />
+    );
+  if (!data) return <Loading text="Loading..." />;
+
+  return (
+    <Grid>
+      {data.map((svg: SvgData) => (
+        <SVGCard key={svg.id} id={svg.id} svg={svg.slug} title={svg.title} />
+      ))}
+    </Grid>
+  );
+};
+
+export default Home;

src/pages/svg/[id].tsx

@@ -0,0 +1,29 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+import Show from "@/animations/show";
+import { getSvgById } from "@/services";
+import Loading from "@/components/loading";
+import SVGInfo from "@/components/svgInfo";
+
+export default function Icon() {
+  const router = useRouter();
+  const { data, error } = useSWR(
+    () => router.query.id && `${getSvgById}${router.query.id}`
+  );
+
+  if (error) router.push("/404");
+  if (!data) return <Loading text="Loading..." />;
+
+  return (
+    <>
+      <Head>
+        <title>{data.title} - svgl</title>
+      </Head>
+      <Show>
+        <SVGInfo {...data} />
+      </Show>
+    </>
+  );
+}

src/services/fetcher.ts

@@ -0,0 +1,10 @@
+export const fetcher = async (url: string) => {
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    const error = new Error("An error occurred while fetching the data.");
+    throw error;
+  }
+
+  return res.json();
+};

src/services/index.ts

@@ -0,0 +1,6 @@
+export const githubVersionPackage = 'https://api.github.com/repos/pheralb/svgl/releases/latest';
+export const getAllSvgs = "/api/all";
+export const getCategorySvgs = "/api/categories";
+export const getSvgById = "/api/search?id=";
+export const getSvgByQuery = "/api/search?q=";
+export const getSvgByCategory = "/api/search?c=";

src/styles/globals.css

@@ -0,0 +1,16 @@
+/* Fonts -> */
+@font-face {
+  font-family: "Inter-Regular";
+  src: url("/fonts/Inter-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Inter-Semibold";
+  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}

src/theme/components/button.ts

@@ -0,0 +1,44 @@
+const baseStyle = {
+  borderRadius: "md",
+  fontWeight: "light",
+};
+
+function variantPrimary() {
+  const disabled = {
+    bg: "purple.900",
+    color: "white",
+  };
+
+  const loading = {
+    bg: "purple.800",
+    color: "white",
+  };
+
+  return {
+    bg: "brand.purple",
+    color: "white",
+    _hover: {
+      bg: "purple.900",
+      _disabled: {
+        ...disabled,
+        _loading: loading,
+      },
+    },
+    _active: {
+      bg: "purple.700",
+    },
+    _disabled: {
+      ...disabled,
+      _loading: loading,
+    },
+  };
+}
+
+const variants = {
+  primary: variantPrimary,
+};
+
+export default {
+  baseStyle,
+  variants,
+};

src/theme/components/index.ts

@@ -0,0 +1,5 @@
+import Button from "./button";
+
+export default {
+  Button,
+};

src/theme/index.ts

@@ -0,0 +1,44 @@
+import { ChakraProps, extendTheme } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+import components from "./components";
+
+const theme = extendTheme(
+  {
+    components,
+  },
+  {
+    config: {
+      initialColorMode: "light",
+      useSystemColorMode: false,
+    },
+    colors: {
+      bg: {
+        light: "#F2F2F2",
+        dark: "#1F2023",
+      },
+      full: {
+        light: "#ffffff",
+        dark: "#000000",
+      },
+      brand: {
+        purple: "#4343E5",
+      },
+    },
+    fonts: {
+      body: "Inter-Regular, sans-serif",
+      heading: "Inter-Semibold, sans-serif",
+    },
+    styles: {
+      global: (props: ChakraProps) => ({
+        "html, body": {
+          height: "100%",
+          maxHeight: "100vh",
+          bg: mode("bg.light", "bg.dark")(props),
+          fontSize: "14px",
+        },
+      }),
+    },
+  }
+);
+
+export default theme;

src/theme/toast.ts

@@ -0,0 +1,8 @@
+export const ToastTheme = {
+  icon: "🔔",
+  style: {
+    borderRadius: "10px",
+    background: "#1F2023",
+    color: "#fff",
+  },
+};

styles/globals.css

@@ -1,35 +0,0 @@
-@font-face {
-  font-family: "Inter-Regular";
-  src: url("/fonts/Inter-Regular.woff2") format('woff2');
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "Eina-Bold";
-  src: url("/fonts/eina-01-bold.woff2") format('woff2');
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-}
-
-/* width */
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #16161a; 
-}
- 
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgb(133, 133, 133); 
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #48b7b0; 
-}

styles/theme.js

@@ -1,18 +0,0 @@
-import { extendTheme } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-
-const theme = extendTheme({
-  styles: {
-    global: (props) => ({
-      body: {
-        fontSize: "18px",
-        fontFamily: "Inter-Regular",
-        fontWeight: "light",
-        color: mode("#2b2c34", "whiteAlpha.900")(props),
-        bg: mode("#fbfbfb", "#16161a")(props),
-      },
-    }),
-  }
-});
-
-export default theme;

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}