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

refactor: add categories active indicator

Browse Source
This commit is contained in:
ikurotime 2022-10-10 23:43:54 +02:00
parent b66e1100b7
commit 260246355d
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)",