2022-01-22 06:30:32 +08:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import {
|
|
|
|
|
chakra,
|
|
|
|
|
Box,
|
|
|
|
|
Flex,
|
|
|
|
|
SimpleGrid,
|
|
|
|
|
Button,
|
|
|
|
|
Image,
|
|
|
|
|
Container,
|
|
|
|
|
Center,
|
|
|
|
|
} from "@chakra-ui/react";
|
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
|
import useSWR from "swr";
|
|
|
|
|
import Error from "components/error";
|
|
|
|
|
import { IoArrowBackOutline, IoCloudDownloadOutline } from "react-icons/io5";
|
2022-02-19 01:19:05 +08:00
|
|
|
import { BiLinkExternal } from "react-icons/bi";
|
2022-01-22 06:30:32 +08:00
|
|
|
import Link from "next/link";
|
|
|
|
|
import Show from "animations/show";
|
|
|
|
|
import Loader from "animations/loader";
|
2022-03-04 06:06:46 +08:00
|
|
|
import confetti from "canvas-confetti";
|
|
|
|
|
import download from "downloadjs";
|
2022-01-22 06:30:32 +08:00
|
|
|
|
|
|
|
|
const fetcher = async (url) => {
|
|
|
|
|
const res = await fetch(url);
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
if (res.status !== 200) {
|
|
|
|
|
throw new Error(data.message);
|
|
|
|
|
}
|
|
|
|
|
return data;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default function Icon() {
|
|
|
|
|
const { query } = useRouter();
|
|
|
|
|
const { data, error } = useSWR(
|
|
|
|
|
() => query.id && `/api/search?id=${query.id}`,
|
|
|
|
|
fetcher
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (error) return <Error />;
|
|
|
|
|
if (!data) return <Loader />;
|
|
|
|
|
|
2022-03-04 06:06:46 +08:00
|
|
|
const downloadSvg = (name, url) => {
|
2022-03-06 01:03:33 +08:00
|
|
|
confetti({
|
|
|
|
|
particleCount: 200,
|
|
|
|
|
startVelocity: 30,
|
|
|
|
|
spread: 300,
|
|
|
|
|
gravity: 1.2,
|
|
|
|
|
origin: { y: 0 },
|
|
|
|
|
});
|
2022-03-04 21:34:58 +08:00
|
|
|
download(url);
|
2022-03-04 06:06:46 +08:00
|
|
|
};
|
|
|
|
|
|
2022-01-22 06:30:32 +08:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
2022-03-03 22:48:37 +08:00
|
|
|
<title>{data.title} - SVGL</title>
|
2022-01-22 06:30:32 +08:00
|
|
|
</Head>
|
|
|
|
|
<Show delay="0">
|
2022-03-03 22:48:37 +08:00
|
|
|
<Container maxW="100%" borderWidth="1px" borderRadius="30px">
|
2022-01-22 06:30:32 +08:00
|
|
|
<SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} spacing={0}>
|
|
|
|
|
<Box py={{ base: "10", md: "24" }}>
|
|
|
|
|
<Center>
|
|
|
|
|
<Image
|
|
|
|
|
src={data.href}
|
|
|
|
|
alt={data.title}
|
2022-02-12 20:36:54 +08:00
|
|
|
w={{ base: "30%", md: "20%", lg: "30%" }}
|
2022-01-22 06:30:32 +08:00
|
|
|
fit="cover"
|
|
|
|
|
loading="lazy"
|
|
|
|
|
/>
|
|
|
|
|
</Center>
|
|
|
|
|
</Box>
|
|
|
|
|
<Flex
|
|
|
|
|
direction="column"
|
|
|
|
|
alignItems="start"
|
|
|
|
|
justifyContent="center"
|
2022-02-12 20:36:54 +08:00
|
|
|
px={{ base: 4, lg: 4 }}
|
|
|
|
|
py={{ base: "3", md: "0", lg: "10" }}
|
2022-01-22 06:30:32 +08:00
|
|
|
>
|
|
|
|
|
<chakra.h1
|
2022-02-19 01:19:05 +08:00
|
|
|
mb={3}
|
2022-01-22 06:30:32 +08:00
|
|
|
fontSize={{ base: "4xl", md: "4xl", lg: "5xl" }}
|
|
|
|
|
fontWeight="semibold"
|
|
|
|
|
lineHeight="shorter"
|
|
|
|
|
>
|
|
|
|
|
{data.title}
|
|
|
|
|
</chakra.h1>
|
2022-03-06 01:03:33 +08:00
|
|
|
<Flex direction={{ base: "column", md: "row" }} w="100%" mt="2">
|
2022-03-04 06:06:46 +08:00
|
|
|
<Button
|
2022-03-06 01:03:33 +08:00
|
|
|
w={{ base: "100%", md: "auto" }}
|
|
|
|
|
mb={{ base: "2", md: "0" }}
|
2022-03-04 06:06:46 +08:00
|
|
|
leftIcon={<IoCloudDownloadOutline />}
|
|
|
|
|
variant="primary"
|
|
|
|
|
fontWeight="light"
|
|
|
|
|
mr="2"
|
|
|
|
|
onClick={() => downloadSvg(data.title, data.href)}
|
|
|
|
|
>
|
|
|
|
|
Download .svg
|
|
|
|
|
</Button>
|
2022-02-19 01:19:05 +08:00
|
|
|
<Link href={data.url} passHref>
|
2022-01-22 06:30:32 +08:00
|
|
|
<Button
|
2022-03-06 01:03:33 +08:00
|
|
|
w={{ base: "100%", md: "auto" }}
|
2022-01-22 06:30:32 +08:00
|
|
|
fontWeight="light"
|
2022-02-19 01:19:05 +08:00
|
|
|
borderWidth="1px"
|
|
|
|
|
rightIcon={<BiLinkExternal />}
|
2022-01-22 06:30:32 +08:00
|
|
|
>
|
2022-02-19 01:19:05 +08:00
|
|
|
{data.title} website
|
2022-01-22 06:30:32 +08:00
|
|
|
</Button>
|
|
|
|
|
</Link>
|
2022-02-19 01:19:05 +08:00
|
|
|
</Flex>
|
|
|
|
|
</Flex>
|
|
|
|
|
</SimpleGrid>
|
2022-01-22 06:30:32 +08:00
|
|
|
<Link href="/" passHref>
|
|
|
|
|
<Button
|
|
|
|
|
leftIcon={<IoArrowBackOutline />}
|
|
|
|
|
variant="outline"
|
2022-03-03 22:48:37 +08:00
|
|
|
fontWeight="light"
|
2022-01-22 06:30:32 +08:00
|
|
|
w="100%"
|
|
|
|
|
border="0"
|
|
|
|
|
mt="4"
|
|
|
|
|
mb="4"
|
|
|
|
|
>
|
|
|
|
|
Continue discovering
|
|
|
|
|
</Button>
|
|
|
|
|
</Link>
|
|
|
|
|
</Container>
|
|
|
|
|
</Show>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
