Top bar with tabs

import { LuEllipsis, LuMail, LuMapPin, LuPencil, LuShare2 } from "react-icons/lu";
import {
  Avatar,
  Badge,
  Breadcrumb,
  BreadcrumbItem,
  Button,
  IconButton,
  Tab,
  TabList,
  TabPanel,
  Tabs,
} from "@nexera-ui/react";

// Sample data
interface Person {
  id: string;
  name: string;
  initials: string;
  role: string;
  team: string;
  email: string;
  location: string;
  status: "Active" | "On leave" | "Remote" | "Invited";
}

const PEOPLE: Person[] = [
  {
    id: "p1",
    name: "Ayesha Khan",
    initials: "AK",
    role: "Senior product designer",
    team: "Design",
    email: "ayesha.khan@northwind.io",
    location: "London",
    status: "Active",
  },
  {
    id: "p2",
    name: "Sara Malik",
    initials: "SM",
    role: "Payroll specialist",
    team: "People Ops",
    email: "sara.malik@northwind.io",
    location: "Lisbon",
    status: "On leave",
  },
  {
    id: "p3",
    name: "Ahmed Raza",
    initials: "AR",
    role: "Engineering manager",
    team: "Engineering",
    email: "ahmed.raza@northwind.io",
    location: "Lahore",
    status: "Remote",
  },
  {
    id: "p4",
    name: "Mia Jensen",
    initials: "MJ",
    role: "Product manager",
    team: "Product",
    email: "mia.jensen@northwind.io",
    location: "Copenhagen",
    status: "Active",
  },
  {
    id: "p5",
    name: "Luis Ortega",
    initials: "LO",
    role: "Frontend engineer",
    team: "Engineering",
    email: "luis.ortega@northwind.io",
    location: "Madrid",
    status: "Active",
  },
  {
    id: "p6",
    name: "Yuki Tanaka",
    initials: "YT",
    role: "Recruiter",
    team: "People Ops",
    email: "yuki.tanaka@northwind.io",
    location: "Tokyo",
    status: "Active",
  },
  {
    id: "p7",
    name: "Chloe Martin",
    initials: "CM",
    role: "Data analyst",
    team: "Finance",
    email: "chloe.martin@northwind.io",
    location: "Paris",
    status: "Remote",
  },
  {
    id: "p8",
    name: "Omar Haddad",
    initials: "OH",
    role: "Support lead",
    team: "Customer",
    email: "omar.haddad@northwind.io",
    location: "Dubai",
    status: "Invited",
  },
];

const person = PEOPLE[2];

const DETAILS = [
  ["Employee ID", "NW-0412"],
  ["Start date", "3 March 2021"],
  ["Manager", "Mia Jensen"],
  ["Contract", "Full time, permanent"],
  ["Work pattern", "Mon to Fri, 09:00 to 17:30"],
  ["Office", "Lahore hub"],
] as const;

const TIME_OFF = [
  ["Annual leave", "14 of 25 days left"],
  ["Sick leave", "2 days taken this year"],
  ["Next booked", "24 to 28 November"],
] as const;

const PANEL = "bg-page p-4 @3xl:p-6";

/** Top bar with tabs: breadcrumbs, the page title, actions and section tabs over an employee profile. */
export default function TopBarWithTabs() {
  if (!person) return null;
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="overflow-hidden rounded-xl border border-default bg-surface shadow-sm">
        <div className="grid gap-4 px-4 pt-4 @3xl:px-6 @3xl:pt-6">
          <Breadcrumb>
            <BreadcrumbItem type="home" label="Home" href="#home" />
            <BreadcrumbItem label="People" href="#people" />
            <BreadcrumbItem label="Engineering" href="#engineering" />
            <BreadcrumbItem label={person.name} href="#ahmed-raza" />
          </Breadcrumb>
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div className="flex min-w-0 items-center gap-3">
              <Avatar size="xl" initials={person.initials} isDecorative />
              <div className="grid min-w-0 gap-1">
                <div className="flex flex-wrap items-center gap-2">
                  <h2 className="text-heading-h3 text-primary">{person.name}</h2>
                  <Badge tone="remote" label={person.status} />
                </div>
                <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-body-small text-secondary">
                  <span>{person.role}</span>
                  <span className="inline-flex items-center gap-1">
                    <LuMapPin aria-hidden="true" />
                    {person.location}
                  </span>
                </p>
              </div>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <Button variant="secondary" size="md" leadingIcon={<LuMail />}>
                Message
              </Button>
              <Button size="md" leadingIcon={<LuPencil />}>
                Edit profile
              </Button>
              <IconButton
                variant="ghost"
                size="md"
                icon={<LuShare2 />}
                aria-label="Share profile"
              />
              <IconButton
                variant="ghost"
                size="md"
                icon={<LuEllipsis />}
                aria-label="More actions"
              />
            </div>
          </div>
        </div>
        <Tabs defaultSelectedKey="overview">
          <TabList
            aria-label="Employee sections"
            className="border-b border-default px-4 @3xl:px-6"
          >
            <Tab id="overview" label="Overview" />
            <Tab id="time-off" label="Time off" count="2" />
            <Tab id="documents" label="Documents" count="8" />
            <Tab id="payroll" label="Payroll" />
          </TabList>
          <TabPanel id="overview" className={PANEL}>
            <h3 className="mb-3 text-heading-h4 text-primary">Employment</h3>
            <dl className="grid gap-3 rounded-lg border border-default bg-surface p-4 @3xl:grid-cols-3">
              {DETAILS.map(([term, value]) => (
                <div key={term} className="grid gap-0.5">
                  <dt className="text-body-small text-secondary">{term}</dt>
                  <dd className="text-body-strong text-primary">{value}</dd>
                </div>
              ))}
            </dl>
          </TabPanel>
          <TabPanel id="time-off" className={PANEL}>
            <h3 className="mb-3 text-heading-h4 text-primary">Time off</h3>
            <ul className="m-0 grid list-none gap-3 p-0 @3xl:grid-cols-3">
              {TIME_OFF.map(([label, value]) => (
                <li
                  key={label}
                  className="grid gap-0.5 rounded-lg border border-default bg-surface p-4"
                >
                  <span className="text-body-small text-secondary">{label}</span>
                  <span className="text-body-strong text-primary">{value}</span>
                </li>
              ))}
            </ul>
          </TabPanel>
          <TabPanel id="documents" className={PANEL}>
            <p className="text-body-default text-secondary">
              8 documents: contract, NDA, two payslip summaries and four certificates.
            </p>
          </TabPanel>
          <TabPanel id="payroll" className={PANEL}>
            <p className="text-body-default text-secondary">
              Paid monthly on the last working day. Next pay date: 31 October.
            </p>
          </TabPanel>
        </Tabs>
      </div>
    </div>
  );
}