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

Merge pull request #27 from ikurotime/main

Browse Source 
add categories active indicator
This commit is contained in:
Pablo Hdez 2022-10-11 08:26:37 +01:00 committed by GitHub
commit c0b0b7f98d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/layout/header/categories.tsx
View File

@ -5,11 +5,12 @@ import CustomLink from "@/common/link";
import { Box, useColorModeValue } from "@chakra-ui/react"; import { Box, useColorModeValue } from "@chakra-ui/react";
import { RaceBy } from "@uiball/loaders"; import { RaceBy } from "@uiball/loaders";
import Tap from "@/animations/tap"; import Tap from "@/animations/tap";
import { useRouter } from "next/router";
const Categories = () => { const Categories = () => {
const { data, error } = useSWR(getCategorySvgs); const { data, error } = useSWR(getCategorySvgs);
const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)"); const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)");
const router = useRouter();
if (error) return <div>failed to load</div>; if (error) return <div>failed to load</div>;
if (!data) if (!data)
return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />; return <RaceBy size={52} lineWeight={3} speed={1.4} color="#4343E5" />;
@ -23,6 +24,14 @@ const Categories = () => {
p={4} p={4}
borderRadius="4px" borderRadius="4px"
borderWidth="1px" borderWidth="1px"
__css={
router.asPath === `/category/${category}`
? {
backgroundColor: '#4343e5',
color: '#fff'
}
: {}
}
_hover={{ _hover={{
border:`1px solid ${color}`, border:`1px solid ${color}`,
transform: "scale(0.98)", transform: "scale(0.98)",