⚒️ New improvements, design and components.

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/link.tsx

@@ -6,7 +6,11 @@ import { CustomLinkProps } from "@/interfaces/components";
 const CustomLink = ({ href, children, external }: CustomLinkProps) => {
   return (
     <NextLink href={href} passHref>
-      <Link isExternal={external} _hover={{ textDecoration: "none" }}>
+      <Link
+        isExternal={external}
+        _hover={{ textDecoration: "none" }}
+        _focus={{ border: "none" }}
+      >
         {children}
       </Link>
     </NextLink>

src/interfaces/components.ts

@@ -19,3 +19,10 @@ export interface SVGCardProps {
   svg: string;
   url: string;
 }
+
+export interface SidebarContentProps {
+  display?: object;
+  w?: string;
+  borderRight?: string;
+  children?: React.ReactNode;
+}

src/interfaces/svgData.ts

@@ -3,5 +3,6 @@ export interface SvgData {
   href: string;
   title: string;
   category: string;
+  categories?: string[];
   url: string;
 }

src/layout/header/index.tsx

@@ -1,90 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Flex,
-  useColorModeValue,
-  HStack,
-  Button,
-  useDisclosure,
-  VStack,
-  IconButton,
-  CloseButton,
-  Heading,
-  Container,
-} from "@chakra-ui/react";
-import { IoMenu } from "react-icons/io5";
-import Items from "@/layout/header/items";
-import VersionItem from "@/layout/header/version";
-
-const Header = () => {
-  const bg = useColorModeValue("bg.light", "bg.dark");
-  const mobileNav = useDisclosure();
-  return (
-    <Box as="header" position="sticky" top="0" bg={bg} w="full" py={6} mb={10}>
-      <Container maxW="85%">
-        <Flex alignItems="center" justifyContent="space-between" mx="auto">
-          <HStack>
-            <Heading fontSize="18px">svgl</Heading>
-          </HStack>
-          <HStack display="flex" alignItems="center" spacing={1}>
-            <HStack
-              spacing={2}
-              mr={1}
-              display={{ base: "none", md: "inline-flex" }}
-            >
-              <Items />
-            </HStack>
-            <Box display={{ base: "inline-flex", md: "none" }}>
-              <IconButton
-                display={{ base: "flex", md: "none" }}
-                aria-label="Open menu header"
-                variant="ghost"
-                icon={<IoMenu size={32} />}
-                onClick={mobileNav.onOpen}
-              />
-
-              <VStack
-                pos="absolute"
-                top={0}
-                left={0}
-                right={0}
-                display={mobileNav.isOpen ? "flex" : "none"}
-                flexDirection="column"
-                p={2}
-                pb={4}
-                m={2}
-                bg={bg}
-                spacing={3}
-                rounded="sm"
-                shadow="sm"
-              >
-                <CloseButton
-                  aria-label="Close menu"
-                  onClick={mobileNav.onClose}
-                />
-
-                <Button w="full" variant="ghost">
-                  Features
-                </Button>
-                <Button w="full" variant="ghost">
-                  Pricing
-                </Button>
-                <Button w="full" variant="ghost">
-                  Blog
-                </Button>
-                <Button w="full" variant="ghost">
-                  Company
-                </Button>
-                <Button w="full" variant="ghost">
-                  Sign in
-                </Button>
-              </VStack>
-            </Box>
-          </HStack>
-        </Flex>
-      </Container>
-    </Box>
-  );
-};
-
-export default Header;

src/layout/header/items.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import VersionItem from "@/layout/header/version";
-import ThemeItem from "@/layout/header/theme";
-import Socials from "@/layout/header/socials";
-
-const Items = () => {
-  return (
-    <>
-      <VersionItem />
-      <ThemeItem />
-      <Socials />
-    </>
-  );
-};
-
-export default Items;

src/layout/header/socials.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import CustomIconBtn from "@/common/iconBtn";
-import CustomLink from "@/common/link";
-import { IoLogoGithub, IoLogoTwitter } from "react-icons/io5";
-
-const Socials = () => {
-  return (
-    <>
-      <CustomLink href="https://github.com/pheralb/svgl" external={true}>
-        <CustomIconBtn title="Github" icon={<IoLogoGithub size={20} />} />
-      </CustomLink>
-      <CustomLink href="https://twitter.com/pheralb_" external={true}>
-        <CustomIconBtn title="Twitter" icon={<IoLogoTwitter size={20} />} />
-      </CustomLink>
-    </>
-  );
-};
-
-export default Socials;

src/layout/header/theme.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useColorMode, useColorModeValue } from "@chakra-ui/react";
-import CustomIconBtn from "@/common/iconBtn";
-import { IoMoonOutline, IoSunnyOutline } from "react-icons/io5";
-
-const Theme = () => {
-  const { toggleColorMode } = useColorMode();
-  const key = useColorModeValue("light", "dark");
-  const icon = useColorModeValue(
-    <IoMoonOutline size={20} />,
-    <IoSunnyOutline size={20} />
-  );
-  return (
-    <AnimatePresence exitBeforeEnter initial={false}>
-      <motion.div
-        style={{ display: "inline-block" }}
-        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/header/version.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import {
-  Menu,
-  Button,
-  MenuButton,
-  MenuList,
-  useDisclosure,
-  MenuItem,
-  Text,
-  useColorModeValue,
-} from "@chakra-ui/react";
-import useSWR from "swr";
-import { IoCaretDownOutline } from "react-icons/io5";
-import { githubVersionPackage } from "@/services";
-import CustomLink from "@/common/link";
-
-const VersionItem = () => {
-  const { data, error } = useSWR(githubVersionPackage);
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const bg = useColorModeValue("bg.light", "bg.dark");
-
-  if (error) return <Text>Error loading version</Text>;
-  if (!data) return <Text>loading...</Text>;
-
-  return (
-    <Menu isOpen={isOpen}>
-      <MenuButton
-        as={Button}
-        variant="ghost"
-        borderWidth="1px"
-        borderRadius={5}
-        aria-label="Version dropdown"
-        rightIcon={<IoCaretDownOutline size={14} />}
-        _focus={{
-          borderColor: "transparent",
-        }}
-        onMouseEnter={onOpen}
-        onMouseLeave={onClose}
-      >
-        {data?.tag_name}
-      </MenuButton>
-      <MenuList onMouseEnter={onOpen} onMouseLeave={onClose} bg={bg}>
-        <CustomLink href={data?.html_url} external={true}>
-          <MenuItem>Releases</MenuItem>
-        </CustomLink>
-      </MenuList>
-    </Menu>
-  );
-};
-
-export default VersionItem;

src/layout/index.tsx

@@ -1,15 +1,9 @@
-import { LayoutProps } from "@/interfaces/components";
 import React from "react";
-import Header from "@/layout/header";
-import { Box } from "@chakra-ui/react";
+import { LayoutProps } from "@/interfaces/components";
+import Sidebar from "@/layout/sidebar";
 
 const Index = ({ children }: LayoutProps) => {
-  return (
-    <>
-      <Header />
-      {children}
-    </>
-  );
+  return <Sidebar>{children}</Sidebar>;
 };
 
 export default Index;

src/pages/api/categories.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import db from "data/svgs";
+
+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/index.tsx

@@ -13,23 +13,18 @@ const Home: NextPage = () => {
   if (!data) return <div>loading...</div>;
 
   return (
-    <>
-      <Center>
-        <Heading fontSize="5xl">Beautifully SVG logos</Heading>
-      </Center>
-      <Container maxW="85%">
-        <Grid>
-          {data.map((svg: SvgData) => (
-            <SVGCard
-              key={svg.id}
-              title={svg.title}
-              url={svg.href}
-              svg={svg.href}
-            />
-          ))}
-        </Grid>
-      </Container>
-    </>
+    <Container maxW="85%">
+      <Grid>
+        {data.map((svg: SvgData) => (
+          <SVGCard
+            key={svg.id}
+            title={svg.title}
+            url={svg.href}
+            svg={svg.href}
+          />
+        ))}
+      </Grid>
+    </Container>
   );
 };
 

src/services/index.ts

@@ -1,2 +1,3 @@
 export const githubVersionPackage = 'https://api.github.com/repos/pheralb/svgl/releases/latest';
-export const getAllSvgs = "/api/all";
+export const getAllSvgs = "/api/all";
+export const getCategorySvgs = "/api/categories";

src/theme/index.ts

@@ -13,12 +13,15 @@ const theme = extendTheme(
     },
     colors: {
       bg: {
-        light: "#f2f2f3",
-        dark: "#242424",
+        light: "#F2F2F2",
+        dark: "#050505",
       },
       full: {
         light: "#ffffff",
         dark: "#000000",
+      },
+      brand: {
+        purple: "#4343E5"
       }
     },
     fonts: {
@@ -30,15 +33,10 @@ const theme = extendTheme(
         "html, body": {
           height: "100%",
           maxHeight: "100vh",
-          background: mode(
-            "radial-gradient(circle at 1px 1px, #E7E7E7 1px, #f2f2f3 0)",
-            "radial-gradient(circle at 1px 1px, #303030 1px, #242424 0)"
-          )(props),
-          backgroundSize: "40px 40px",
+          backgroundColor: mode("bg.light", "bg.dark")(props),
           fontSize: "14px",
         },
       }),
-      borderColor: "red",
     },
   }
 );