Sidebar Preskok Demo

import { Heading } from "@/components/ui/preskok-ui/heading"
import {
  SidebarInset,
  SidebarProvider,
} from "@/components/ui/preskok-ui/sidebar"

import AppSidebar from "./app-sidebar"
import AppSidebarNav from "./app-sidebar-nav"

export default function SidebarPreskokDemo() {
  return (
    <SidebarProvider className="relative h-[28rem] min-h-0 overflow-hidden rounded-lg border bg-background">
      <AppSidebar collapsible="icon" className="absolute h-full" />
      <SidebarInset>
        <AppSidebarNav />
        <section className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="space-y-1">
              <Heading>Operations Overview</Heading>
              <p className="text-sm text-muted-foreground">
                Keep fulfillment, payments, and support in sync.
              </p>
            </div>
            <span className="rounded-md border bg-background px-2.5 py-1 text-xs font-medium text-muted-foreground">
              Updated 2 minutes ago
            </span>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2 rounded-xl border bg-background p-4">
              <p className="text-xs text-muted-foreground">Orders Today</p>
              <p className="text-2xl font-semibold">148</p>
              <p className="text-xs text-muted-foreground">+12% vs yesterday</p>
            </div>
            <div className="space-y-2 rounded-xl border bg-background p-4">
              <p className="text-xs text-muted-foreground">Pending Tickets</p>
              <p className="text-2xl font-semibold">9</p>
              <p className="text-xs text-muted-foreground">
                3 need priority response
              </p>
            </div>
            <div className="space-y-2 rounded-xl border bg-background p-4">
              <p className="text-xs text-muted-foreground">Failed Payments</p>
              <p className="text-2xl font-semibold">4</p>
              <p className="text-xs text-muted-foreground">
                All from one billing region
              </p>
            </div>
          </div>

          <div className="grid gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
            <div className="rounded-xl border bg-background p-4 lg:p-5">
              <Heading level={3}>Recent Activity</Heading>
              <div className="mt-4 space-y-3">
                <div className="flex items-start justify-between gap-3 border-b pb-3">
                  <div>
                    <p className="text-sm font-medium">Order #3921 packed</p>
                    <p className="text-xs text-muted-foreground">Warehouse A</p>
                  </div>
                  <span className="text-xs text-muted-foreground">2m ago</span>
                </div>
                <div className="flex items-start justify-between gap-3 border-b pb-3">
                  <div>
                    <p className="text-sm font-medium">Ticket #188 escalated</p>
                    <p className="text-xs text-muted-foreground">
                      Shipping delay complaint
                    </p>
                  </div>
                  <span className="text-xs text-muted-foreground">11m ago</span>
                </div>
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-sm font-medium">
                      Payout batch processed
                    </p>
                    <p className="text-xs text-muted-foreground">
                      $12,420 settled
                    </p>
                  </div>
                  <span className="text-xs text-muted-foreground">43m ago</span>
                </div>
              </div>
            </div>

            <div className="rounded-xl border bg-background p-4 lg:p-5">
              <Heading level={3}>Team Focus</Heading>
              <ul className="mt-4 space-y-3 text-sm text-muted-foreground">
                <li className="border-b pb-2">Review failed payment retries</li>
                <li className="border-b pb-2">
                  Confirm tomorrow stock transfer
                </li>
                <li>Prepare weekly support report</li>
              </ul>
            </div>
          </div>
        </section>
      </SidebarInset>
    </SidebarProvider>
  )
}

"use client"

import {
  CircleHelpIcon,
  CreditCardIcon,
  FileTextIcon,
  LayoutDashboardIcon,
  MessageSquareIcon,
  PackageIcon,
  SettingsIcon,
  ShoppingBagIcon,
  TicketIcon,
} from "lucide-react"

import { Avatar } from "@/components/ui/preskok-ui/avatar"
import { PreskokIcon } from "@/components/ui/preskok-ui/preskok-icon"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarRail,
} from "@/components/ui/preskok-ui/sidebar"

