qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

New svgs, bug fixes & new design page

Browse Source
This commit is contained in:
pheralb
2022-03-08 17:17:05 +00:00
parent dd4b1e364f
commit 8525415604
16 changed files with 482 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/card/design.js
+26
View File
@@ -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;
components/card/image.js
+23
View File
@@ -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;
components/footer/index.js
+7 -5
View File
@@ -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="https://github.com/pheralb" passHref>
Built by Pablo Hdez
</Link>
<Center h="100px" mt="8" mb="8" color="gray.500">
<VStack>
<Link href="https://github.com/pheralb" passHref>
Built by Pablo Hdez
</Link>
</VStack>
</Center>
</>
);
components/header/index.js
+4 -20
View File
@@ -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,8 +31,8 @@ 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"
@@ -44,19 +40,7 @@ const Header = () => {
>
<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
components/header/logo.js
+32 -59
View File
@@ -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="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>
<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;
components/layout/index.js
+1 -1
View File
@@ -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>
);
components/svg/index.js
+16
View File
@@ -1270,3 +1270,19 @@ export const framer = (props) => {
</svg>
);
};
export const vercelFull = (props) => {
return (
<svg
xmlns="http://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>
);
};