starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

link isActive sidebar

Browse Source
This commit is contained in:
marshennikovaolga
2024-09-09 20:48:29 +03:00
parent 3f6ff82063
commit 6f77158aac
1 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
web/components/custom/sidebar/partial/link-section.tsx
View File

@@ -1,6 +1,6 @@
import React from "react" import React from "react"
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { usePathname, useRouter } from "next/navigation"
import { useAccount } from "@/lib/providers/jazz-provider" import { useAccount } from "@/lib/providers/jazz-provider"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { PersonalLinkLists } from "@/lib/schema/personal-link" import { PersonalLinkLists } from "@/lib/schema/personal-link"
@@ -32,28 +32,31 @@ interface LinkSectionHeaderProps {
isActive: boolean isActive: boolean
} }
const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => ( const LinkSectionHeader: React.FC<LinkSectionHeaderProps> = ({ linkCount, isActive }) => {
<div const pathname = usePathname()
className={cn( const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
"flex min-h-[30px] items-center gap-px rounded-md", const isLinksActive = pathname.startsWith("/links") && !state
isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)} return (
> <div className="flex gap-px rounded-md">
<Link <Link
href="/links" href="/links"
className={cn( className={cn(
"size-6 flex-1 items-center justify-start rounded-md px-2 py-1", "flex size-6 flex-1 items-center justify-start rounded-md px-2 py-1",
"focus-visible:outline-none focus-visible:ring-0", "focus-visible:outline-none focus-visible:ring-0",
isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground" isLinksActive
)} ? "bg-accent text-accent-foreground items-center justify-center py-4"
> : "hover:bg-accent hover:text-accent-foreground"
<p className="flex items-center text-xs font-medium"> )}
Links >
{linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>} <p className="flex w-full items-center text-xs font-medium">
</p> Links
</Link> {linkCount > 0 && <span className="text-muted-foreground ml-1">{linkCount}</span>}
</div> </p>
) </Link>
</div>
)
}
const ALL_STATES = ["all", ...LEARNING_STATES.map(ls => ls.value)] const ALL_STATES = ["all", ...LEARNING_STATES.map(ls => ls.value)]
interface ListProps { interface ListProps {
@@ -62,31 +65,26 @@ interface ListProps {
const List: React.FC<ListProps> = ({ personalLinks }) => { const List: React.FC<ListProps> = ({ personalLinks }) => {
const pathname = usePathname() const pathname = usePathname()
const [activeState] = useQueryState("state", parseAsStringLiteral(ALL_STATES)) const [state] = useQueryState("state", parseAsStringLiteral(LEARNING_STATES.map(ls => ls.value)))
const toLearnCount = personalLinks.filter(link => link?.learningState === "wantToLearn").length const toLearnCount = personalLinks.filter(link => link?.learningState === "wantToLearn").length
const learningCount = personalLinks.filter(link => link?.learningState === "learning").length const learningCount = personalLinks.filter(link => link?.learningState === "learning").length
const learnedCount = personalLinks.filter(link => link?.learningState === "learned").length const learnedCount = personalLinks.filter(link => link?.learningState === "learned").length
const isActive = (checkState: string) => {
return pathname === "/links" && state === checkState
}
return ( return (
<div className="flex flex-col gap-px"> <div className="flex flex-col gap-px">
<ListItem <ListItem
label="To Learn" label="To Learn"
href="/links?state=wantToLearn" href="/links?state=wantToLearn"
count={toLearnCount} count={toLearnCount}
isActive={pathname === "/links" && activeState === "wantToLearn"} isActive={isActive("wantToLearn")}
/>
<ListItem
label="Learning"
href="/links?state=learning"
count={learningCount}
isActive={pathname === "/links" && activeState === "learning"}
/>
<ListItem
label="Learned"
href="/links?state=learned"
count={learnedCount}
isActive={pathname === "/links" && activeState === "learned"}
/> />
<ListItem label="Learning" href="/links?state=learning" count={learningCount} isActive={isActive("learning")} />
<ListItem label="Learned" href="/links?state=learned" count={learnedCount} isActive={isActive("learned")} />
</div> </div>
) )
} }
@@ -104,7 +102,10 @@ const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) =>
<div className="group/topic-link relative flex min-w-0 flex-1"> <div className="group/topic-link relative flex min-w-0 flex-1">
<Link <Link
href={href} href={href}
className="group-hover/topic-link:bg-accent relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium" className={cn(
"relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)}
> >
<div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm"> <div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
<p className={cn("truncate opacity-95 group-hover/topic-link:opacity-100")}>{label}</p> <p className={cn("truncate opacity-95 group-hover/topic-link:opacity-100")}>{label}</p>