wehub-resource-sync
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import { ClockIcon, PencilSquareIcon, XMarkIcon } from "@heroicons/react/20/solid";
|
|
import { cn } from "~/utils/cn";
|
|
|
|
export function DashboardAgentHeader({
|
|
view,
|
|
onNewChat,
|
|
onToggleHistory,
|
|
onClose,
|
|
}: {
|
|
view: "chat" | "history";
|
|
onNewChat: () => void;
|
|
onToggleHistory: () => void;
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
|
|
<span className="text-sm font-medium text-text-bright">Chat</span>
|
|
<div className="flex items-center gap-0.5">
|
|
<IconButton label="New chat" icon={PencilSquareIcon} onClick={onNewChat} />
|
|
<IconButton
|
|
label="History"
|
|
icon={ClockIcon}
|
|
onClick={onToggleHistory}
|
|
active={view === "history"}
|
|
/>
|
|
<IconButton label="Close" icon={XMarkIcon} onClick={onClose} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function IconButton({
|
|
label,
|
|
icon: Icon,
|
|
onClick,
|
|
active,
|
|
}: {
|
|
label: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
onClick: () => void;
|
|
active?: boolean;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
title={label}
|
|
aria-label={label}
|
|
onClick={onClick}
|
|
className={cn(
|
|
"rounded p-1.5 text-text-dimmed transition hover:bg-background-raised hover:text-text-bright",
|
|
active && "bg-background-raised text-text-bright"
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
</button>
|
|
);
|
|
}
|