Spaces:
Running
Running
| "use client"; | |
| import React from "react"; | |
| import { RefreshCw } from "lucide-react"; | |
| import { Button } from "@micprotocol/ui"; | |
| export function AdminHeader({ | |
| title, | |
| subtitle, | |
| onRefresh, | |
| refreshing, | |
| actions, | |
| }: { | |
| title: string; | |
| subtitle?: string; | |
| onRefresh?: () => void; | |
| refreshing?: boolean; | |
| actions?: React.ReactNode; | |
| }) { | |
| return ( | |
| <header className="flex items-center justify-between gap-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-6 py-4"> | |
| <div className="min-w-0"> | |
| <h1 className="font-display text-xl font-semibold text-[var(--text-primary)]">{title}</h1> | |
| {subtitle ? ( | |
| <p className="mt-0.5 truncate text-sm text-[var(--text-secondary)]">{subtitle}</p> | |
| ) : null} | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| {actions} | |
| {onRefresh ? ( | |
| <Button | |
| variant="ghost" | |
| size="sm" | |
| onClick={onRefresh} | |
| disabled={refreshing} | |
| title="Refresh data" | |
| className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]" | |
| > | |
| <RefreshCw className={refreshing ? "animate-spin" : ""} /> | |
| </Button> | |
| ) : null} | |
| </div> | |
| </header> | |
| ); | |
| } | |