mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
New design, new icons and license added
This commit is contained in:
pheralb
+6
-7
@@ -2,12 +2,11 @@
|
||||
import Head from "next/head";
|
||||
|
||||
// 🌿 Chakra UI ->
|
||||
import { ChakraProvider } from "@chakra-ui/react";
|
||||
import { ChakraProvider, Container } from "@chakra-ui/react";
|
||||
|
||||
// 📦 Components ->
|
||||
import Header from "components/header";
|
||||
import Footer from "components/footer";
|
||||
import Sidebar from "components/sidebar";
|
||||
|
||||
// 💙 Global CSS ->
|
||||
import "styles/globals.css";
|
||||
@@ -29,7 +28,7 @@ function MyApp({ Component, pageProps }) {
|
||||
<meta property="og:url" content="https://iconr.vercel.app/" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="SVGs for everyone, totally free"
|
||||
content="Beautiful SVG vector icons. Free and open source."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
@@ -40,11 +39,11 @@ function MyApp({ Component, pageProps }) {
|
||||
<link rel="icon" href="/images/logo.png" />
|
||||
</Head>
|
||||
<ChakraProvider theme={theme}>
|
||||
<Header />
|
||||
<Sidebar>
|
||||
<Container maxW={{ base: "100%", md: "85%" }}>
|
||||
<Header />
|
||||
<Component {...pageProps} />
|
||||
</Sidebar>
|
||||
<Footer />
|
||||
<Footer />
|
||||
</Container>
|
||||
</ChakraProvider>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
import Head from "next/head";
|
||||
import {
|
||||
chakra,
|
||||
Box,
|
||||
useColorModeValue,
|
||||
Flex,
|
||||
Badge,
|
||||
Input,
|
||||
VisuallyHidden,
|
||||
SimpleGrid,
|
||||
Button,
|
||||
InputGroup,
|
||||
InputRightElement,
|
||||
Image,
|
||||
Container,
|
||||
Center,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import Error from "components/error";
|
||||
import Grid from "components/grid";
|
||||
import Card from "components/card";
|
||||
import { IoArrowBackOutline } from "react-icons/io5";
|
||||
import Link from "next/link";
|
||||
import Show from "animations/show";
|
||||
import Loader from "animations/loader";
|
||||
|
||||
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.c && `/api/search?c=${query.c}`,
|
||||
fetcher
|
||||
);
|
||||
|
||||
if (error) return <Error />;
|
||||
if (!data) return <Loader />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{query.c} icons - iconr</title>
|
||||
</Head>
|
||||
<Show delay="0">
|
||||
<Box w="100%" borderBottomWidth="1px" p="4" mb="3" textAlign="center">
|
||||
<Text fontSize="5xl" pt="5">
|
||||
{query.c} icons
|
||||
</Text>
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoArrowBackOutline />}
|
||||
colorScheme="twitter"
|
||||
variant="outline"
|
||||
fontWeight="bold"
|
||||
border="0"
|
||||
mt="4"
|
||||
mb="4"
|
||||
>
|
||||
Continue discovering
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
</Show>
|
||||
<Show delay="0.2">
|
||||
<Container maxW={{ base: "100%", md: "90%" }}>
|
||||
<Grid>
|
||||
{data.map((link) => (
|
||||
<>
|
||||
<div key={link.id}>
|
||||
<Card
|
||||
title={link.title}
|
||||
url={`/icon/${link.id}`}
|
||||
href={link.href}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
}
|
||||
+27
-46
@@ -15,6 +15,7 @@ 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";
|
||||
@@ -46,7 +47,7 @@ export default function Icon() {
|
||||
</Head>
|
||||
<Show delay="0">
|
||||
<Container
|
||||
maxW={{ base: "100%", md: "100%", lg: "75%" }}
|
||||
maxW="100%"
|
||||
borderWidth="1px"
|
||||
borderRadius="30px"
|
||||
>
|
||||
@@ -70,63 +71,43 @@ export default function Icon() {
|
||||
py={{ base: "3", md: "0", lg: "10" }}
|
||||
>
|
||||
<chakra.h1
|
||||
mb={6}
|
||||
mb={3}
|
||||
fontSize={{ base: "4xl", md: "4xl", lg: "5xl" }}
|
||||
fontWeight="semibold"
|
||||
lineHeight="shorter"
|
||||
>
|
||||
{data.title}
|
||||
</chakra.h1>
|
||||
<Hover>
|
||||
<Link href={`/category/${data.category}`} passHref>
|
||||
<Badge
|
||||
borderWidth="1px"
|
||||
_hover={{ borderColor: "#51d1c8" }}
|
||||
textTransform="lowercase"
|
||||
fontSize="md"
|
||||
color="gray.500"
|
||||
bg="transparent"
|
||||
px={3}
|
||||
py={1}
|
||||
mb={3}
|
||||
rounded="full"
|
||||
fontWeight="light"
|
||||
cursor="pointer"
|
||||
>
|
||||
{data.category}
|
||||
</Badge>
|
||||
</Link>
|
||||
</Hover>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
<Center>
|
||||
<HStack spacing={0} mt="2">
|
||||
<Hover>
|
||||
<Link href={data.href} passHref>
|
||||
<Flex direction={{ base: "column", md: "row" }} 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
|
||||
leftIcon={<IoCloudDownloadOutline />}
|
||||
colorScheme="black"
|
||||
colorScheme="teal"
|
||||
variant="outline"
|
||||
bg="transparent"
|
||||
fontWeight="light"
|
||||
mr="2"
|
||||
borderWidth="1px"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
>
|
||||
Download .svg
|
||||
{data.title} website
|
||||
</Button>
|
||||
</Link>
|
||||
</Hover>
|
||||
<Link href={data.url} passHref>
|
||||
<Button
|
||||
colorScheme="teal"
|
||||
variant="outline"
|
||||
fontWeight="light"
|
||||
borderWidth="1px"
|
||||
>
|
||||
{data.title} website
|
||||
</Button>
|
||||
</Link>
|
||||
</HStack>
|
||||
</Center>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</SimpleGrid>
|
||||
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoArrowBackOutline />}
|
||||
|
||||
+18
-24
@@ -6,32 +6,26 @@ import Show from "animations/show";
|
||||
export default function Index() {
|
||||
return (
|
||||
<>
|
||||
<Box overflow="hidden">
|
||||
<Container maxW={{ base: "100%", md: "90%" }}>
|
||||
<Box w="full" border="solid 1px transparent">
|
||||
<Box textAlign="center">
|
||||
<Show delay="0">
|
||||
<chakra.h1
|
||||
fontSize={{ base: "30px", sm: "35px", md: "6xl" }}
|
||||
letterSpacing="tight"
|
||||
lineHeight="short"
|
||||
fontWeight="extrabold"
|
||||
mb={{ base: 4, md: 8 }}
|
||||
>
|
||||
Beautiful SVG vector icons
|
||||
</chakra.h1>
|
||||
</Show>
|
||||
<Show delay="0.2">
|
||||
<Search />
|
||||
</Show>
|
||||
<Show delay="0.2">
|
||||
<Box mt={{ base: 4, md: 8 }}>
|
||||
<Items />
|
||||
</Box>
|
||||
</Show>
|
||||
<Box mt="10">
|
||||
<Box w="full" border="solid 1px transparent">
|
||||
<Box textAlign="center">
|
||||
<Show delay="0">
|
||||
<chakra.h1
|
||||
fontSize={{ base: "30px", sm: "35px", md: "6xl" }}
|
||||
letterSpacing="tight"
|
||||
lineHeight="short"
|
||||
fontWeight="extrabold"
|
||||
mb={{ base: 4, md: 8 }}
|
||||
>
|
||||
Beautiful SVG vector icons
|
||||
</chakra.h1>
|
||||
</Show>
|
||||
<Search />
|
||||
<Box mt={{ base: 4, md: 8 }}>
|
||||
<Items />
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user