New svgs, bug fixes & new design page

tmchein · Mar 8, 2022 · 8525415 · 8525415
1 parent dd4b1e3
commit 8525415
Show file tree

Hide file tree

Showing 16 changed files with 482 additions and 95 deletions.
diff --git a/animations/loader.js b/animations/loader.js
@@ -5,7 +5,7 @@ const LoadingDot = {
  display: "block",
  width: "1rem",
  height: "1rem",
- backgroundColor: "#50cdc5",
+ backgroundColor: "#6748E6",
  borderRadius: "50%",
 };
 

diff --git a/components/card/design.js b/components/card/design.js
@@ -0,0 +1,26 @@
+import { Box, VStack, Icon, Text, Divider } from "@chakra-ui/react";
+import React from "react";
+
+const Design = ({ icon, title, children }) => {
+ return (
+ <Box
+ borderWidth="1px"
+ borderRadius="lg"
+ overflow="hidden"
+ _hover={{ shadow: "md", transition: "all .2s" }}
+ >
+ <Box p="6">
+ <VStack spacing={3}>
+ <Icon as={icon} w={16} h={16} />
+ <Text fontSize="3xl" fontWeight="semibold">
+ {title}
+ </Text>
+ <Divider />
+ <Box fontSize="2xl">{children}</Box>
+ </VStack>
+ </Box>
+ </Box>
+ );
+};
+
+export default Design;
diff --git a/components/card/image.js b/components/card/image.js
@@ -0,0 +1,23 @@
+import { Box, Image } from "@chakra-ui/react";
+import React from "react";
+
+const CardImage = ({title, image, children}) => {
+ return (
+ <Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+ <Image src={image} alt={title} width="60" />
+ <Box p="6">
+ <Box
+ mt="1"
+ as="h4"
+ lineHeight="tight"
+ isTruncated
+ >
+ {title}
+ </Box>
+ {children}
+ </Box>
+ </Box>
+ );
+};
+
+export default CardImage;
diff --git a/components/footer/index.js b/components/footer/index.js
@@ -1,14 +1,16 @@
 import React from "react";
