mirror of
https://github.com/pheralb/svgl.git
synced 2024-09-20 11:16:19 +08:00
New site, new svgs and bug fixes
This commit is contained in:
pheralb
parent
8525415604
commit
a6e4902653
@ -1,6 +1,6 @@
|
||||
<p align="center">
|
||||
<a href="https://svgl.vercel.app/">
|
||||
<img src="https://raw.githubusercontent.com/pheralb/svgl/main/public/images/logo.png" width="100px" alt="svgl logo" />
|
||||
<img src="https://github.com/pheralb/svgl/blob/main/public/images/banner.png?raw=true" width="500px" alt="svgl logo" />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { motion } from "framer-motion";
|
||||
|
||||
const Tap = ({ children }) => {
|
||||
return (
|
||||
<motion.div whileTap={{ scale: 0.98 }}>
|
||||
<motion.div whileHover={{ scale: 1.040 }} whileTap={{ scale: 0.98 }}>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@ -1,32 +1,76 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Image,
|
||||
Center,
|
||||
HStack,
|
||||
IconButton,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import { IoCloudDownloadOutline } from "react-icons/io5";
|
||||
import { FiExternalLink } from "react-icons/fi";
|
||||
import download from "downloadjs";
|
||||
import toast from "react-hot-toast";
|
||||
import Tap from "animations/tap";
|
||||
|
||||
const Index = ({ title, url, href }) => {
|
||||
const bgColor = useColorModeValue("#F2F2F2", "#1D1D1D");
|
||||
const color = useColorModeValue("black", "white");
|
||||
|
||||
const downloadSvg = (url) => {
|
||||
toast(`Downloading ${title}...`, {
|
||||
icon: "🥳",
|
||||
style: {
|
||||
borderRadius: "10px",
|
||||
background: bgColor,
|
||||
color: color,
|
||||
},
|
||||
});
|
||||
download(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<Tap>
|
||||
<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>
|
||||
</Tap>
|
||||
<Box
|
||||
p={4}
|
||||
borderRadius="10px"
|
||||
borderWidth="1px"
|
||||
mb="2"
|
||||
_hover={{
|
||||
shadow: "md",
|
||||
}}
|
||||
>
|
||||
<Center>
|
||||
<Image src={href} alt={title} boxSize="40px" />
|
||||
</Center>
|
||||
<Text mt="2" fontWeight="light" textAlign="center">
|
||||
{title}
|
||||
</Text>
|
||||
<Center>
|
||||
<HStack spacing="1" mt="1">
|
||||
<Tap>
|
||||
<IconButton
|
||||
as="button"
|
||||
variant="ghost"
|
||||
aria-label="Download SVG"
|
||||
icon={<IoCloudDownloadOutline size="16" />}
|
||||
onClick={() => downloadSvg(href)}
|
||||
/>
|
||||
</Tap>
|
||||
<Tap>
|
||||
<Link href={url} passHref>
|
||||
<IconButton
|
||||
as="a"
|
||||
variant="ghost"
|
||||
aria-label="Go to Vue SVG page"
|
||||
icon={<FiExternalLink size="16" />}
|
||||
/>
|
||||
</Link>
|
||||
</Tap>
|
||||
</HStack>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -20,10 +20,9 @@ const Error = () => {
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoHome />}
|
||||
colorScheme="twitter"
|
||||
borderWidth="1px"
|
||||
variant="outline"
|
||||
fontWeight="bold"
|
||||
border="0"
|
||||
fontWeight="light"
|
||||
mb="4"
|
||||
>
|
||||
Go home
|
||||
|
||||
@ -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;
|
||||
@ -1,151 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
HStack,
|
||||
Button,
|
||||
useDisclosure,
|
||||
VStack,
|
||||
IconButton,
|
||||
useColorModeValue,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import Dark from "components/header/dark";
|
||||
import {
|
||||
IoApps,
|
||||
IoBookOutline,
|
||||
IoCloseSharp,
|
||||
IoLogoGithub,
|
||||
} from "react-icons/io5";
|
||||
import { BiLinkExternal } from "react-icons/bi";
|
||||
import Link from "next/link";
|
||||
import HEADER_LINKS from "./links";
|
||||
import ModalSearch from "components/search/modal";
|
||||
import Logo from "./logo";
|
||||
|
||||
const Header = () => {
|
||||
const mobileNav = useDisclosure();
|
||||
const bg = useColorModeValue("light.100", "lightDark.900");
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
w="full"
|
||||
bg={bg}
|
||||
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">
|
||||
<Logo />
|
||||
{HEADER_LINKS.map((link) => (
|
||||
<Link key={link.id} href={link.href} passHref>
|
||||
<Button
|
||||
as="a"
|
||||
variant="ghost"
|
||||
variantColor="teal"
|
||||
fontWeight="light"
|
||||
borderRadius="0"
|
||||
_hover={{
|
||||
transform: "translateY(-1px)",
|
||||
transition: "all .1s",
|
||||
borderBottomWidth: "1px",
|
||||
}}
|
||||
>
|
||||
{link.title}
|
||||
{link.external && (
|
||||
<Icon as={BiLinkExternal} ml="2" w="4" h="4" />
|
||||
)}
|
||||
</Button>
|
||||
</Link>
|
||||
))}
|
||||
</HStack>
|
||||
<HStack display="flex" alignItems="center">
|
||||
<HStack spacing={4} display={{ base: "none", md: "inline-flex" }}>
|
||||
<ModalSearch />
|
||||
<Link href="https://github.com/pheralb/svgl" passHref>
|
||||
<IconButton
|
||||
aria-label="Github Repository"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
icon={<IoLogoGithub size="30" />}
|
||||
/>
|
||||
</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/svgl/tree/main/public/library"
|
||||
passHref
|
||||
>
|
||||
<Button
|
||||
as="a"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
leftIcon={<IoBookOutline size="25" />}
|
||||
fontWeight="light"
|
||||
>
|
||||
Library
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://github.com/pheralb/svgl" passHref>
|
||||
<Button
|
||||
as="a"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
leftIcon={<IoLogoGithub size="25" />}
|
||||
fontWeight="light"
|
||||
>
|
||||
Github
|
||||
</Button>
|
||||
</Link>
|
||||
<Dark />
|
||||
</VStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -1,16 +0,0 @@
|
||||
const HEADER_LINKS = [
|
||||
{
|
||||
id: 1,
|
||||
href: "/",
|
||||
external: false,
|
||||
title: "Browse",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
href: "https://github.com/pheralb/svgl/tree/main/public/library",
|
||||
external: true,
|
||||
title: "Library",
|
||||
}
|
||||
];
|
||||
|
||||
export default HEADER_LINKS;
|
||||
@ -1,37 +0,0 @@
|
||||
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");
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<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;
|
||||
@ -13,33 +13,31 @@ import {
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import { IoSearch } from "react-icons/io5";
|
||||
import { BiLinkExternal } from "react-icons/bi";
|
||||
import { FiExternalLink } from "react-icons/fi";
|
||||
import { Algolia } from "components/svg";
|
||||
import Tap from "animations/tap";
|
||||
|
||||
const AutocompleteItem = ({ id, title, href, url }) => {
|
||||
return (
|
||||
<>
|
||||
<Tap>
|
||||
<Link href={`/svg/${id}`} passHref>
|
||||
<Box
|
||||
id={id}
|
||||
w="100%"
|
||||
borderWidth="1px"
|
||||
borderRadius="6px"
|
||||
mt="3"
|
||||
cursor="pointer"
|
||||
>
|
||||
<HStack py={6} px={6} spacing={2}>
|
||||
<Image src={href} alt={title} boxSize="20px" mr="2" />
|
||||
<Text fontSize="18px" fontWeight="light">
|
||||
{title}
|
||||
</Text>
|
||||
<Icon as={BiLinkExternal} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Link>
|
||||
</Tap>
|
||||
<Link href={`/svg/${id}`} passHref>
|
||||
<Box
|
||||
id={id}
|
||||
w="100%"
|
||||
borderWidth="1px"
|
||||
borderRadius="6px"
|
||||
mt="3"
|
||||
cursor="pointer"
|
||||
_hover={{ shadow: "sm" }}
|
||||
>
|
||||
<HStack py={6} px={6} spacing={2}>
|
||||
<Image src={href} alt={title} boxSize="20px" mr="2" />
|
||||
<Text fontSize="18px" fontWeight="light">
|
||||
{title}
|
||||
</Text>
|
||||
<Icon as={FiExternalLink} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -96,6 +94,7 @@ export default function Search(props) {
|
||||
placeholder="Search icons..."
|
||||
_focus={{ shadow: "md" }}
|
||||
ref={inputRef}
|
||||
autoFocus
|
||||
{...inputProps}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
@ -13,21 +13,18 @@ import {
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import Search from "components/search";
|
||||
import { IoSearch } from "react-icons/io5";
|
||||
import { IoSearchOutline } from "react-icons/io5";
|
||||
import Item from "components/sidebar/item";
|
||||
|
||||
const ModalSearch = (props) => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
const bg = useColorModeValue("light.100", "dark.800");
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
aria-label="Search Icon"
|
||||
bg="transparent"
|
||||
icon={<IoSearch size="25"/>}
|
||||
onClick={onOpen}
|
||||
{...props}
|
||||
/>
|
||||
<Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom'>
|
||||
<Item icon={IoSearchOutline} onClick={onOpen}>
|
||||
Search
|
||||
</Item>
|
||||
<Modal isOpen={isOpen} onClose={onClose} motionPreset="slideInBottom">
|
||||
<ModalOverlay />
|
||||
<ModalContent bg={bg}>
|
||||
<ModalHeader fontWeight="light">Search</ModalHeader>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import React from "react";
|
||||
import { Center, Text, VStack } from "@chakra-ui/react";
|
||||
import { Center, useColorModeValue, VStack } from "@chakra-ui/react";
|
||||
import Link from "next/link";
|
||||
|
||||
const Index = () => {
|
||||
const color = useColorModeValue("gray.400", "gray.600");
|
||||
return (
|
||||
<>
|
||||
<Center h="100px" mt="8" mb="8" color="gray.500">
|
||||
<Center color={color}>
|
||||
<VStack>
|
||||
<Link href="https://github.com/pheralb" passHref>
|
||||
Built by Pablo Hdez
|
||||
22
components/sidebar/dark.js
Normal file
22
components/sidebar/dark.js
Normal file
@ -0,0 +1,22 @@
|
||||
import React from "react";
|
||||
import { useColorMode, useColorModeValue } from "@chakra-ui/react";
|
||||
import { IoMoonOutline, IoSunnyOutline } from "react-icons/io5";
|
||||
import Item from "./item";
|
||||
|
||||
const Index = () => {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
const iconChange = useColorModeValue(IoSunnyOutline, IoMoonOutline);
|
||||
const theme = useColorModeValue("Light", "Dark");
|
||||
|
||||
function toggleTheme() {
|
||||
toggleColorMode();
|
||||
}
|
||||
|
||||
return (
|
||||
<Item icon={iconChange} onClick={toggleTheme}>
|
||||
{theme}
|
||||
</Item>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
108
components/sidebar/index.js
Normal file
108
components/sidebar/index.js
Normal file
@ -0,0 +1,108 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerOverlay,
|
||||
DrawerCloseButton,
|
||||
DrawerHeader,
|
||||
DrawerBody,
|
||||
Flex,
|
||||
IconButton,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import NextLink from "next/link";
|
||||
import { IoApps } from "react-icons/io5";
|
||||
|
||||
import Logo from "components/sidebar/logo";
|
||||
import Item from "components/sidebar/item";
|
||||
import SidebarLinks from "components/sidebar/links";
|
||||
import Dark from "components/sidebar/dark";
|
||||
import By from "components/sidebar/by";
|
||||
import ModalSearch from "components/search/modal";
|
||||
|
||||
export default function Index({ children }) {
|
||||
const sidebar = useDisclosure();
|
||||
const border = useColorModeValue("dark.200", "dark.800");
|
||||
const bg = useColorModeValue("gray.100", "lightDark.900");
|
||||
|
||||
const SidebarContent = (props) => (
|
||||
<Box
|
||||
as="nav"
|
||||
pos="fixed"
|
||||
top="0"
|
||||
left="0"
|
||||
zIndex="sticky"
|
||||
h="full"
|
||||
pb="10"
|
||||
overflowX="hidden"
|
||||
overflowY="auto"
|
||||
borderColor={border}
|
||||
borderRightWidth="1px"
|
||||
shadow="sm"
|
||||
w="56"
|
||||
{...props}
|
||||
>
|
||||
<Box px="5" pt="8" pb="5" align="center">
|
||||
<Logo />
|
||||
</Box>
|
||||
<Flex direction="column" as="nav" aria-label="Main Navigation">
|
||||
{SidebarLinks.map((link) => (
|
||||
<NextLink key={link.id} href={link.href} passHref>
|
||||
<Item icon={link.icon} external={link.external}>
|
||||
{link.title}
|
||||
</Item>
|
||||
</NextLink>
|
||||
))}
|
||||
<ModalSearch />
|
||||
<Dark />
|
||||
</Flex>
|
||||
<Box mt="8" align="center">
|
||||
<By />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box as="section" minH="100vh">
|
||||
<SidebarContent display={{ base: "none", md: "unset" }} />
|
||||
<Drawer
|
||||
isOpen={sidebar.isOpen}
|
||||
onClose={sidebar.onClose}
|
||||
placement="left"
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent bg={bg}>
|
||||
<DrawerCloseButton borderWidth="1px" />
|
||||
<DrawerBody>
|
||||
<SidebarContent pt="6" borderRight="none" />
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<Box ml={{ base: 0, md: 56 }} transition=".3s ease">
|
||||
<Box
|
||||
as="header"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
w="full"
|
||||
p="5"
|
||||
display={{ base: "inline-flex", md: "none" }}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="Menu"
|
||||
onClick={sidebar.onOpen}
|
||||
icon={<IoApps />}
|
||||
size="md"
|
||||
w="100%"
|
||||
variant="ghost"
|
||||
borderWidth="1px"
|
||||
/>
|
||||
</Box>
|
||||
<Box as="main" pt={{ base: "0", md: "6" }} pb={{ base: "0", md: "6" }}>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
35
components/sidebar/item.js
Normal file
35
components/sidebar/item.js
Normal file
@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
import { useRouter } from 'next/router';
|
||||
import { Flex, Icon, useColorModeValue } from "@chakra-ui/react";
|
||||
import { FiExternalLink } from "react-icons/fi";
|
||||
import Tap from "animations/tap";
|
||||
|
||||
const Item = (props) => {
|
||||
|
||||
const { icon, external, children, href, ...rest } = props;
|
||||
const { pathname } = useRouter();
|
||||
const isActive = pathname === href;
|
||||
const borderColor = useColorModeValue("dark.800", "white");
|
||||
|
||||
return (
|
||||
<Tap>
|
||||
<Flex
|
||||
align="center"
|
||||
px="5"
|
||||
pl="4"
|
||||
py="4"
|
||||
cursor="pointer"
|
||||
transition=".15s ease"
|
||||
borderColor={borderColor}
|
||||
borderLeftWidth={isActive ? "2px" : ''}
|
||||
{...rest}
|
||||
>
|
||||
{icon && <Icon ml="2" mr="4" boxSize="6" as={icon} />}
|
||||
{children}
|
||||
{external && <Icon ml="3" mr="4" boxSize="4" as={FiExternalLink} />}
|
||||
</Flex>
|
||||
</Tap>
|
||||
);
|
||||
};
|
||||
|
||||
export default Item;
|
||||
28
components/sidebar/links.js
Normal file
28
components/sidebar/links.js
Normal file
@ -0,0 +1,28 @@
|
||||
import { IoHomeOutline, IoLogoGithub } from 'react-icons/io5';
|
||||
import { FiTwitter } from 'react-icons/fi';
|
||||
|
||||
const SidebarLinks = [
|
||||
{
|
||||
id: 1,
|
||||
href: "/",
|
||||
external: false,
|
||||
title: "Browse",
|
||||
icon: IoHomeOutline,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
href: "https://github.com/pheralb/svgl/",
|
||||
external: true,
|
||||
title: "Github",
|
||||
icon: IoLogoGithub,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
href: "https://twitter.com/pheralb_",
|
||||
external: true,
|
||||
title: "Twitter",
|
||||
icon: FiTwitter,
|
||||
}
|
||||
];
|
||||
|
||||
export default SidebarLinks;
|
||||
30
components/sidebar/logo.js
Normal file
30
components/sidebar/logo.js
Normal file
@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { HStack, Icon, Text } from "@chakra-ui/react";
|
||||
import { svgl } from "components/svg";
|
||||
import Tap from "animations/tap";
|
||||
|
||||
const Logo = () => {
|
||||
return (
|
||||
<Tap>
|
||||
<Link href="/" passHref>
|
||||
<HStack cursor="pointer">
|
||||
<Icon
|
||||
as={svgl}
|
||||
name="logo"
|
||||
boxSize="30px"
|
||||
mr="2"
|
||||
ml="1"
|
||||
borderRadius="full"
|
||||
bg="transparent"
|
||||
/>
|
||||
<Text fontSize="2xl" ml="2">
|
||||
svgl
|
||||
</Text>
|
||||
</HStack>
|
||||
</Link>
|
||||
</Tap>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
@ -300,6 +300,20 @@ const Icons = [
|
||||
category: "Social",
|
||||
url: "https://www.linkedin.com/",
|
||||
},
|
||||
{
|
||||
id: 44,
|
||||
href:"/library/telegram.svg",
|
||||
title: "Telegram",
|
||||
category: "Social",
|
||||
url: "https://web.telegram.org/",
|
||||
},
|
||||
{
|
||||
id: 45,
|
||||
href: "/library/whatsapp.svg",
|
||||
title: "WhatsApp",
|
||||
category: "Social",
|
||||
url: "https://web.whatsapp.com/",
|
||||
}
|
||||
];
|
||||
|
||||
export default Icons;
|
||||
|
||||
38
package-lock.json
generated
38
package-lock.json
generated
@ -19,6 +19,7 @@
|
||||
"next": "12.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-hot-toast": "^2.2.0",
|
||||
"react-icons": "^4.3.1",
|
||||
"swr": "^1.2.2"
|
||||
},
|
||||
@ -3194,6 +3195,14 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/goober": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
|
||||
"integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
|
||||
"peerDependencies": {
|
||||
"csstype": "^3.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@ -4194,6 +4203,21 @@
|
||||
"react": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hot-toast": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
|
||||
"integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
|
||||
"dependencies": {
|
||||
"goober": "^2.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16",
|
||||
"react-dom": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
|
||||
@ -7229,6 +7253,12 @@
|
||||
"slash": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"goober": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz",
|
||||
"integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@ -7944,6 +7974,14 @@
|
||||
"use-sidecar": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"react-hot-toast": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz",
|
||||
"integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==",
|
||||
"requires": {
|
||||
"goober": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"react-icons": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "svgl",
|
||||
"version": "1.0.7",
|
||||
"version": "1.2.0",
|
||||
"description": "Beautiful SVG vector logos",
|
||||
"author": "pheralb",
|
||||
"license": "MIT",
|
||||
@ -21,6 +21,7 @@
|
||||
"next": "12.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"react-hot-toast": "^2.2.0",
|
||||
"react-icons": "^4.3.1",
|
||||
"swr": "^1.2.2"
|
||||
},
|
||||
|
||||
@ -5,9 +5,9 @@ import Head from "next/head";
|
||||
import { ChakraProvider, Container } from "@chakra-ui/react";
|
||||
|
||||
// 📦 Components ->
|
||||
import Sidebar from "components/sidebar";
|
||||
import Layout from "components/layout";
|
||||
import Header from "components/header";
|
||||
import Footer from "components/footer";
|
||||
import Footer from "components/sidebar/by";
|
||||
|
||||
// 💙 Global CSS ->
|
||||
import "styles/globals.css";
|
||||
@ -17,6 +17,7 @@ import theme from "styles/theme";
|
||||
|
||||
// 🐢 Animations ->
|
||||
import Transitions from "animations/transitions";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
|
||||
function MyApp({ Component, pageProps, router }) {
|
||||
return (
|
||||
@ -26,31 +27,47 @@ function MyApp({ Component, pageProps, router }) {
|
||||
|
||||
<title>SVGL - Beautiful SVG vector logos</title>
|
||||
<meta property="og:title" content="SVGL - Beautiful SVG vector logos" />
|
||||
<meta property="og:description" content="Beautiful SVG logos. Free and open source."/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Beautiful SVG logos. Free and open source."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://svgl.vercel.app/" />
|
||||
<meta property="og:image" content="https://svgl.vercel.app/images/banner.png" />
|
||||
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://svgl.vercel.app/images/banner.png"
|
||||
/>
|
||||
|
||||
<meta name="twitter:site" content="@pheralb_" />
|
||||
<meta property="twitter:title" content="SVGL - Beautiful SVG vector logos" />
|
||||
<meta
|
||||
property="twitter:title"
|
||||
content="SVGL - Beautiful SVG vector logos"
|
||||
/>
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:creator" content="@pheralb" />
|
||||
<meta property="twitter:description" content="Beautiful SVG logos. Free and open source." />
|
||||
<meta name="twitter:image" content="https://svgl.vercel.app/images/banner.png" />
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Beautiful SVG logos. Free and open source."
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="https://svgl.vercel.app/images/banner.png"
|
||||
/>
|
||||
|
||||
<meta name="keywords" content="svg,vector,logo,logos,download" />
|
||||
<meta content="#16161a" name="theme-color" />
|
||||
<link rel="icon" href="/icons/icon.ico" />
|
||||
</Head>
|
||||
<ChakraProvider theme={theme}>
|
||||
<Header />
|
||||
<Layout>
|
||||
<Transitions key={router.route}>
|
||||
<Component {...pageProps} />
|
||||
</Transitions>
|
||||
</Layout>
|
||||
<Footer />
|
||||
<Sidebar>
|
||||
<Layout>
|
||||
<Transitions key={router.route}>
|
||||
<Component {...pageProps} />
|
||||
</Transitions>
|
||||
</Layout>
|
||||
</Sidebar>
|
||||
</ChakraProvider>
|
||||
<Toaster position="bottom-center" reverseOrder={false} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,16 +8,6 @@ export default function Index() {
|
||||
<>
|
||||
<Box mt="6">
|
||||
<Box w="full" border="solid 1px transparent">
|
||||
<chakra.h1
|
||||
fontSize={{ base: "25px", sm: "35px", md: "5xl", lg: "6xl" }}
|
||||
letterSpacing="tight"
|
||||
textAlign="center"
|
||||
lineHeight="short"
|
||||
fontWeight="extrabold"
|
||||
mb="3"
|
||||
>
|
||||
Beautiful SVG vector logos
|
||||
</chakra.h1>
|
||||
<Search />
|
||||
<Box mt={{ base: 4, md: 8 }}>
|
||||
<Items />
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
SimpleGrid,
|
||||
Button,
|
||||
Image,
|
||||
Container,
|
||||
Center,
|
||||
} from "@chakra-ui/react";
|
||||
import { useRouter } from "next/router";
|
||||
@ -56,73 +55,68 @@ export default function Icon() {
|
||||
<title>{data.title} - SVGL</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" }}
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoArrowBackOutline />}
|
||||
fontWeight="light"
|
||||
variant="ghost"
|
||||
mb="4"
|
||||
>
|
||||
Continue discovering
|
||||
</Button>
|
||||
</Link>
|
||||
<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"
|
||||
>
|
||||
<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" }} w="100%" mt="2">
|
||||
<Button
|
||||
w={{ base: "100%", md: "auto" }}
|
||||
mb={{ base: "2", md: "0" }}
|
||||
leftIcon={<IoCloudDownloadOutline />}
|
||||
variant="primary"
|
||||
fontWeight="light"
|
||||
mr="2"
|
||||
onClick={() => downloadSvg(data.href)}
|
||||
>
|
||||
{data.title}
|
||||
</chakra.h1>
|
||||
<Flex direction={{ base: "column", md: "row" }} w="100%" mt="2">
|
||||
Download .svg
|
||||
</Button>
|
||||
<Link href={data.url} passHref>
|
||||
<Button
|
||||
w={{ base: "100%", md: "auto" }}
|
||||
mb={{ base: "2", md: "0" }}
|
||||
leftIcon={<IoCloudDownloadOutline />}
|
||||
variant="primary"
|
||||
fontWeight="light"
|
||||
mr="2"
|
||||
onClick={() => downloadSvg(data.href)}
|
||||
borderWidth="1px"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
>
|
||||
Download .svg
|
||||
{data.title} website
|
||||
</Button>
|
||||
<Link href={data.url} passHref>
|
||||
<Button
|
||||
w={{ base: "100%", md: "auto" }}
|
||||
fontWeight="light"
|
||||
borderWidth="1px"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
>
|
||||
{data.title} website
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Link>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoArrowBackOutline />}
|
||||
variant="outline"
|
||||
fontWeight="light"
|
||||
w="100%"
|
||||
border="0"
|
||||
mt="4"
|
||||
mb="4"
|
||||
>
|
||||
Continue discovering
|
||||
</Button>
|
||||
</Link>
|
||||
</Container>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
|
||||
BIN
public/fonts/Inter-Medium.woff2
Normal file
BIN
public/fonts/Inter-Medium.woff2
Normal file
Binary file not shown.
BIN
public/fonts/Satoshi-Bold.woff2
Normal file
BIN
public/fonts/Satoshi-Bold.woff2
Normal file
Binary file not shown.
BIN
public/fonts/Satoshi-Medium.woff2
Normal file
BIN
public/fonts/Satoshi-Medium.woff2
Normal file
Binary file not shown.
BIN
public/fonts/Satoshi-Regular.woff2
Normal file
BIN
public/fonts/Satoshi-Regular.woff2
Normal file
Binary file not shown.
BIN
public/fonts/coolvetica.woff2
Normal file
BIN
public/fonts/coolvetica.woff2
Normal file
Binary file not shown.
BIN
public/images/post.png
Normal file
BIN
public/images/post.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
7
public/library/remix.svg
Normal file
7
public/library/remix.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
9
public/library/telegram.svg
Normal file
9
public/library/telegram.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
7
public/library/whatsapp.svg
Normal file
7
public/library/whatsapp.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -1,27 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "Poppins-Regular";
|
||||
src: url("/fonts/Poppins-Regular.woff2") format('woff2');
|
||||
font-family: "Inter-Medium";
|
||||
src: url("/fonts/Inter-Medium.woff2") format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #696969;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ const theme = extendTheme(
|
||||
},
|
||||
},
|
||||
fonts: {
|
||||
body: "Poppins-Regular, sans-serif",
|
||||
body: "Inter-Medium, sans-serif",
|
||||
heading: "Poppins-Regular, sans-serif",
|
||||
},
|
||||
styles: {
|
||||
@ -40,7 +40,7 @@ const theme = extendTheme(
|
||||
"html, body": {
|
||||
height: "100%",
|
||||
maxHeight: "100vh",
|
||||
backgroundColor: mode("light.100", "lightDark.900")(props),
|
||||
backgroundColor: mode("gray.100", "lightDark.900")(props),
|
||||
},
|
||||
}),
|
||||
borderColor: "red",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user