qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

⚒️ New improvements.

Browse Source
This commit is contained in:
pheralb 2022-06-28 13:18:19 +01:00
parent bdc8718aab
commit 7c08035ba0
4 changed files with 73 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/search.tsx
View File

@ -1,5 +1,5 @@
import { useState } from "react"; 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 useSWR from "swr";
import useDebounce from "@/hooks/useDebounce"; import useDebounce from "@/hooks/useDebounce";
import { SVGCardProps } from "@/interfaces/components"; import { SVGCardProps } from "@/interfaces/components";
@ -8,6 +8,7 @@ import Error from "@/components/error";
import { getSvgByQuery } from "@/services"; import { getSvgByQuery } from "@/services";
import CustomIconBtn from "@/common/iconBtn"; import CustomIconBtn from "@/common/iconBtn";
import { Trash } from "phosphor-react"; import { Trash } from "phosphor-react";
import Tap from "@/animations/tap";
const Search = () => { const Search = () => {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -33,28 +34,39 @@ const Search = () => {
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
{data && data.length > 0 && ( {data && data.length > 0 && (
<Flex direction="column" mt={2} p="2" overflowY="hidden"> <>
<HStack spacing={4} mt={4} overflowY="hidden">
{data.map((item: SVGCardProps) => ( {data.map((item: SVGCardProps) => (
<CustomLink key={item.title} href={`/svg/${item.id}`}> <Tap key={item.title}>
<Flex <CustomLink href={`/svg/${item.id}`}>
direction="row" <Box
mb="2" mb="2"
shadow="sm"
p="3" p="3"
shadow="sm"
borderWidth="1px" borderWidth="1px"
borderRadius="5px" borderRadius="5px"
width="100%"
> >
<Image width="20px" mr="2" src={item.slug} alt={item.title} /> <Center>
<Image
width="25px"
mb="2"
src={item.slug}
alt={item.title}
/>
</Center>
<Text>{item.title}</Text> <Text>{item.title}</Text>
</Flex> </Box>
</CustomLink> </CustomLink>
</Tap>
))} ))}
</HStack>
<CustomIconBtn <CustomIconBtn
title="clear" title="clear"
icon={<Trash size={16} />} icon={<Trash size={16} />}
onClick={handleClear} onClick={handleClear}
/> />
</Flex> </>
)} )}
</> </>
); );

41
src/pages/category/[category].tsx Normal file
View File

@ -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 <Loading text="Loading..." />;
return (
<>
<Head>
<title>{router.query.category} logos - svgl</title>
</Head>
<Show>
<Center>
<Heading mt="4" mb="5">
{router.query.category}
</Heading>
</Center>
</Show>
<Grid>
{data.map((svg: SvgData) => (
<SVGCard key={svg.id} id={svg.id} svg={svg.slug} title={svg.title} />
))}
</Grid>
</>
);
}

1
src/pages/svg/[id].tsx
View File

@ -1,7 +1,6 @@
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useSWR from "swr"; import useSWR from "swr";
import { Box, SimpleGrid } from "@chakra-ui/react";
import Show from "@/animations/show"; import Show from "@/animations/show";
import { getSvgById } from "@/services"; import { getSvgById } from "@/services";

1
src/services/index.ts
View File

@ -3,3 +3,4 @@ export const getAllSvgs = "/api/all";
export const getCategorySvgs = "/api/categories"; export const getCategorySvgs = "/api/categories";
export const getSvgById = "/api/search?id="; export const getSvgById = "/api/search?id=";
export const getSvgByQuery = "/api/search?q="; export const getSvgByQuery = "/api/search?q=";
export const getSvgByCategory = "/api/search?c=";