const overviewItems = [
  {
    title: "Overview",
    href: "#overview",
    icon: LayoutDashboardIcon,
    isActive: true,
  },
  {
    title: "Orders",
    href: "#orders",
    icon: ShoppingBagIcon,
  },
  {
    title: "Products",
    href: "#products",
    icon: PackageIcon,
  },
  {
    title: "Payments",
    href: "#payments",
    icon: CreditCardIcon,
    badge: "4",
  },
]

const supportItems = [
  { title: "Tickets", href: "#tickets", icon: TicketIcon },
  { title: "Chat Support", href: "#chat", icon: MessageSquareIcon },
  { title: "FAQ", href: "#faq", icon: CircleHelpIcon },
  { title: "Sales Docs", href: "#sales-docs", icon: FileTextIcon },
]

export default function AppSidebar(
  props: React.ComponentProps<typeof Sidebar>
) {
  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton href="/navigation/sidebar" size="lg">
              <span className="flex size-8 shrink-0 items-center justify-center">
                <PreskokIcon className="size-5!" />
              </span>
              <span className="grid flex-1 text-left leading-tight">
                <span className="truncate font-medium">Preskok UI</span>
                <span className="truncate text-xs text-sidebar-foreground/70">
                  Operations
                </span>
              </span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Overview</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {overviewItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    href={item.href}
                    isActive={item.isActive}
                    tooltip={item.title}
                  >
                    <item.icon />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                  {item.badge && (
                    <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
                  )}
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>Support</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Support">
                  <SettingsIcon />
                  <span>Support</span>
                </SidebarMenuButton>
                <SidebarMenuSub>
                  {supportItems.map((item) => (
                    <SidebarMenuSubItem key={item.title}>
                      <SidebarMenuSubButton href={item.href}>
                        <item.icon />
                        <span>{item.title}</span>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  ))}
                </SidebarMenuSub>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg">
              <Avatar isSquare initials="MC" alt="Maya Chen" />
              <span className="grid flex-1 text-left leading-tight">
                <span className="truncate font-medium">Maya Chen</span>
                <span className="truncate text-xs text-sidebar-foreground/70">
                  maya@preskok.example
                </span>
              </span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}

"use client"

import {
  Command,
  LayoutDashboardIcon,
  LogOutIcon,
  SettingsIcon,
} from "lucide-react"

import { Avatar } from "@/components/ui/preskok-ui/avatar"
import {
  Breadcrumbs,
  BreadcrumbsItem,
} from "@/components/ui/preskok-ui/breadcrumbs"
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/preskok-ui/menu"
import { SidebarTrigger } from "@/components/ui/preskok-ui/sidebar"

export default function AppSidebarNav() {
  return (
    <nav className="sticky top-0 z-40 flex h-14 shrink-0 items-center gap-4 border-b bg-background/80 px-4 backdrop-blur-xl">
      <SidebarTrigger className="-ml-1" />
      <Breadcrumbs className="hidden md:flex">
        <BreadcrumbsItem href="/navigation/sidebar">Dashboard</BreadcrumbsItem>
        <BreadcrumbsItem>Newsletter</BreadcrumbsItem>
      </Breadcrumbs>
      <UserMenu />
    </nav>
  )
}

function UserMenu() {
  return (
    <Menu>
      <MenuTrigger className="ml-auto" aria-label="Open profile menu">
        <Avatar isSquare initials="MC" alt="Maya Chen" />
      </MenuTrigger>
      <MenuContent popover={{ placement: "bottom end" }} className="min-w-64">
        <MenuItem href="#dashboard">
          <LayoutDashboardIcon data-slot="icon" />
          <MenuLabel>Dashboard</MenuLabel>
        </MenuItem>
        <MenuItem href="#settings">
          <SettingsIcon data-slot="icon" />
          <MenuLabel>Settings</MenuLabel>
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <Command data-slot="icon" />
          <MenuLabel>Command Menu</MenuLabel>
        </MenuItem>
        <MenuSeparator />
        <MenuItem href="#logout">
          <LogOutIcon data-slot="icon" />
          <MenuLabel>Log out</MenuLabel>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}