qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix design bugs

Browse Source
This commit is contained in:
pheralb 2022-02-12 12:36:54 +00:00
parent 57f2339589
commit 2aa52b1143
2 changed files with 35 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
animations/loader.js
View File

@ -3,14 +3,14 @@ import React from "react";
const LoadingDot = { const LoadingDot = {
display: "block", display: "block",
width: "2rem", width: "1rem",
height: "2rem", height: "1rem",
backgroundColor: "#50cdc5", backgroundColor: "#50cdc5",
borderRadius: "50%", borderRadius: "50%",
}; };
const LoadingContainer = { const LoadingContainer = {
width: "10rem", width: "5rem",
height: "5rem", height: "5rem",
display: "flex", display: "flex",
justifyContent: "space-around", justifyContent: "space-around",

67
pages/icon/[id].js
View File

@ -2,19 +2,14 @@ import Head from "next/head";
import { import {
chakra, chakra,
Box, Box,
useColorModeValue,
Flex, Flex,
Badge, Badge,
Input,
VisuallyHidden,
SimpleGrid, SimpleGrid,
Button, Button,
InputGroup,
InputRightElement,
Image, Image,
Container, Container,
Center, Center,
Stack, HStack,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
@ -61,7 +56,7 @@ export default function Icon() {
<Image <Image
src={data.href} src={data.href}
alt={data.title} alt={data.title}
w={{ base: "30%", md: "20%", lg: "50%" }} w={{ base: "30%", md: "20%", lg: "30%" }}
fit="cover" fit="cover"
loading="lazy" loading="lazy"
/> />
@ -71,8 +66,8 @@ export default function Icon() {
direction="column" direction="column"
alignItems="start" alignItems="start"
justifyContent="center" justifyContent="center"
px={{ base: 4, lg: 20 }} px={{ base: 4, lg: 4 }}
py={{ base: "3", md: "0", lg: "24" }} py={{ base: "3", md: "0", lg: "10" }}
> >
<chakra.h1 <chakra.h1
mb={6} mb={6}
@ -102,34 +97,36 @@ export default function Icon() {
</Badge> </Badge>
</Link> </Link>
</Hover> </Hover>
<Stack direction="row" spacing={0} mt="2">
<Hover>
<Link href={data.href} passHref>
<Button
leftIcon={<IoCloudDownloadOutline />}
colorScheme="black"
variant="outline"
bg="transparent"
fontWeight="light"
mr="2"
>
Download .svg
</Button>
</Link>
</Hover>
<Link href={data.url} passHref>
<Button
colorScheme="teal"
variant="outline"
fontWeight="light"
borderWidth="1px"
>
{data.title} website
</Button>
</Link>
</Stack>
</Flex> </Flex>
</SimpleGrid> </SimpleGrid>
<Center>
<HStack spacing={0} mt="2">
<Hover>
<Link href={data.href} passHref>
<Button
leftIcon={<IoCloudDownloadOutline />}
colorScheme="black"
variant="outline"
bg="transparent"
fontWeight="light"
mr="2"
>
Download .svg
</Button>
</Link>
</Hover>
<Link href={data.url} passHref>
<Button
colorScheme="teal"
variant="outline"
fontWeight="light"
borderWidth="1px"
>
{data.title} website
</Button>
</Link>
</HStack>
</Center>
<Link href="/" passHref> <Link href="/" passHref>
<Button <Button
leftIcon={<IoArrowBackOutline />} leftIcon={<IoArrowBackOutline />}