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

First commit

Browse Source
This commit is contained in:
pheralb
2022-01-16 22:27:55 +00:00
parent d56096e7f7
commit a1b3dd2706
45 changed files with 4227 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/header/dark.js
+37
View File
@@ -0,0 +1,37 @@
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;
components/header/index.js
+138
View File
@@ -0,0 +1,138 @@
import React from "react";
import {
chakra,
Box,
Flex,
VisuallyHidden,
HStack,
Button,
useDisclosure,
VStack,
IconButton,
CloseButton,
Container,
Image,
useColorModeValue,
} from "@chakra-ui/react";
import Dark from "components/header/dark";
import { IoApps, IoLogoGithub } from "react-icons/io5";
import Link from "next/link";
import Hover from "animations/hover";
const Header = () => {
const mobileNav = useDisclosure();
const bg = useColorModeValue("#fffffe", "#16161a");
return (
<>
<chakra.header
w="full"
px={{ base: 2, md: 6 }}
bg={bg}
py={6}
pb="0"
pos="sticky"
top="0"
zIndex="1000"
>
<Container maxW="container.xl" pb="4">
<Flex alignItems="center" justifyContent="space-between" mx="auto">
<Link href="/" passHref>
<Hover>
<Flex cursor="pointer">
<chakra.a title="iconr" display="flex" alignItems="center">
<Image
src="images/logo.png"
boxSize="25px"
alt="iconr logo"
/>
<VisuallyHidden>iconr</VisuallyHidden>
</chakra.a>
<chakra.h1
fontSize="3xl"
fontWeight="bold"
fontFamily="Eina-Bold"
ml="3"
>
iconr
</chakra.h1>
</Flex>
</Hover>
</Link>
<HStack display="flex" alignItems="center">
<HStack
spacing={2}
color="brand.500"
display={{ base: "none", md: "inline-flex" }}
>
<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"
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"
borderBottomWidth="1px"
bg={bg}
top={0}
left={0}
right={0}
display={mobileNav.isOpen ? "flex" : "none"}
flexDirection="column"
pb={4}
m={2}
spacing={3}
rounded="sm"
shadow="sm"
>
<CloseButton
aria-label="Close menu"
onClick={mobileNav.onClose}
/>
<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"
bg="transparent"
border="0"
variant="outline"
icon={<IoLogoGithub size="25" />}
/>
</Link>
<Dark />
</VStack>
</Box>
</HStack>
</Flex>
</Container>
</chakra.header>
</>
);
};
export default Header;
components/header/logo.js
+64
View File
@@ -0,0 +1,64 @@
import * as React from "react";
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>
);
}
export default Logo;