Application Shell 16

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarSeparator,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import {
  Archive,
  BarChart,
  Settings,
  MoreHoriz,
  Description,
  Help,
  Home,
  Layers,
  PieChart,
  Search,
  Star,
  TrendingUp,
} from "relume-icons";

const menuItems = [
  {
    title: "Home",
    url: "#",
    icon: Home,
  },
  {
    title: "Saved",
    url: "#",
    icon: Star,
  },
  {
    title: "Dashboard",
    url: "#",
    icon: PieChart,
    subItems: [
      { title: "Trends", icon: TrendingUp, url: "#" },
      { title: "Analytics", icon: BarChart, url: "#" },
      { title: "Historical", icon: Archive, url: "#" },
    ],
  },
  {
    title: "Projects",
    url: "#",
    icon: Layers,
  },
  {
    title: "Documents",
    url: "#",
    icon: Description,
  },
];

const footerItems = [
  {
    title: "Support",
    url: "#",
    icon: Help,
  },
  {
    title: "Settings",
    url: "#",
    icon: Settings,
  },
];

export const ApplicationShell16 = () => {
  return (
    <section>
      <AppSidebar>
        <div className="relative flex flex-1 flex-col lg:flex-row">
          <div className="static top-0 order-last flex flex-col lg:sticky lg:h-screen lg:overflow-auto lg:border-l lg:border-[#d3d3d3]">
            <div className="p-6 lg:p-8">
              <div className="grid min-h-screen grid-cols-1 gap-12 sm:min-w-[22rem]">
                <h1 className="text-neutral-darkest/50 flex h-screen items-center justify-center border-2 border-dashed border-[#d3d3d3] text-center">
                  Click and paste Side Panel Content
                </h1>
              </div>
            </div>
          </div>
          <div className="bg-scheme-foreground flex-1">
            <div className="text-neutral-darkest/50 border-b-2 border-dashed border-[#d3d3d3] py-6 text-center">
              <h1>Click and paste Page Header</h1>
            </div>
            <div className="container px-6 py-8 md:px-8 md:py-10 lg:py-12">
              <div className="grid grid-cols-1 gap-12">
                <div className="text-neutral-darkest/50 flex h-screen items-center justify-center border-2 border-dashed border-[#d3d3d3] py-6 text-center">
                  <h2>Click and paste Main Content</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </AppSidebar>
    </section>
  );
};

const AppSidebar = ({ children }: { children: React.ReactNode }) => {
  return (
    <SidebarProvider>
      <Sidebar className="py-6">
        <SidebarHeader className="gap-4 pt-6 lg:gap-6 lg:pt-0">
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
          <SidebarInput
            placeholder="Search"
            icon={<Search className="text-scheme-text size-6" />}
            iconPosition="left"
            className="pl-12"
          />
        </SidebarHeader>
        <SidebarContent className="mt-4 lg:mt-6">
          <SidebarMenu>
            {menuItems.map((item, index) => (
              <SidebarMenuItem key={index}>
                {item.title === "Dashboard" ? (
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="dashboard" className="border-none">
                      <AccordionTrigger className="text-regular p-2 font-normal [&>svg]:size-4">
                        <span className="flex items-center gap-3">
                          <item.icon className="text-scheme-text size-6 shrink-0" />
                          <p>{item.title}</p>
                        </span>
                      </AccordionTrigger>
                      {item.subItems?.map((subItem, subIndex) => (
                        <AccordionContent
                          key={subIndex}
                          className="text-regular flex items-center p-0 pl-9 text-center"
                        >
                          <SidebarMenuItem className="w-full">
                            <SidebarMenuButton asChild>
                              <a href={subItem.url} className="flex w-full items-center">
                                <subItem.icon className="size-6 shrink-0" />
                                <span>{subItem.title}</span>
                              </a>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                        </AccordionContent>
                      ))}
                    </AccordionItem>
                  </Accordion>
                ) : (
                  <SidebarMenuButton asChild>
                    <a href={item.url} className="flex w-full items-center">
                      <item.icon className="text-scheme-text" />
                      <span>{item.title}</span>
                      {index === 1 && (
                        <Badge variant="outline" className="ml-auto !rounded-[5rem] py-0">
                          24
                        </Badge>
                      )}
                    </a>
                  </SidebarMenuButton>
                )}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarContent>
        <SidebarFooter className="flex flex-col gap-4 pb-6 lg:gap-6 lg:pb-0">
          <SidebarSeparator />
          <div>
            {footerItems.map((item, index) => (
              <SidebarMenuItem key={index}>
                <SidebarMenuButton asChild>
                  <a href={item.url} className="flex w-full items-center">
                    <item.icon className="text-scheme-text" />
                    <span>{item.title}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </div>
          <SidebarSeparator />
          <div className="flex items-center justify-between">
            <div className="grid grid-cols-[max-content_1fr] items-center gap-3">
              <div>
                <img
                  src="https://d22po4pjz3o32e.cloudfront.net/avatar-image.svg"
                  alt="Avatar"
                  className="size-10 rounded-full object-cover"
                />
              </div>
              <div>
                <p className="text-small font-medium">Name Surname</p>
                <p className="text-small">hello@relume.io</p>
              </div>
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger>
                <MoreHoriz className="text-scheme-text size-6" />
              </DropdownMenuTrigger>
              <DropdownMenuContent className="z-50" align="end" sideOffset={0}>
                <DropdownMenuLabel>My Profile</DropdownMenuLabel>
                <DropdownMenuLabel>Profile Settings</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Log Out</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </SidebarFooter>
      </Sidebar>
      <main className="min-h-screen w-full">
        <nav className="border-scheme-border fixed inset-x-0 top-0 z-10 flex min-h-16 items-center justify-between border-b bg-white px-6 lg:hidden">
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
          <div className="flex items-center">
            <SidebarTrigger />
          </div>
        </nav>
        <div className="w-full pt-16 lg:pt-0">{children}</div>
      </main>
    </SidebarProvider>
  );
};