-import { Center } from "@chakra-ui/react";
+import { Center, Text, VStack } from "@chakra-ui/react";
 import Link from "next/link";
 
 const Index = () => {
  return (
  <>
- <Center h="100px" color="gray.500">
- <Link href="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/pheralb" passHref>
- Built by Pablo Hdez
- </Link>
+ <Center h="100px" mt="8" mb="8" color="gray.500">
+ <VStack>
+ <Link href="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/pheralb" passHref>
+ Built by Pablo Hdez
+ </Link>
+ </VStack>
  </Center>
  </>
  );

diff --git a/components/header/index.js b/components/header/index.js
@@ -16,16 +16,12 @@ import {
  IoBookOutline,
  IoCloseSharp,
  IoLogoGithub,
- IoLogoTwitter,
 } from "react-icons/io5";
 import { BiLinkExternal } from "react-icons/bi";
 import Link from "next/link";
-import Hover from "animations/tap";
-import Show from "animations/show";
-import { svgl } from "components/svg";
 import HEADER_LINKS from "./links";
-import Search from "components/search";
 import ModalSearch from "components/search/modal";
+import Logo from "./logo";
 
 const Header = () => {
  const mobileNav = useDisclosure();
@@ -35,28 +31,16 @@ const Header = () => {
  <Box
  w="full"
  bg={bg}
- px={{ base: 3, md: 16 }}
- pl={{ base: 3, md: 16 }}
+ px={{ base: 6, md: 16 }}
+ pl={{ base: 6, md: 16 }}
  py="5"
  pos="sticky"
  top="0"
  zIndex="1000"
  >
  <Flex alignItems="center" justifyContent="space-between" mx="auto">
  <HStack spacing="1" alignItems="center">
- <Hover>
- <Link href="/" passHref>
- <IconButton
- as={svgl}
- cursor="pointer"
- name="logo"
- boxSize="40px"
- mr="2"
- borderRadius="full"
- bg="transparent"
- />
- </Link>
- </Hover>
+ <Logo />
  {HEADER_LINKS.map((link) => (
  <Link key={link.id} href={link.href} passHref>
  <Button

diff --git a/components/header/logo.js b/components/header/logo.js
@@ -1,64 +1,37 @@
-import * as React from "react";
+import React, { useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { IconButton } from "@chakra-ui/react";
+import Hover from "animations/tap";
+import { svgl } from "components/svg";
+import confetti from "canvas-confetti";
+
+const Logo = () => {
+ const router = useRouter();
+
+ useEffect(() => {
+ logoHeader.addEventListener("contextmenu", (event) => {
+ event.preventDefault();
+ router.push("/design");
+ });
+ }, []);
 
-function Logo(props) {
  return (
- <svg
- xmlns="https://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>
+ <Hover>
+ <Link href="/" passHref>
+ <IconButton
+ as={svgl}
+ id="logoHeader"
+ cursor="pointer"
+ name="logo"
+ boxSize="40px"
+ mr="2"
+ borderRadius="full"
+ bg="transparent"
+ />
+ </Link>
+ </Hover>
  );
-}
+};
 
 export default Logo;
diff --git a/components/layout/index.js b/components/layout/index.js
@@ -3,7 +3,7 @@ import { Box } from "@chakra-ui/react";
 
 const Index = ({ children }) => {
  return (
- <Box as="main" px={{ base: 3, md: 16 }} pl={{ base: 3, md: 16 }}>
+ <Box as="main" px={{ base: 6, md: 16 }} pl={{ base: 6, md: 16 }}>
  {children}
  </Box>
  );

diff --git a/components/svg/index.js b/components/svg/index.js
@@ -1270,3 +1270,19 @@ export const framer = (props) => {
  </svg>
  );
 };
+
+export const vercelFull = (props) => {
+ return (
+ <svg
+ xmlns="https://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 4438 1000"
+ {...props}
+ >
+ <path
+ fill="#000"
+ d="M2223.75 250c-172.5 0-296.88 112.5-296.88 281.25s139.85 281.25 312.51 281.25c104.21 0 196.09-41.25 252.96-110.781l-119.53-69.063c-31.56 34.532-79.53 54.688-133.43 54.688-74.85 0-138.44-39.063-162.04-101.563h437.82c3.43-17.5 5.47-35.625 5.47-54.687C2520.63 362.5 2396.41 250 2223.75 250zm-147.66 226.562C2095.62 414.219 2149.06 375 2223.75 375c74.84 0 128.28 39.219 147.66 101.562h-295.32zm-35.31-398.437l-432.97 750-433.12-750h162.34l270.63 468.75 270.62-468.75h162.5zM577.344 0l577.346 1000H0L577.344 0zM3148.75 531.25C3148.75 625 3210 687.5 3305 687.5c64.38 0 112.66-29.219 137.5-76.875l120 69.219C3512.81 762.656 3419.69 812.5 3305 812.5c-172.66 0-296.87-112.5-296.87-281.25S3132.5 250 3305 250c114.69 0 207.66 49.844 257.5 132.656l-120 69.219C3417.66 404.219 3369.38 375 3305 375c-94.84 0-156.25 62.5-156.25 156.25zM4437.5 78.125v718.75h-140.62V78.125h140.62zM3906.25 250c-172.5 0-296.87 112.5-296.87 281.25s140 281.25 312.5 281.25c104.21 0 196.09-41.25 252.96-110.781l-119.53-69.063c-31.56 34.532-79.53 54.688-133.43 54.688-74.85 0-138.44-39.063-162.04-101.563h437.82c3.43-17.5 5.46-35.625 5.46-54.687C4203.12 362.5 4078.91 250 3906.25 250zm-147.66 226.562C3778.13 414.219 3831.41 375 3906.25 375s128.28 39.219 147.66 101.562h-295.32zm-797.34-210.937v151.406c-15.62-4.531-32.19-7.656-50-7.656-90.78 0-156.25 62.5-156.25 156.25v231.25h-140.62v-531.25H2755v143.75c0-79.375 92.34-143.75 206.25-143.75z"
+ ></path>
+ </svg>
+ );
+};
diff --git a/data/icons.js b/data/icons.js
@@ -278,7 +278,28 @@ const Icons = [
  title: "Framer",
  category: "Design",
  url: "https://framer.com/",
- }
+ },
+ {
+ id: 41,
+ href: "/library/netflix.svg",
+ title: "Netflix",
+ category: "Video Platform",
+ url: "https://www.netflix.com/",
+ },
+ {
+ id: 42,
+ href: "/library/firefox.svg",
+ title: "Firefox",
+ category: "Browser",
+ url: "https://www.mozilla.org/en-US/firefox/",
+ },
+ {
+ id: 43,
+ href: "/library/linkedin.svg",
+ title: "LinkedIn",
+ category: "Social",
+ url: "https://www.linkedin.com/",
+ },
 ];
 
 export default Icons;