mirror of
https://github.com/pheralb/svgl.git
synced 2024-09-20 11:16:19 +08:00
Design improvements and bug fixes
This commit is contained in:
pheralb
parent
b67dcc0be9
commit
7409e7b9be
@ -3,7 +3,7 @@ import { motion } from "framer-motion";
|
||||
|
||||
const Tap = ({ children }) => {
|
||||
return (
|
||||
<motion.div whileTap={{ scale: 0.99 }}>
|
||||
<motion.div whileTap={{ scale: 0.98 }}>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@ -24,6 +24,8 @@ import Hover from "animations/tap";
|
||||
import Show from "animations/show";
|
||||
import { svgl } from "components/svg";
|
||||
import HEADER_LINKS from "./links";
|
||||
import Search from "components/search";
|
||||
import ModalSearch from "components/search/modal";
|
||||
|
||||
const Header = () => {
|
||||
const mobileNav = useDisclosure();
|
||||
@ -78,7 +80,8 @@ const Header = () => {
|
||||
))}
|
||||
</HStack>
|
||||
<HStack display="flex" alignItems="center">
|
||||
<HStack spacing={3} display={{ base: "none", md: "inline-flex" }}>
|
||||
<HStack spacing={4} display={{ base: "none", md: "inline-flex" }}>
|
||||
<ModalSearch />
|
||||
<Link href="https://github.com/pheralb/svgl" passHref>
|
||||
<IconButton
|
||||
aria-label="Github Repository"
|
||||
@ -129,6 +132,7 @@ const Header = () => {
|
||||
passHref
|
||||
>
|
||||
<Button
|
||||
as="a"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
@ -140,6 +144,7 @@ const Header = () => {
|
||||
</Link>
|
||||
<Link href="https://github.com/pheralb/svgl" passHref>
|
||||
<Button
|
||||
as="a"
|
||||
bg="transparent"
|
||||
border="0"
|
||||
variant="outline"
|
||||
|
||||
42
components/search/modal.js
Normal file
42
components/search/modal.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
useDisclosure,
|
||||
IconButton,
|
||||
Button,
|
||||
} from "@chakra-ui/react";
|
||||
import Search from "components/search";
|
||||
import { IoSearch } from "react-icons/io5";
|
||||
|
||||
const ModalSearch = (props) => {
|
||||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
aria-label="Search Icon"
|
||||
bg="transparent"
|
||||
icon={<IoSearch size="25"/>}
|
||||
onClick={onOpen}
|
||||
{...props}
|
||||
/>
|
||||
<Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom'>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader fontWeight="light">Search</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody pb="5">
|
||||
<Search />
|
||||
</ModalBody>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalSearch;
|
||||
@ -1258,29 +1258,15 @@ export const svgl = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const rocket = (props) => {
|
||||
export const framer = (props) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
viewBox="0 0 256 384"
|
||||
{...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>
|
||||
<path d="M0 0h256v128H128L0 0zm0 128h128l128 128H128v128L0 256V128z"></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -272,6 +272,13 @@ const Icons = [
|
||||
category: "Search",
|
||||
url: "https://www.google.com/",
|
||||
},
|
||||
{
|
||||
id: 40,
|
||||
href: "/library/framer.svg",
|
||||
title: "Framer",
|
||||
category: "Design",
|
||||
url: "https://framer.com/",
|
||||
}
|
||||
];
|
||||
|
||||
export default Icons;
|
||||
|
||||
@ -30,10 +30,9 @@ function MyApp({ Component, pageProps, router }) {
|
||||
<meta property="og:image" content="/images/banner.png" />
|
||||
<meta property="twitter:title" content="SVGL - Beautiful SVG logos" />
|
||||
<meta property="twitter:url" content="https://svgl.vercel.app/" />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:creator" content="@pheralb" />
|
||||
<meta property="twitter:description" content="Beautiful SVG logos. Free and open source." />
|
||||
<meta property="twitter:image:src" content="/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" />
|
||||
|
||||
@ -40,7 +40,13 @@ export default function Icon() {
|
||||
if (!data) return <Loader />;
|
||||
|
||||
const downloadSvg = (name, url) => {
|
||||
confetti();
|
||||
confetti({
|
||||
particleCount: 200,
|
||||
startVelocity: 30,
|
||||
spread: 300,
|
||||
gravity: 1.2,
|
||||
origin: { y: 0 },
|
||||
});
|
||||
download(url);
|
||||
};
|
||||
|
||||
@ -78,8 +84,10 @@ export default function Icon() {
|
||||
>
|
||||
{data.title}
|
||||
</chakra.h1>
|
||||
<Flex direction={{ base: "column", md: "row" }} mt="2">
|
||||
<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"
|
||||
@ -90,6 +98,7 @@ export default function Icon() {
|
||||
</Button>
|
||||
<Link href={data.url} passHref>
|
||||
<Button
|
||||
w={{ base: "100%", md: "auto" }}
|
||||
fontWeight="light"
|
||||
borderWidth="1px"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
|
||||
7
public/library/framer.svg
Normal file
7
public/library/framer.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256px" height="384px" viewBox="0 0 256 384" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
|
||||
<title>Framer</title>
|
||||
<g>
|
||||
<path d="M0,0 L256,0 L256,128 L128,128 L0,0 Z M0,128 L128,128 L256,256 L128,256 L128,384 L0,256 L0,128 Z" fill="#000000"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 405 B |
@ -13,12 +13,12 @@
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #16161a;
|
||||
background: #696969;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(133, 133, 133);
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user