qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-05 22:48:17 +08:00
Code Issues Actions 3 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 = {
display: "block",
width: "2rem",
height: "2rem",
width: "1rem",
height: "1rem",
backgroundColor: "#50cdc5",
borderRadius: "50%",
};
const LoadingContainer = {
width: "10rem",
width: "5rem",
height: "5rem",
display: "flex",
justifyContent: "space-around",

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

@ -2,19 +2,14 @@ import Head from "next/head";
import {
chakra,
Box,
useColorModeValue,
Flex,
Badge,
Input,
VisuallyHidden,
SimpleGrid,
Button,
InputGroup,
InputRightElement,
Image,
Container,
Center,
Stack,
HStack,
} from "@chakra-ui/react";
import { useRouter } from "next/router";
import useSWR from "swr";
@ -61,7 +56,7 @@ export default function Icon() {
<Image
src={data.href}
alt={data.title}
w={{ base: "30%", md: "20%", lg: "50%" }}
w={{ base: "30%", md: "20%", lg: "30%" }}
fit="cover"
loading="lazy"
/>
@ -71,8 +66,8 @@ export default function Icon() {
direction="column"
alignItems="start"
justifyContent="center"
px={{ base: 4, lg: 20 }}
py={{ base: "3", md: "0", lg: "24" }}
px={{ base: 4, lg: 4 }}
py={{ base: "3", md: "0", lg: "10" }}
>
<chakra.h1
mb={6}
@ -102,34 +97,36 @@ export default function Icon() {
</Badge>
</Link>
</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>
</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>
<Button
leftIcon={<IoArrowBackOutline />}