archived-linsa/web/app/components/sidebar/partials/link-collection.tsx

import * as React from "react"
import { useAccount } from "@/lib/providers/jazz-provider"
import { NavItem } from "~/components/custom/nav-item"

export const LinkCollection: React.FC = () => {
  const { me } = useAccount({
    root: {
      personalLinks: [],
      personalPages: [],
      topicsWantToLearn: [],
      topicsLearning: [],
      topicsLearned: [],
      tasks: [],
    },
  })

  const linkCount = me?.root.personalLinks?.length || 0
  const pageCount = me?.root.personalPages?.length || 0
  const taskCount = me?.root.tasks?.length || 0

  const topicCount =
    (me?.root.topicsWantToLearn?.length || 0) +
    (me?.root.topicsLearning?.length || 0) +
    (me?.root.topicsLearned?.length || 0)

  return (
    <div className="flex flex-col gap-px py-2">
      <NavItem to="/links" title="Links" icon="Link" count={linkCount} />
      <NavItem to="/topics" title="Topics" icon="Hash" count={topicCount} />
      <NavItem
        to="/pages"
        title="Pages"
        icon="Layers"
        count={pageCount}
        activeOptions={{ exact: true }}
      />
      <NavItem
        to="/tasks"
        title="Tasks"
        icon="BookOpenCheck"
        count={taskCount}
      />
    </div>
  )
}