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

48
src/components/search.tsx
View File

@ -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 && (
<Flex direction="column" mt={2} p="2" overflowY="hidden">
{data.map((item: SVGCardProps) => (
<CustomLink key={item.title} href={`/svg/${item.id}`}>
<Flex
direction="row"
mb="2"
shadow="sm"
p="3"
borderWidth="1px"
borderRadius="5px"
>
<Image width="20px" mr="2" src={item.slug} alt={item.title} />
<Text>{item.title}</Text>
</Flex>
</CustomLink>
))}
<>
<HStack spacing={4} mt={4} overflowY="hidden">
{data.map((item: SVGCardProps) => (
<Tap key={item.title}>
<CustomLink href={`/svg/${item.id}`}>
<Box
mb="2"
p="3"
shadow="sm"
borderWidth="1px"
borderRadius="5px"
width="100%"
>
<Center>
<Image
width="25px"
mb="2"
src={item.slug}
alt={item.title}
/>
</Center>
<Text>{item.title}</Text>
</Box>
</CustomLink>
</Tap>
))}
</HStack>
<CustomIconBtn
title="clear"
icon={<Trash size={16} />}
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 { useRouter } from "next/router";
import useSWR from "swr";
import { Box, SimpleGrid } from "@chakra-ui/react";
import Show from "@/animations/show";
import { getSvgById } from "@/services";

3
src/services/index.ts
View File

@ -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=";
export const getSvgByQuery = "/api/search?q=";
export const getSvgByCategory = "/api/search?c=";