App shells

"use client";

import { Bell, Plus, Search } from "lucide-react";
import * as React from "react";

import { Avatar, Button, WaveMark, cn } from "@waveinno/ui";

const TABS = ["Overview", "Sessions", "Gates", "Payments", "Reports", "Settings"];

export default function ShellTopnav() {
  const [tab, setTab] = React.useState("Overview");
  return (
    <div className="min-h-[560px] bg-surface">
      <header className="border-b border-border bg-canvas">
        <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4 sm:px-6">
          <WaveMark className="size-7" />
          <span className="text-[14px] font-semibold text-text">Gulshan Parking</span>
          <div className="ml-auto flex items-center gap-1">
            <button type="button" aria-label="Search" className="grid size-9 cursor-pointer place-items-center rounded-full text-muted hover:bg-hover hover:text-text">
              <Search className="size-[18px]" />
            </button>
            <button type="button" aria-label="Notifications" className="relative grid size-9 cursor-pointer place-items-center rounded-full text-muted hover:bg-hover hover:text-text">
              <Bell className="size-[18px]" />
              <span className="absolute right-2 top-2 size-2 rounded-full bg-danger ring-2 ring-canvas" />
            </button>
            <Avatar name="Karim Ahmed" size="sm" className="ml-1" />
          </div>
        </div>
        <nav aria-label="Sections" className="mx-auto flex max-w-6xl gap-1 overflow-x-auto px-4 sm:px-6">
          {TABS.map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setTab(t)}
              aria-current={tab === t ? "page" : undefined}
              className={cn(
                "relative shrink-0 cursor-pointer px-3 pb-3 pt-1.5 text-[13.5px] font-medium transition-colors",
                tab === t ? "text-text after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:rounded-full after:bg-primary" : "text-muted hover:text-text",
              )}
            >
              {t}
            </button>
          ))}
        </nav>
      </header>
      <main className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
        <div className="flex items-center justify-between">
          <h1 className="disp text-[24px] font-bold leading-8 text-text">{tab}</h1>
          <Button variant="primary">
            <Plus /> New session
          </Button>
        </div>
        <div className="mt-6 grid gap-4 sm:grid-cols-3">
          {[0, 1, 2].map((i) => (
            <div key={i} className="h-28 rounded-[16px] border border-dashed border-border2 bg-raised/60" />
          ))}
        </div>
        <div className="mt-4 h-64 rounded-[16px] border border-dashed border-border2 bg-raised/60" />
      </main>
    </div>
  );
}

"use client";

import { Bell, ChevronDown, Download } from "lucide-react";
import * as React from "react";

import { Avatar, Button, WaveinnoLogo, cn } from "@waveinno/ui";

const LINKS = ["Dashboard", "Sessions", "Passes", "Reports"];

export default function ShellStacked() {
  const [active, setActive] = React.useState("Dashboard");
  return (
    <div className="min-h-[600px] bg-surface">
      <div className="bg-[linear-gradient(135deg,var(--brand-1),var(--brand-2))] pb-32">
        <header className="mx-auto flex h-16 max-w-6xl items-center gap-6 px-4 sm:px-6">
          <WaveinnoLogo tone="inverse" className="h-5" />
          <nav aria-label="Main" className="hidden items-center gap-1 md:flex">
            {LINKS.map((l) => (
              <button
                key={l}
                type="button"
                onClick={() => setActive(l)}
                className={cn("cursor-pointer rounded-[10px] px-3 py-1.5 text-[13.5px] font-medium transition-colors", active === l ? "bg-white/15 text-white" : "text-white/75 hover:bg-white/10 hover:text-white")}
              >
                {l}
              </button>
            ))}
          </nav>
          <div className="ml-auto flex items-center gap-2">
            <button type="button" aria-label="Notifications" className="grid size-9 cursor-pointer place-items-center rounded-full text-white/80 hover:bg-white/10 hover:text-white">
              <Bell className="size-[18px]" />
            </button>
            <button type="button" className="flex cursor-pointer items-center gap-2 rounded-full py-1 pl-1 pr-2 text-white hover:bg-white/10">
              <Avatar name="Karim Ahmed" size="sm" />
              <ChevronDown className="size-4 text-white/70" />
            </button>
          </div>
        </header>
        <div className="mx-auto flex max-w-6xl flex-wrap items-end justify-between gap-4 border-t border-white/15 px-4 pt-8 sm:px-6">
          <div>
            <p className="text-[13px] text-white/70">Thursday, 1 October</p>
            <h1 className="disp text-[28px] font-bold leading-9 tracking-[-0.025em] text-white">{active}</h1>
          </div>
          <Button variant="glass">
            <Download /> Export
          </Button>
        </div>
      </div>
      <main className="mx-auto -mt-24 max-w-6xl px-4 pb-10 sm:px-6">
        <div className="min-h-80 rounded-[20px] border border-border bg-raised p-6 shadow-[0_24px_50px_-30px_rgba(5,8,22,.35)]">
          <div className="grid gap-4 sm:grid-cols-3">
            {[0, 1, 2].map((i) => (
              <div key={i} className="h-24 rounded-[14px] border border-dashed border-border2" />
            ))}
          </div>
          <div className="mt-4 h-48 rounded-[14px] border border-dashed border-border2" />
        </div>
      </main>
    </div>
  );
}