diff --git a/src/components/search.tsx b/src/components/search.tsx
index 95d9dfc..1b6f3e9 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -1,5 +1,5 @@
import { useState } from "react";
-import { Flex, Input, Text, Image } from "@chakra-ui/react";
+import { Input, Text, Image, HStack, Box, Center } from "@chakra-ui/react";
import useSWR from "swr";
import useDebounce from "@/hooks/useDebounce";
import { SVGCardProps } from "@/interfaces/components";
@@ -8,6 +8,7 @@ import Error from "@/components/error";
import { getSvgByQuery } from "@/services";
import CustomIconBtn from "@/common/iconBtn";
import { Trash } from "phosphor-react";
+import Tap from "@/animations/tap";
const Search = () => {
const [search, setSearch] = useState("");
@@ -33,28 +34,39 @@ const Search = () => {
onChange={(e) => setSearch(e.target.value)}
/>
{data && data.length > 0 && (
-
- {data.map((item: SVGCardProps) => (
-
-
-
- {item.title}
-
-
- ))}
+ <>
+
+ {data.map((item: SVGCardProps) => (
+
+
+
+
+
+
+ {item.title}
+
+
+
+ ))}
+
}
onClick={handleClear}
/>
-
+
)}
);
diff --git a/src/pages/category/[category].tsx b/src/pages/category/[category].tsx
new file mode 100644
index 0000000..0360129
--- /dev/null
+++ b/src/pages/category/[category].tsx
@@ -0,0 +1,41 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { getSvgByCategory } from "@/services";
+import Loading from "@/components/loading";
+import Grid from "@/common/grid";
+import SVGCard from "@/components/svgCard";
+import { SvgData } from "@/interfaces/svgData";
+import { Center, Heading } from "@chakra-ui/react";
+import Show from "@/animations/show";
+
+export default function Category() {
+ const router = useRouter();
+ const { data, error } = useSWR(
+ () => router.query.category && `${getSvgByCategory}${router.query.category}`
+ );
+
+ if (error) router.push("/404");
+ if (!data) return ;
+
+ return (
+ <>
+
+ {router.query.category} logos - svgl
+
+
+
+
+ {router.query.category}
+
+
+
+
+
+ {data.map((svg: SvgData) => (
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/svg/[id].tsx b/src/pages/svg/[id].tsx
index a3f1fe4..73a9b27 100644
--- a/src/pages/svg/[id].tsx
+++ b/src/pages/svg/[id].tsx
@@ -1,7 +1,6 @@
import Head from "next/head";
import { useRouter } from "next/router";
import useSWR from "swr";
-import { Box, SimpleGrid } from "@chakra-ui/react";
import Show from "@/animations/show";
import { getSvgById } from "@/services";
diff --git a/src/services/index.ts b/src/services/index.ts
index 34ef967..54128a6 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -2,4 +2,5 @@ export const githubVersionPackage = 'https://api.github.com/repos/pheralb/svgl/r
export const getAllSvgs = "/api/all";
export const getCategorySvgs = "/api/categories";
export const getSvgById = "/api/search?id=";
-export const getSvgByQuery = "/api/search?q=";
\ No newline at end of file
+export const getSvgByQuery = "/api/search?q=";
+export const getSvgByCategory = "/api/search?c=";
\ No newline at end of file