Move to TanStack Start from Next.js (#184)

2026-07-08 16:25:08 +02:00 · 2024-10-07 16:44:17 +07:00
parent 3a89a1c07f
commit 950ebc3dad
514 changed files with 20021 additions and 15508 deletions
@@ -0,0 +1,142 @@
+import * as React from "react"
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { cn } from "@/lib/utils"
+import { LaIcon } from "@/components/custom/la-icon"
+import { ListOfTopics } from "@/lib/schema"
+import { LEARNING_STATES, LearningStateValue } from "@/lib/constants"
+import { Link } from "@tanstack/react-router"
+
+export const TopicSection: React.FC = () => {
+  const { me } = useAccount({
+    root: {
+      topicsWantToLearn: [],
+      topicsLearning: [],
+      topicsLearned: [],
+    },
+  })
+
+  const topicCount =
+    (me?.root.topicsWantToLearn?.length || 0) +
+    (me?.root.topicsLearning?.length || 0) +
+    (me?.root.topicsLearned?.length || 0)
+
+  if (!me) return null
+
+  return (
+    <div className="group/topics flex flex-col gap-px py-2">
+      <TopicSectionHeader topicCount={topicCount} />
+      <List
+        topicsWantToLearn={me.root.topicsWantToLearn}
+        topicsLearning={me.root.topicsLearning}
+        topicsLearned={me.root.topicsLearned}
+      />
+    </div>
+  )
+}
+
+interface TopicSectionHeaderProps {
+  topicCount: number
+}
+
+const TopicSectionHeader: React.FC<TopicSectionHeaderProps> = ({
+  topicCount,
+}) => (
+  <Link
+    to="/topics"
+    className="flex h-9 items-center gap-px rounded-md px-2 py-1 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 sm:h-[30px] sm:text-xs"
+    activeProps={{
+      className: "bg-accent text-accent-foreground",
+    }}
+  >
+    <p className="text-sm sm:text-xs">
+      Topics
+      {topicCount > 0 && (
+        <span className="text-muted-foreground ml-1">{topicCount}</span>
+      )}
+    </p>
+  </Link>
+)
+
+interface ListProps {
+  topicsWantToLearn: ListOfTopics
+  topicsLearning: ListOfTopics
+  topicsLearned: ListOfTopics
+}
+
+const List: React.FC<ListProps> = ({
+  topicsWantToLearn,
+  topicsLearning,
+  topicsLearned,
+}) => {
+  return (
+    <div className="flex flex-col gap-px">
+      <ListItem
+        key={topicsWantToLearn.id}
+        count={topicsWantToLearn.length}
+        label="To Learn"
+        value="wantToLearn"
+      />
+      <ListItem
+        key={topicsLearning.id}
+        label="Learning"
+        value="learning"
+        count={topicsLearning.length}
+      />
+      <ListItem
+        key={topicsLearned.id}
+        label="Learned"
+        value="learned"
+        count={topicsLearned.length}
+      />
+    </div>
+  )
+}
+
+interface ListItemProps {
+  label: string
+  value: LearningStateValue
+  count: number
+}
+
+const ListItem: React.FC<ListItemProps> = ({ label, value, count }) => {
+  const le = LEARNING_STATES.find((l) => l.value === value)
+
+  if (!le) return null
+
+  return (
+    <div className="group/reorder-page relative">
+      <div className="group/topic-link relative flex min-w-0 flex-1">
+        <Link
+          to="/topics"
+          search={{ learningState: value }}
+          className={cn(
+            "group-hover/topic-link:bg-accent relative flex h-9 w-full items-center gap-2 rounded-md p-1.5 font-medium sm:h-8",
+            le.className,
+          )}
+          activeOptions={{ exact: true }}
+          activeProps={{
+            className: "bg-accent text-accent-foreground",
+          }}
+        >
+          <div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
+            <LaIcon name={le.icon} className="flex-shrink-0 opacity-60" />
+            <p
+              className={cn(
+                "truncate opacity-95 group-hover/topic-link:opacity-100",
+                le.className,
+              )}
+            >
+              {label}
+            </p>
+          </div>
+        </Link>
+
+        {count > 0 && (
+          <span className="absolute right-2 top-1/2 z-[1] -translate-y-1/2 rounded p-1 text-sm">
+            {count}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}