fix(topic): Topic list keybind (#181)

* fix(page): improve keybind

* fix(topic): improve keybind

* fix: learning state selector
This commit is contained in:
Aslam
2024-09-24 18:55:52 +07:00
committed by GitHub
parent cffe65ec5f
commit 58ce33fed5
5 changed files with 204 additions and 248 deletions

View File

@@ -3,7 +3,6 @@ import Link from "next/link"
import { usePathname } from "next/navigation"
import { useAccount } from "@/lib/providers/jazz-provider"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { LaIcon } from "@/components/custom/la-icon"
import { ListOfTopics } from "@/lib/schema"
import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
@@ -27,7 +26,7 @@ export const TopicSection: React.FC<{ pathname: string }> = ({ pathname }) => {
if (!me) return null
return (
<div className="group/pages flex flex-col gap-px py-2">
<div className="group/topics flex flex-col gap-px py-2">
<TopicSectionHeader topicCount={topicCount} isActive={isActive} />
<List
topicsWantToLearn={me.root.topicsWantToLearn}
@@ -50,15 +49,12 @@ const TopicSectionHeader: React.FC<TopicSectionHeaderProps> = ({ topicCount, isA
isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)}
>
<Button
variant="ghost"
className="size-6 flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
>
<p className="flex items-center text-xs font-medium">
<Link href="/topics" className="flex flex-1 items-center justify-start rounded-md px-2 py-1">
<p className="text-xs">
Topics
{topicCount > 0 && <span className="text-muted-foreground ml-1">{topicCount}</span>}
</p>
</Button>
</Link>
</div>
)
@@ -78,7 +74,7 @@ const List: React.FC<ListProps> = ({ topicsWantToLearn, topicsLearning, topicsLe
count={topicsWantToLearn.length}
label="To Learn"
value="wantToLearn"
href="/me/wantToLearn"
href="#"
isActive={pathname === "/me/wantToLearn"}
/>
<ListItem
@@ -86,7 +82,7 @@ const List: React.FC<ListProps> = ({ topicsWantToLearn, topicsLearning, topicsLe
label="Learning"
value="learning"
count={topicsLearning.length}
href="/me/learning"
href="#"
isActive={pathname === "/me/learning"}
/>
<ListItem
@@ -94,7 +90,7 @@ const List: React.FC<ListProps> = ({ topicsWantToLearn, topicsLearning, topicsLe
label="Learned"
value="learned"
count={topicsLearned.length}
href="/me/learned"
href="#"
isActive={pathname === "/me/learned"}
/>
</div>
@@ -118,7 +114,7 @@ const ListItem: React.FC<ListItemProps> = ({ label, value, href, count, isActive
<div className="group/reorder-page relative">
<div className="group/topic-link relative flex min-w-0 flex-1">
<Link
href={"#"}
href={href}
className={cn(
"group-hover/topic-link:bg-accent relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
{ "bg-accent text-accent-foreground": isActive },