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

New svgs, bug fixes & new design page

Browse Source
This commit is contained in:
pheralb
2022-03-08 17:17:05 +00:00
parent dd4b1e364f
commit 8525415604
16 changed files with 482 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/design.js
+116
View File
@@ -0,0 +1,116 @@
import React from "react";
import Head from "next/head";
import download from "downloadjs";
import { Box, Button, Flex, HStack, Link, Text } from "@chakra-ui/react";
import Show from "animations/show";
import Grid from "components/grid";
import DesignCard from "components/card/design";
import { RiFontSize, RiPaletteLine } from "react-icons/ri";
import { IoMdImages } from "react-icons/io";
import { HiOutlineExternalLink } from "react-icons/hi";
import { IoCloudDownloadOutline } from "react-icons/io5";
import CardImage from "components/card/image";
const Design = () => {
const downloadSvg = (url) => {
download(url);
};
return (
<>
<Head>
<title>Design - SVGL</title>
</Head>
<Box mt="6">
<Box w="full" border="solid 1px transparent">
<Show>
<Text
as="h1"
fontSize={{ base: "25px", sm: "35px", md: "5xl", lg: "6xl" }}
letterSpacing="tight"
lineHeight="short"
fontWeight="extrabold"
mb="3"
>
Design
</Text>
</Show>
<Show delay={0.3}>
<Box mt={{ base: 4, md: 5 }}>
<Grid>
<DesignCard title="Fonts" icon={RiFontSize}>
<HStack spacing={2}>
<Link
href="https://fonts.google.com/specimen/Poppins"
isExternal
>
Poppins
</Link>
<HiOutlineExternalLink size="20px" />
</HStack>
</DesignCard>
<DesignCard title="Colors" icon={RiPaletteLine}>
<Flex color="white">
<Box bg="lightDark.900" p="2">
<Text fontSize="15px">#16161a</Text>
</Box>
<Box bg="light.100" p="2">
<Text fontSize="15px" color="black">
#f9f9f9
</Text>
</Box>
<Box bg="#6748E6" p="2">
<Text fontSize="15px" color="white">
#6748E6
</Text>
</Box>
</Flex>
</DesignCard>
</Grid>
<Box mt="4">
<DesignCard title="Images" icon={IoMdImages}>
<HStack spacing={3}>
<CardImage title="Banner" image="/images/banner.png">
<Button
w={{ base: "100%", md: "auto" }}
leftIcon={<IoCloudDownloadOutline />}
variant="primary"
fontWeight="light"
mt="2"
onClick={() =>
downloadSvg(
"https://svgl.vercel.app/images/banner.png"
)
}
>
Download
</Button>
</CardImage>
<CardImage title="Logo" image="/images/logo.png">
<Button
w={{ base: "100%", md: "auto" }}
leftIcon={<IoCloudDownloadOutline />}
variant="primary"
fontWeight="light"
mt="2"
onClick={() =>
downloadSvg(
"https://svgl.vercel.app/images/logo.png"
)
}
>
Download
</Button>
</CardImage>
</HStack>
</DesignCard>
</Box>
</Box>
</Show>
</Box>
</Box>
</>
);
};
export default Design;
pages/index.js
+4 -5
View File
@@ -1,8 +1,7 @@
import { chakra, Box, Container, Text, Flex, Icon } from "@chakra-ui/react";
import { chakra, Box } from "@chakra-ui/react";
import Search from "components/search";
import Items from "components/items/all";
import Show from "animations/show";
import { rocket } from "components/svg";
import Loader from "animations/loader";
export default function Index() {
return (
@@ -10,9 +9,9 @@ export default function Index() {
<Box mt="6">
<Box w="full" border="solid 1px transparent">
<chakra.h1
fontSize={{ base: "25px", sm: "35px", md: "6xl" }}
textAlign="center"
fontSize={{ base: "25px", sm: "35px", md: "5xl", lg: "6xl" }}
letterSpacing="tight"
textAlign="center"
lineHeight="short"
fontWeight="extrabold"
mb="3"
pages/svg/[id].js
+2 -2
View File
@@ -39,7 +39,7 @@ export default function Icon() {
if (error) return <Error />;
if (!data) return <Loader />;
const downloadSvg = (name, url) => {
const downloadSvg = (url) => {
confetti({
particleCount: 200,
startVelocity: 30,
@@ -92,7 +92,7 @@ export default function Icon() {
variant="primary"
fontWeight="light"
mr="2"
onClick={() => downloadSvg(data.title, data.href)}
onClick={() => downloadSvg(data.href)}
>
Download .svg
</Button>