"use client";

import { useState } from "react";
import { DashboardTopbar, SidebarProvider } from "@countryclub/ui-react";

export default function DashboardTopbarDemo() {
  const [lastAction, setLastAction] = useState("Nothing yet");

  return (
    <div className="w-full overflow-hidden rounded-xl border">
      {/* SidebarProvider supplies the context the topbar's sidebar trigger
          needs. In a real app the topbar sits inside your dashboard shell. */}
      <SidebarProvider className="min-h-0">
        <DashboardTopbar
          user={{
            name: "August Whitmore",
            email: "august@country.club",
            initials: "AW",
          }}
          onSearch={() => setLastAction("Opened search palette")}
          onSettings={() => setLastAction("Opened settings")}
          onLogout={() => setLastAction("Logged out")}
          supportHref="mailto:support@country.club?subject=Dashboard%20support"
        />
      </SidebarProvider>
      <p className="border-t bg-muted/40 px-4 py-2 text-muted-foreground text-xs">
        Last action: {lastAction}
      </p>
    </div>
  );
}
Dashboard Topbar

Import

Default
