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

sidebar links learning status

Browse Source
This commit is contained in:
marshennikovaolga
2024-09-06 15:23:33 +03:00
parent fbc9fd156c
commit be71156f3d
2 changed files with 79 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/components/routes/link/header.tsx
View File

@@ -24,6 +24,11 @@ export const learningStateAtom = atom<string>("all")
export const LinkHeader = React.memo(() => {
const isTablet = useMedia("(max-width: 1024px)")
const [activeState, setActiveState] = useQueryState(
"state",
parseAsStringLiteral(["all", "ToLearn", "learning", "learned"]).withDefault("all")
)
return (
<>
<ContentHeader className="px-6 py-5 max-lg:px-4">
@@ -52,6 +57,42 @@ export const LinkHeader = React.memo(() => {
LinkHeader.displayName = "LinkHeader"
// const LearningTab = React.memo(() => {
// const [activeTab, setActiveTab] = useAtom(learningStateAtom)
// const [activeState, setActiveState] = useQueryState(
// "state",
// parseAsStringLiteral(Object.values(ALL_STATES_STRING)).withDefault(ALL_STATES_STRING[0])
// )
// const handleTabChange = React.useCallback(
// (value: string) => {
// setActiveTab(value)
// setActiveState(value)
// },
// [setActiveTab, setActiveState]
// )
// React.useEffect(() => {
// setActiveTab(activeState)
// }, [activeState, setActiveTab])
// return (
// <FancySwitch
// value={activeTab}
// onChange={value => {
// handleTabChange(value as string)
// }}
// options={ALL_STATES}
// className="bg-secondary flex rounded-lg"
// highlighterClassName="bg-secondary-foreground/10 rounded-lg"
// radioClassName={cn(
// "relative mx-2 flex h-8 cursor-pointer items-center justify-center rounded-full px-1 text-sm text-secondary-foreground/60 data-[checked]:text-secondary-foreground font-medium transition-colors focus:outline-none"
// )}
// highlighterIncludeMargin={true}
// />
// )
// })
const LearningTab = React.memo(() => {
const [activeTab, setActiveTab] = useAtom(learningStateAtom)
const [activeState, setActiveState] = useQueryState(
@@ -61,15 +102,19 @@ const LearningTab = React.memo(() => {
const handleTabChange = React.useCallback(
(value: string) => {
setActiveTab(value)
setActiveState(value)
if (value !== activeTab) {
setActiveTab(value)
setActiveState(value)
}
},
[setActiveTab, setActiveState]
[activeTab, setActiveTab, setActiveState]
)
React.useEffect(() => {
setActiveTab(activeState)
}, [activeState, setActiveTab])
if (activeState !== activeTab) {
setActiveTab(activeState)
}
}, [activeState, activeTab, setActiveTab])
return (
<FancySwitch