Skip to content

Commit

Permalink
New design & bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@pheralb
pheralb committed Mar 3, 2022
1 parent 168b654 commit c3cebc9
Show file tree
Hide file tree
Showing 27 changed files with 1,282 additions and 1,113 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the

## 📦 Deployed on Vercel:

[https://svgparty.vercel.app/](https://svgparty.vercel.app/)
[https://svgl.vercel.app/](https://svgl.vercel.app/)
24 changes: 24 additions & 0 deletions animations/transitions.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";
import { motion } from "framer-motion";

const Transitions = ({ key, children }) => {
return (
<motion.div
key={key}
initial="initial"
animate="animate"
variants={{
initial: {
opacity: 0,
},
animate: {
opacity: 1,
},
}}
>
{children}
</motion.div>
);
};

export default Transitions;
53 changes: 23 additions & 30 deletions components/error/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
226 changes: 102 additions & 124 deletions components/header/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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>
</>
);
Expand Down
16 changes: 16 additions & 0 deletions components/header/links.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Loading

1 comment on commit c3cebc9

@vercel
Copy link

@vercel vercel bot commented on c3cebc9 Mar 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.