"use client";

import { Button, DashboardHeader, DashboardPanel } from "@countryclub/ui-react";
import { PlusIcon } from "lucide-react";

const teeSheet = [
  { players: "Whitmore · Patel · Rios · Barlow", time: "7:30 AM" },
  { players: "Raman · Castellanos · Okafor", time: "7:40 AM" },
  { players: "Lindqvist · Dupont · Reyes · Tran", time: "7:50 AM" },
  { players: "Sorensen · Nakamura", time: "8:00 AM" },
];

export default function DashboardLayoutDemo() {
  return (
    <div className="flex h-[360px] w-full max-w-2xl flex-col">
      <DashboardPanel
        header={
          <DashboardHeader
            breadcrumb={
              <span className="text-muted-foreground text-xs">
                Club · Golf · Tee sheet
              </span>
            }
            rightActions={
              <Button size="sm">
                <PlusIcon />
                New booking
              </Button>
            }
            subtitle="Manage today's tee sheet and walk-in requests."
            title="Tee sheet"
          />
        }
      >
        <div className="flex flex-col gap-2">
          {teeSheet.map((slot) => (
            <div
              className="flex items-center justify-between rounded-lg border px-4 py-3"
              key={slot.time}
            >
              <span className="font-medium text-sm">{slot.time}</span>
              <span className="text-muted-foreground text-sm">
                {slot.players}
              </span>
            </div>
          ))}
        </div>
      </DashboardPanel>
    </div>
  );
}
Dashboard Layout

Import

Default
