78 lines
3.6 KiB
TypeScript
78 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
|
|
import { Sidebar, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
|
|
import { ChevronDown, DollarSign, LayoutDashboard } from "lucide-react"
|
|
import mainLogo from "@/images/logo.png"
|
|
import Image from "next/image"
|
|
import QueryWrapper from "@/components/module/query-wrapper"
|
|
import { useMenuPricePlan } from "./view-model"
|
|
import Link from "next/link"
|
|
|
|
const Content = () => {
|
|
const vm = useMenuPricePlan()
|
|
|
|
return (
|
|
<div>
|
|
<Sidebar>
|
|
<SidebarHeader className="mb-12">
|
|
<div className="flex gap-2 items-center mx-auto">
|
|
<Image src={mainLogo} alt="main-logo" width={42} height={42} />
|
|
<h1 className="text-2xl">NetworkPro</h1>
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem className="px-2">
|
|
<SidebarMenuButton>
|
|
<Link href="/" className="flex items-center gap-2 w-full text-white/60">
|
|
<LayoutDashboard size={14}/>
|
|
<span className="text-lg font-light">Dashboard</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
{vm.getData().map((item, idx) => (
|
|
<Collapsible defaultOpen className="group/collapsible" key={item.getParentName() + idx}>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel asChild>
|
|
<CollapsibleTrigger className="flex items-center gap-1 text-white">
|
|
<DollarSign size={16} />
|
|
<span className="text-lg font-light">
|
|
{item.getParentName() === "S" ? "Subscribe" : item.getParentName()}
|
|
</span>
|
|
<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
|
|
</CollapsibleTrigger>
|
|
</SidebarGroupLabel>
|
|
</SidebarGroup>
|
|
<CollapsibleContent className="px-6">
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{item.getPricePlanTypeDto().map((item) => (
|
|
<SidebarMenuItem key={item.id}>
|
|
<SidebarMenuButton asChild>
|
|
<Link href="#" className=" text-base text-white/70 hover:text-black-80">
|
|
-
|
|
<span>{item.pricePlanTypeName}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
))}
|
|
</Sidebar>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const PricePlanSidebar = () => {
|
|
return (
|
|
<QueryWrapper>
|
|
<Content />
|
|
</QueryWrapper>
|
|
)
|
|
}
|
|
|
|
export default PricePlanSidebar |