mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
New design, new icons and license added
This commit is contained in:
pheralb
+20
-18
@@ -5,24 +5,26 @@ import Hover from "animations/hover";
|
||||
|
||||
const Index = ({ title, url, href }) => {
|
||||
return (
|
||||
<Hover>
|
||||
<Link href={url} passHref>
|
||||
<Box
|
||||
shadow="sm"
|
||||
_hover={{ shadow: "md", border: "1px", borderColor: "#4bbfb7" }}
|
||||
borderWidth="1px"
|
||||
p={4}
|
||||
cursor="pointer"
|
||||
>
|
||||
<Center>
|
||||
<Image src={href} alt={title} boxSize="60px" />
|
||||
</Center>
|
||||
<Text mt="2" fontWeight="light" textAlign={"center"}>
|
||||
{title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Link>
|
||||
</Hover>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,20 +1,6 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
SimpleGrid,
|
||||
Button,
|
||||
Container,
|
||||
Center,
|
||||
Text,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
IoAlertOutline,
|
||||
IoArrowBackOutline,
|
||||
IoHome,
|
||||
IoShapesOutline,
|
||||
} from "react-icons/io5";
|
||||
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";
|
||||
|
||||
|
||||
+61
-23
@@ -15,26 +15,42 @@ import {
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import Dark from "components/header/dark";
|
||||
import { IoApps, IoLogoGithub, IoLogoTwitter } from "react-icons/io5";
|
||||
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 (
|
||||
<>
|
||||
<chakra.header
|
||||
<Box
|
||||
w="full"
|
||||
px={{ base: 2, md: 6 }}
|
||||
bg={bg}
|
||||
py={6}
|
||||
pb="0"
|
||||
mt="5"
|
||||
mb="5"
|
||||
px={{ base: 3, md: 5 }}
|
||||
py="3"
|
||||
pb="3"
|
||||
borderRadius={borderRadius}
|
||||
borderBottomWidth={border}
|
||||
shadow="sm"
|
||||
pos="sticky"
|
||||
top="0"
|
||||
top="2"
|
||||
zIndex="1000"
|
||||
>
|
||||
<Container maxW="container.xxl" pb="4">
|
||||
<Show>
|
||||
<Flex alignItems="center" justifyContent="space-between" mx="auto">
|
||||
<Hover>
|
||||
<Link href="/" passHref>
|
||||
@@ -48,7 +64,7 @@ const Header = () => {
|
||||
<VisuallyHidden>iconr</VisuallyHidden>
|
||||
</chakra.a>
|
||||
<chakra.h1
|
||||
fontSize="3xl"
|
||||
fontSize="2xl"
|
||||
fontWeight="bold"
|
||||
fontFamily="Eina-Bold"
|
||||
ml="3"
|
||||
@@ -68,7 +84,13 @@ const Header = () => {
|
||||
href="https://github.com/pheralb/iconr/tree/main/public/library"
|
||||
passHref
|
||||
>
|
||||
<Button variant="ghost">Library</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
fontWeight="light"
|
||||
>
|
||||
Library
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://twitter.com/iconrhq" passHref>
|
||||
<IconButton
|
||||
@@ -101,45 +123,61 @@ const Header = () => {
|
||||
/>
|
||||
<VStack
|
||||
pos="absolute"
|
||||
borderBottomWidth="1px"
|
||||
borderWidth="2px"
|
||||
bg={bg}
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
display={mobileNav.isOpen ? "flex" : "none"}
|
||||
flexDirection="column"
|
||||
pt="4"
|
||||
pb={4}
|
||||
m={2}
|
||||
spacing={3}
|
||||
rounded="sm"
|
||||
shadow="sm"
|
||||
>
|
||||
<CloseButton
|
||||
aria-label="Close menu"
|
||||
<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 variant="ghost">Library</Button>
|
||||
</Link>
|
||||
<Link href="https://github.com/pheralb/iconr" passHref>
|
||||
<IconButton
|
||||
aria-label="Github Repository"
|
||||
<Button
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
icon={<IoLogoGithub size="25" />}
|
||||
/>
|
||||
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>
|
||||
</Container>
|
||||
</chakra.header>
|
||||
</Show>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from "react";
|
||||
import useSWR from "swr";
|
||||
import Grid from "components/grid";
|
||||
import Card from "components/card";
|
||||
import SideItem from "components/sidebar/sideItem";
|
||||
import Loader from "animations/loader";
|
||||
import Link from "next/link";
|
||||
|
||||
const fetcher = (url) => fetch(url).then((res) => res.json());
|
||||
|
||||
const All = () => {
|
||||
const { data, error } = useSWR("/api/categories", fetcher);
|
||||
if (error) return <div>failed to load</div>;
|
||||
if (!data) return <Loader />;
|
||||
return (
|
||||
<>
|
||||
{data.map((category) => (
|
||||
<>
|
||||
<div key={category}>
|
||||
<Link href={`/category/${category}`} passHref>
|
||||
<SideItem
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
bg: "blackAlpha.300",
|
||||
}}
|
||||
>
|
||||
{category}
|
||||
</SideItem>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default All;
|
||||
@@ -18,7 +18,14 @@ import { Algolia } from "components/svg";
|
||||
const AutocompleteItem = ({ id, title, href, url }) => {
|
||||
return (
|
||||
<>
|
||||
<Box w="100%" id={id} borderWidth="1px" roundedTop={3} mt="3">
|
||||
<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" />
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const WithModal = () => {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default WithModal
|
||||
@@ -1,96 +0,0 @@
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerOverlay,
|
||||
Flex,
|
||||
Icon,
|
||||
IconButton,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from "@chakra-ui/react";
|
||||
import { IoAlbums, IoAlbumsOutline } from "react-icons/io5";
|
||||
import Categories from "components/items/categories";
|
||||
import SideItem from "./sideItem";
|
||||
|
||||
export default function Index({ children }) {
|
||||
const sidebar = useDisclosure();
|
||||
|
||||
const SidebarContent = (props) => (
|
||||
<Box
|
||||
as="nav"
|
||||
pos="fixed"
|
||||
zIndex="sticky"
|
||||
h={{ base: "full", md: "90%" }}
|
||||
pb="10"
|
||||
px={{ base: 2, md: 6 }}
|
||||
overflowX="hidden"
|
||||
overflowY="auto"
|
||||
bg="brand.600"
|
||||
w="30"
|
||||
{...props}
|
||||
>
|
||||
<Flex
|
||||
direction="column"
|
||||
as="nav"
|
||||
fontSize="sm"
|
||||
aria-label="Main Navigation"
|
||||
pt="2"
|
||||
>
|
||||
<SideItem
|
||||
fontWeight="semibold"
|
||||
fontSize="18px"
|
||||
borderBottomWidth="1px"
|
||||
borderRadius="0px"
|
||||
mb="3"
|
||||
>
|
||||
<Icon as={IoAlbumsOutline} mr="2" />
|
||||
Categories
|
||||
</SideItem>
|
||||
<Categories />
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
return (
|
||||
<Box as="section" minH="100vh">
|
||||
<SidebarContent display={{ base: "none", md: "unset" }} />
|
||||
<Drawer
|
||||
isOpen={sidebar.isOpen}
|
||||
onClose={sidebar.onClose}
|
||||
placement="left"
|
||||
>
|
||||
<DrawerOverlay />
|
||||
<DrawerContent>
|
||||
<SidebarContent w="full" borderRight="none" />
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<Box ml={{ base: 0, md: "60" }} transition=".3s ease">
|
||||
<Flex
|
||||
as="header"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
w="full"
|
||||
px="4"
|
||||
h="14"
|
||||
display={{ base: "inline-flex", md: "none" }}
|
||||
>
|
||||
<Button
|
||||
onClick={sidebar.onOpen}
|
||||
leftIcon={<IoAlbumsOutline />}
|
||||
size="md"
|
||||
borderWidth="1px"
|
||||
bg="transparent"
|
||||
w="100%"
|
||||
>
|
||||
Categories
|
||||
</Button>
|
||||
</Flex>
|
||||
<Box as="main" p="4">
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import React from "react";
|
||||
import { Flex } from "@chakra-ui/react";
|
||||
|
||||
const SideItem = (props) => {
|
||||
const { icon, children, ...rest } = props;
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
px="4"
|
||||
mx="2"
|
||||
rounded="md"
|
||||
py="3"
|
||||
role="group"
|
||||
transition=".15s ease"
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideItem;
|
||||
@@ -1144,3 +1144,97 @@ export const atom = (props) => {
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const youtube = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="256"
|
||||
height="180"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
viewBox="0 0 256 180"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="red"
|
||||
d="M250.346 28.075A32.18 32.18 0 00227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 005.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0022.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0022.657-22.657c6.338-35.348 8.291-89.1-.164-123.134z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FFF"
|
||||
d="M102.420513 128.06L168.749025 89.642 102.420513 51.224z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const astro = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="256"
|
||||
height="264"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
viewBox="0 0 256 264"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="Astro-linearGradient-1"
|
||||
x1="137.073%"
|
||||
x2="85.999%"
|
||||
y1="-40.996%"
|
||||
y2="56.205%"
|
||||
>
|
||||
<stop offset="0%" stopColor="#FF1639"></stop>
|
||||
<stop offset="100%" stopColor="#FF1639" stopOpacity="0"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
fill="#000"
|
||||
d="M156.377 4.834c1.575 1.956 2.379 4.595 3.986 9.874l35.105 115.32a146.081 146.081 0 00-41.97-14.209l-22.857-77.24a2.975 2.975 0 00-5.708.008l-22.58 77.193a146.086 146.086 0 00-42.159 14.23L95.471 14.682c1.612-5.27 2.418-7.904 3.994-9.857A12.97 12.97 0 01104.72.936C107.048 0 109.804 0 115.315 0h25.196c5.518 0 8.277 0 10.607.938a13.016 13.016 0 015.259 3.896z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FF5D01"
|
||||
d="M160.577 135.516c-5.787 4.949-17.338 8.324-30.643 8.324-16.33 0-30.017-5.084-33.65-11.922-1.298 3.92-1.589 8.404-1.589 11.269 0 0-.856 14.068 8.929 23.852a9.199 9.199 0 019.2-9.198c8.707 0 8.697 7.596 8.69 13.76l-.001.55c0 9.355 5.718 17.375 13.85 20.757a18.86 18.86 0 01-1.896-8.268c0-8.923 5.238-12.246 11.326-16.108 4.845-3.072 10.227-6.485 13.936-13.332a25.145 25.145 0 003.034-12.013 25.24 25.24 0 00-1.186-7.67z"
|
||||
></path>
|
||||
<path
|
||||
fill="url(#Astro-linearGradient-1)"
|
||||
d="M160.577 135.516c-5.787 4.949-17.338 8.324-30.643 8.324-16.33 0-30.017-5.084-33.65-11.922-1.298 3.92-1.589 8.404-1.589 11.269 0 0-.856 14.068 8.929 23.852a9.199 9.199 0 019.2-9.198c8.707 0 8.697 7.596 8.69 13.76l-.001.55c0 9.355 5.718 17.375 13.85 20.757a18.86 18.86 0 01-1.896-8.268c0-8.923 5.238-12.246 11.326-16.108 4.845-3.072 10.227-6.485 13.936-13.332a25.145 25.145 0 003.034-12.013 25.24 25.24 0 00-1.186-7.67z"
|
||||
></path>
|
||||
<path
|
||||
fill="#000"
|
||||
d="M28.014 221.64c15.874 0 24.2 5.68 24.2 16.418v10.464c.006 4.954.09 7.704.389 10.311l.062.52c.109.866.242 1.732.405 2.673h-7.704c-.389-2.49-.544-5.214-.544-8.093-4.591 6.458-12.45 9.571-25.446 9.571-11.75 0-19.376-4.28-19.376-11.672 0-3.502 1.478-6.537 4.124-8.482 2.802-2.023 6.459-3.424 16.341-3.969l24.279-1.4v-.779c0-6.225-6.225-9.882-16.73-9.882-10.661 0-17.12 3.035-18.365 8.793H1.48c1.245-8.56 11.205-14.474 26.535-14.474zm58.86 0c13.384 0 22.021 3.579 25.912 9.649l-6.303 3.034c-3.735-4.824-9.416-7.003-20.31-7.003-9.571 0-14.007 2.101-14.007 6.147 0 3.19 2.88 4.67 8.015 5.058l18.91 1.479c10.116.856 14.084 4.124 14.084 10.505 0 7.704-6.459 12.995-22.566 12.995-14.24 0-22.567-4.046-27.314-11.205l6.148-3.346c3.502 5.68 10.738 8.793 22.177 8.793 9.416 0 14.163-2.18 14.163-6.77 0-3.19-1.868-4.436-8.015-4.903l-18.754-1.478c-9.26-.778-14.162-4.046-14.162-10.816 0-7.548 8.248-12.14 22.022-12.14zm141.19 0c16.575 0 27.936 8.403 27.936 20.932 0 12.528-11.361 20.932-27.936 20.932-16.574 0-27.935-8.404-27.935-20.932 0-12.529 11.36-20.933 27.935-20.933zm-91.497-11.673v13.15h19.454v5.837h-19.454v18.053c0 6.692 3.658 9.338 10.427 9.338 3.19 0 6.46-.467 9.183-1.09v6.304c-1.946.856-6.381 1.556-10.038 1.556-14.396 0-17.042-7.704-17.042-15.407v-18.754H116.88v-5.836h12.217v-10.116l7.47-3.035zm55.203 11.984c2.1 0 3.502.077 5.136.467v7.159c-1.79-.312-3.113-.467-5.214-.467-6.147 0-9.649 1.712-12.373 4.746-3.112 3.269-4.202 8.015-4.202 13.618v14.552h-7.392v-38.908h6.848V234.4c2.256-7.548 8.87-12.45 17.197-12.45zM44.744 243.039l-22.8 1.4c-10.972.7-14.085 2.724-14.085 7.237 0 4.202 4.98 6.303 14.007 6.303 13.307 0 22.878-4.98 22.878-13.15v-1.79zm183.32-15.252c-12.217 0-20.076 5.758-20.076 14.785 0 9.026 7.86 14.785 20.076 14.785 12.14 0 20.077-5.759 20.077-14.785 0-9.027-7.938-14.785-20.077-14.785z"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const google = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="256"
|
||||
height="262"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
viewBox="0 0 256 262"
|
||||
>
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
|
||||
></path>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
|
||||
></path>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
|
||||
></path>
|
||||
<path
|
||||
fill="#EB4335"
|
||||
d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user