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";
import { BiLinkExternal } from "react-icons/bi";
import Link from "next/link";
import Show from "animations/show";
import Loader from "animations/loader";
import confetti from "canvas-confetti";
import download from "downloadjs";
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 ;
if (!data) return ;
const downloadSvg = (name, url) => {
confetti({
particleCount: 200,
startVelocity: 30,
spread: 300,
gravity: 1.2,
origin: { y: 0 },
});
download(url);
};
return (
<>
{data.title} - SVGL
{data.title}
}
variant="primary"
fontWeight="light"
mr="2"
onClick={() => downloadSvg(data.title, data.href)}
>
Download .svg
}
>
{data.title} website
}
variant="outline"
fontWeight="light"
w="100%"
border="0"
mt="4"
mb="4"
>
Continue discovering
);
}