mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
New design & bug fixes
This commit is contained in:
pheralb
+23
-30
@@ -8,36 +8,29 @@ const Error = () => {
|
||||
return (
|
||||
<>
|
||||
<Show delay="0">
|
||||
<Container
|
||||
maxW={{ base: "100%", md: "75%" }}
|
||||
borderWidth="1px"
|
||||
borderRadius="30px"
|
||||
>
|
||||
<Box px={{ base: 4, lg: 20 }} py={{ base: "3", md: "24" }}>
|
||||
<Flex align="center" justify="center" direction="column" w="full">
|
||||
<Icon name="error" boxSize="80px" mb="3" as={IoShapesOutline} />
|
||||
<Text fontSize="40px" mb="2">
|
||||
Oh no!
|
||||
</Text>
|
||||
<Text fontSize="20px" mb="3">
|
||||
This page does not exist.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoHome />}
|
||||
colorScheme="twitter"
|
||||
variant="outline"
|
||||
fontWeight="bold"
|
||||
w="100%"
|
||||
border="0"
|
||||
mb="4"
|
||||
>
|
||||
Go home
|
||||
</Button>
|
||||
</Link>
|
||||
</Container>
|
||||
<Box px={{ base: 4, lg: 20 }} py={{ base: "3", md: "24" }}>
|
||||
<Flex align="center" justify="center" direction="column" w="full">
|
||||
<Icon name="error" boxSize="80px" mb="3" as={IoShapesOutline} />
|
||||
<Text fontSize="40px" mb="2">
|
||||
Oh no!
|
||||
</Text>
|
||||
<Text fontSize="20px" mb="3">
|
||||
This page does not exist.
|
||||
</Text>
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoHome />}
|
||||
colorScheme="twitter"
|
||||
variant="outline"
|
||||
fontWeight="bold"
|
||||
border="0"
|
||||
mb="4"
|
||||
>
|
||||
Go home
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
|
||||
+102
-124
@@ -1,18 +1,14 @@
|
||||
import React from "react";
|
||||
import {
|
||||
chakra,
|
||||
Box,
|
||||
Flex,
|
||||
VisuallyHidden,
|
||||
HStack,
|
||||
Button,
|
||||
useDisclosure,
|
||||
VStack,
|
||||
IconButton,
|
||||
CloseButton,
|
||||
Container,
|
||||
Image,
|
||||
useColorModeValue,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import Dark from "components/header/dark";
|
||||
import {
|
||||
@@ -22,160 +18,142 @@ import {
|
||||
IoLogoGithub,
|
||||
IoLogoTwitter,
|
||||
} from "react-icons/io5";
|
||||
import { BiLinkExternal } from "react-icons/bi";
|
||||
import Link from "next/link";
|
||||
import Hover from "animations/hover";
|
||||
import Show from "animations/show";
|
||||
import { BiLinkExternal } from "react-icons/bi";
|
||||
import { svgl } from "components/svg";
|
||||
import HEADER_LINKS from "./links";
|
||||
|
||||
const Header = () => {
|
||||
const mobileNav = useDisclosure();
|
||||
const bg = useColorModeValue("#fffffe", "#16161a");
|
||||
const border = useColorModeValue("0", "1px");
|
||||
const borderRadius = useColorModeValue("10px", "0");
|
||||
|
||||
const bg = useColorModeValue("light.100", "lightDark.900");
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
w="full"
|
||||
bg={bg}
|
||||
mt="5"
|
||||
mb="5"
|
||||
px={{ base: 3, md: 5 }}
|
||||
py="3"
|
||||
pb="3"
|
||||
borderRadius={borderRadius}
|
||||
borderBottomWidth={border}
|
||||
shadow="sm"
|
||||
px={{ base: 3, md: 16 }}
|
||||
pl={{ base: 3, md: 16 }}
|
||||
py="5"
|
||||
pos="sticky"
|
||||
top="2"
|
||||
top="0"
|
||||
zIndex="1000"
|
||||
>
|
||||
<Show>
|
||||
<Flex alignItems="center" justifyContent="space-between" mx="auto">
|
||||
<Flex alignItems="center" justifyContent="space-between" mx="auto">
|
||||
<HStack spacing="1" alignItems="center">
|
||||
<Hover>
|
||||
<Link href="/" passHref>
|
||||
<Flex cursor="pointer">
|
||||
<chakra.a title="SVGParty" display="flex" alignItems="center">
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
boxSize="25px"
|
||||
alt="SVGParty logo"
|
||||
/>
|
||||
<VisuallyHidden>SVGParty</VisuallyHidden>
|
||||
</chakra.a>
|
||||
<chakra.h1
|
||||
fontSize="1xl"
|
||||
fontWeight="bold"
|
||||
ml="3"
|
||||
>
|
||||
SVGParty
|
||||
</chakra.h1>
|
||||
</Flex>
|
||||
<IconButton
|
||||
as={svgl}
|
||||
cursor="pointer"
|
||||
name="logo"
|
||||
boxSize="40px"
|
||||
mr="2"
|
||||
borderRadius="full"
|
||||
bg="transparent"
|
||||
/>
|
||||
</Link>
|
||||
</Hover>
|
||||
<HStack display="flex" alignItems="center">
|
||||
<HStack
|
||||
spacing={2}
|
||||
color="brand.500"
|
||||
display={{ base: "none", md: "inline-flex" }}
|
||||
{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={3} display={{ base: "none", md: "inline-flex" }}>
|
||||
<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/SVGParty/tree/main/public/library"
|
||||
href="https://github.com/pheralb/svgl/tree/main/public/library"
|
||||
passHref
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
leftIcon={<IoBookOutline size="25" />}
|
||||
fontWeight="light"
|
||||
>
|
||||
Library
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://twitter.com/SVGPartyhq" passHref>
|
||||
<IconButton
|
||||
aria-label="Twitter profile"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
icon={<IoLogoTwitter size="25" />}
|
||||
/>
|
||||
</Link>
|
||||
<Link href="https://github.com/pheralb/SVGParty" passHref>
|
||||
<IconButton
|
||||
aria-label="Github Repository"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
icon={<IoLogoGithub size="25" />}
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
<Link href="https://github.com/pheralb/svgl" passHref>
|
||||
<Button
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
leftIcon={<IoCloseSharp size="25" />}
|
||||
leftIcon={<IoLogoGithub size="25" />}
|
||||
fontWeight="light"
|
||||
onClick={mobileNav.onClose}
|
||||
>
|
||||
Close
|
||||
Github
|
||||
</Button>
|
||||
<Link
|
||||
href="https://github.com/pheralb/SVGParty/tree/main/public/library"
|
||||
passHref
|
||||
>
|
||||
<Button
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
leftIcon={<IoBookOutline size="25" />}
|
||||
fontWeight="light"
|
||||
>
|
||||
Library
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://github.com/pheralb/SVGParty" passHref>
|
||||
<Button
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
leftIcon={<IoLogoGithub size="25" />}
|
||||
fontWeight="light"
|
||||
>
|
||||
Github
|
||||
</Button>
|
||||
</Link>
|
||||
<Dark />
|
||||
</VStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</Show>
|
||||
</Link>
|
||||
<Dark />
|
||||
</VStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
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;
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import { Box } from "@chakra-ui/react";
|
||||
|
||||
const Index = ({ children }) => {
|
||||
return (
|
||||
<Box as="main" px={{ base: 3, md: 16 }} pl={{ base: 3, md: 16 }}>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
+22
-44
@@ -2,15 +2,16 @@ import { useMemo, useRef, useState } from "react";
|
||||
import { createAutocomplete } from "@algolia/autocomplete-core";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
chakra,
|
||||
Box,
|
||||
Input,
|
||||
InputLeftElement,
|
||||
InputGroup,
|
||||
Image,
|
||||
Center,
|
||||
Button,
|
||||
Flex,
|
||||
HStack,
|
||||
Text,
|
||||
Image,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import { IoCloudDownloadOutline, IoLink, IoSearch } from "react-icons/io5";
|
||||
import { Algolia } from "components/svg";
|
||||
@@ -18,47 +19,24 @@ import { Algolia } from "components/svg";
|
||||
const AutocompleteItem = ({ id, title, href, url }) => {
|
||||
return (
|
||||
<>
|
||||
<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" />
|
||||
</Center>
|
||||
<chakra.h2 fontSize={{ base: "2xl", md: "2xl" }} fontWeight="bold">
|
||||
{title}
|
||||
</chakra.h2>
|
||||
<Box mt="3">
|
||||
<Link href={href} passHref>
|
||||
<Button
|
||||
leftIcon={<IoCloudDownloadOutline />}
|
||||
colorScheme="black"
|
||||
variant="outline"
|
||||
bg="transparent"
|
||||
fontWeight="light"
|
||||
mr="2"
|
||||
>
|
||||
Download .svg
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={url} passHref>
|
||||
<Button
|
||||
rightIcon={<IoLink />}
|
||||
colorScheme="teal"
|
||||
variant="outline"
|
||||
border="0"
|
||||
>
|
||||
{title} website
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<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={IoLink} />
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -71,7 +49,7 @@ export default function Search(props) {
|
||||
const autocomplete = useMemo(
|
||||
() =>
|
||||
createAutocomplete({
|
||||
placeholder: "Search icons...",
|
||||
placeholder: "Search svgs...",
|
||||
onStateChange: ({ state }) => setAutocompleteState(state),
|
||||
getSources: () => [
|
||||
{
|
||||
|
||||
@@ -1238,3 +1238,49 @@ export const google = (props) => {
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const svgl = (props) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
|
||||
<circle
|
||||
cx="256"
|
||||
cy="256"
|
||||
r="208"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="32"
|
||||
></circle>
|
||||
<circle cx="288" cy="200" r="24" fill="currentColor"></circle>
|
||||
<circle cx="296" cy="128" r="24" fill="currentColor"></circle>
|
||||
<circle cx="360" cy="168" r="24" fill="currentColor"></circle>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const rocket = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="32"
|
||||
d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z"
|
||||
></path>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="32"
|
||||
d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user