refactor(components): extract NavUserProps and NavMainProps type and optimize type definitions

src/app/(app)/dashboard/@admin/layout.tsx

@@ -16,6 +16,7 @@ import { User } from "@prisma/client";
 import { redirect } from "next/navigation";
 import { AppSidebar } from "@/components/app-sidebar";
 import { Separator } from "@/components/ui/separator";
+import { type NavUserProps } from "@/components/nav-user";
 
 interface AdminDashboardLayoutProps {
   children: React.ReactNode;
@@ -30,7 +31,7 @@ export default async function AdminDashboardLayout({
     redirect("/sign-in");
   }
 
-  const user = (({ name, email, image }) => ({
+  const user: NavUserProps["user"] = (({ name, email, image }) => ({
     name: name ?? "",
     email: email ?? "",
     avatar: image ?? "",

src/components/app-sidebar.tsx

@@ -13,10 +13,6 @@ import {
   SquareTerminal,
 } from "lucide-react";
 import * as React from "react";
-import { NavMain } from "@/components/nav-main";
-import { NavUser } from "@/components/nav-user";
-import { NavProjects } from "@/components/nav-projects";
-import { TeamSwitcher } from "@/components/team-switcher";
 import {
   Sidebar,
   SidebarContent,
@@ -24,6 +20,10 @@ import {
   SidebarHeader,
   SidebarRail,
 } from "@/components/ui/sidebar";
+import { NavMain } from "@/components/nav-main";
+import { NavProjects } from "@/components/nav-projects";
+import { TeamSwitcher } from "@/components/team-switcher";
+import { NavUser, type NavUserProps } from "@/components/nav-user";
 
 const data = {
   teams: [
@@ -150,14 +150,13 @@ const data = {
 };
 
 interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
-  user: {
+  user: NavUserProps["user"];
-    name: string;
-    email: string;
-    avatar: string;
-  };
 }
 
-export function AppSidebar({ user, ...props }: AppSidebarProps) {
+export function AppSidebar({
+  user,
+  ...props
+}: AppSidebarProps) {
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader>

src/components/nav-main.tsx

@@ -1,12 +1,5 @@
-"use client"
+"use client";
 
-import { ChevronRight, type LucideIcon } from "lucide-react"
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -16,22 +9,30 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ChevronRight, type LucideIcon } from "lucide-react";
+
+export interface NavMainProps {
+  items: {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}
 
 export function NavMain({
   items,
-}: {
+}: NavMainProps) {
-  items: {
-    title: string
-    url: string
-    icon?: LucideIcon
-    isActive?: boolean
-    items?: {
-      title: string
-      url: string
-    }[]
-  }[]
-}) {
   return (
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
@@ -69,5 +70,5 @@ export function NavMain({
         ))}
       </SidebarMenu>
     </SidebarGroup>
-  )
+  );
 }

src/components/nav-user.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   BadgeCheck,
@@ -7,13 +7,13 @@ import {
   CreditCard,
   LogOut,
   Sparkles,
-} from "lucide-react"
+} from "lucide-react";
-
 import {
-  Avatar,
+  SidebarMenu,
-  AvatarFallback,
+  SidebarMenuButton,
-  AvatarImage,
+  SidebarMenuItem,
-} from "@/components/ui/avatar"
+  useSidebar,
+} from "@/components/ui/sidebar";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,24 +22,21 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
-import {
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-  SidebarMenu,
+
-  SidebarMenuButton,
+export interface NavUserProps {
-  SidebarMenuItem,
+  user: {
-  useSidebar,
+    name: string;
-} from "@/components/ui/sidebar"
+    email: string;
+    avatar: string;
+  };
+}
 
 export function NavUser({
   user,
-}: {
+}: NavUserProps) {
-  user: {
+  const { isMobile } = useSidebar();
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  const { isMobile } = useSidebar()
 
   return (
     <SidebarMenu>
@@ -110,5 +107,5 @@ export function NavUser({
         </DropdownMenu>
       </SidebarMenuItem>
     </SidebarMenu>
-  )
+  );
 }