New design, added category & bug fixes

2025-12-29 08:01:36 +08:00 · 2022-01-21 22:30:32 +00:00
parent 2706236410
commit 57f2339589
43 changed files with 1916 additions and 191 deletions
@@ -0,0 +1,8 @@
+import Error from 'components/error';
+import React from 'react';
+
+const Error404 = () => {
+  return <Error />;
+};
+
+export default Error404;
@@ -7,6 +7,7 @@ import { ChakraProvider } 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";
@@ -30,14 +31,19 @@ function MyApp({ Component, pageProps }) {
          property="og:description"
          content="SVGs for everyone, totally free"
        />
-        <meta property="og:image" content="images/banner.png" />
+        <meta
+          property="og:image"
+          content="https://iconr.vercel.app/images/banner.png"
+        />
        <meta name="keywords" content="svg,vector,logo,logos,download" />
        <meta content="#16161a" name="theme-color" />
-        <link rel="icon" href="images/logo.png" />
+        <link rel="icon" href="/images/logo.png" />
      </Head>
      <ChakraProvider theme={theme}>
        <Header />
-        <Component {...pageProps} />
+        <Sidebar>
+          <Component {...pageProps} />
+        </Sidebar>
        <Footer />
      </ChakraProvider>
    </>
@@ -0,0 +1,6 @@
+import db from "data/icons";
+
+// 📦 Show all content ->
+export default function handler(req, res) {
+  res.status(200).json(db);
+}
@@ -0,0 +1,13 @@
+import db from "data/icons";
+
+// 📦 Show categories ->
+export default function handler(req, res) {
+  try {
+    const categories = db
+      .map((item) => item.category)
+      .filter((category, index, self) => self.indexOf(category) === index);
+    return res.status(200).json(categories);
+  } catch (err) {
+    res.status(400).json({ message: err });
+  }
+}
@@ -1,7 +1,7 @@
 import db from "data/icons";

 export default function handler(req, res) {
-  const { id, q } = req.query;
+  const { id, q, c } = req.query;

  // 🔎 Search by id (ex: ?id=1) ->
  if (id) {
@@ -18,6 +18,15 @@ export default function handler(req, res) {
    return res.status(200).json(results);
  }

+  // 🔎 Search by category (ex: ?c=library) ->
+  if (c) {
+    const results = db.filter((product) => {
+      const { category } = product;
+      return category.toLowerCase().includes(c.toLowerCase());
+    });
+    return res.status(200).json(results);
+  }
+
  // ✖ Error ->
  res.status(400).json({ info: 'Error: api query not found.' });
 }
@@ -0,0 +1,93 @@
+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>
+    </>
+  );
+}
@@ -0,0 +1,151 @@
+import Head from "next/head";
+import {
+  chakra,
+  Box,
+  useColorModeValue,
+  Flex,
+  Badge,
+  Input,
+  VisuallyHidden,
+  SimpleGrid,
+  Button,
+  InputGroup,
+  InputRightElement,
+  Image,
+  Container,
+  Center,
+  Stack,
+} 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 Link from "next/link";
+import Show from "animations/show";
+import Loader from "animations/loader";
+import Hover from "animations/hover";
+
+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 />;
+
+  return (
+    <>
+      <Head>
+        <title>{data.title} - iconr</title>
+      </Head>
+      <Show delay="0">
+        <Container
+          maxW={{ base: "100%", md: "100%", lg: "75%" }}
+          borderWidth="1px"
+          borderRadius="30px"
+        >
+          <SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} spacing={0}>
+            <Box py={{ base: "10", md: "24" }}>
+              <Center>
+                <Image
+                  src={data.href}
+                  alt={data.title}
+                  w={{ base: "30%", md: "20%", lg: "50%" }}
+                  fit="cover"
+                  loading="lazy"
+                />
+              </Center>
+            </Box>
+            <Flex
+              direction="column"
+              alignItems="start"
+              justifyContent="center"
+              px={{ base: 4, lg: 20 }}
+              py={{ base: "3", md: "0", lg: "24" }}
+            >
+              <chakra.h1
+                mb={6}
+                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>
+              <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>
+          <Link href="/" passHref>
+            <Button
+              leftIcon={<IoArrowBackOutline />}
+              colorScheme="twitter"
+              variant="outline"
+              fontWeight="bold"
+              w="100%"
+              border="0"
+              mt="4"
+              mb="4"
+            >
+              Continue discovering
+            </Button>
+          </Link>
+        </Container>
+      </Show>
+    </>
+  );
+}
@@ -1,67 +1,37 @@
-import { chakra, Box } from "@chakra-ui/react";
+import { chakra, Box, Container } from "@chakra-ui/react";
 import Search from "components/search";
-import Grid from "components/grid";
-import Card from "components/card";
-import Icons from "data/icons";
+import Items from "components/items/all";
 import Show from "animations/show";

 export default function Index() {
  return (
    <>
      <Box overflow="hidden">
-        <Box mx="auto">
-          <Box
-            pos="relative"
-            pb={{ base: 2, sm: 16, md: 20, lg: 28, xl: 32 }}
-            w="full"
-            border="solid 1px transparent"
-          >
-            <Box
-              mt={{ base: "4", md: "8" }}
-              mx="auto"
-              maxW={{ base: "8xl" }}
-              px={{ base: 4, sm: 6, lg: 8 }}
-            >
-              <Box
-                textAlign="center"
-                w={{ base: "full", md: 11 / 12, xl: 8 / 12 }}
-                mx="auto"
-              >
-                <Show delay="0">
-                  <chakra.h1
-                    fontSize={{ base: "30px", sm: "5xl", 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.4">
-                  <Box mt={{ base: 4, md: 8 }}>
-                    <Grid>
-                      {Icons.map((link) => (
-                        <>
-                          <div key={link.id}>
-                            <Card
-                              title={link.title}
-                              url={link.href}
-                              icon={link.icon}
-                            />
-                          </div>
-                        </>
-                      ))}
-                    </Grid>
-                  </Box>
-                </Show>
-              </Box>
+        <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>
          </Box>
-        </Box>
+        </Container>
      </Box>
    </>
  );