feat: add NavPlan component to display user plan and credits in sidebar

src/components/sidebar/NavPlan.tsx

@@ -0,0 +1,36 @@
+import type { User } from "@/services/auth"
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
+import NumberFlow from '@number-flow/react'
+import { useEffect, useState } from "react"
+
+interface NavPlanProps {
+  user: User
+}
+
+export function NavPlan({ user }: NavPlanProps) {
+  const [credits, setCredits] = useState(0)
+  
+  useEffect(() => {
+    setCredits(user.credits)
+  }, [user])
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-semibold">
+              Plan: {user.plan.name}
+            </span>
+            <span className="truncate text-xs">
+              Credits: <NumberFlow value={credits} />
+            </span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}