57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import type { EntryTab } from "@/features/entries/components/entries-panel.types";
|
|
import ToggleButtonGroup from "@/shared/components/forms/toggle-button-group";
|
|
|
|
type EntriesPanelHeaderProps = {
|
|
entryTab: EntryTab;
|
|
activeGroupId: number | null;
|
|
activeFilterCount: number;
|
|
onTabChange: (tab: EntryTab) => void;
|
|
onOpenFilters: () => void;
|
|
onOpenCreate: () => void;
|
|
};
|
|
|
|
export default function EntriesPanelHeader({
|
|
entryTab,
|
|
activeGroupId,
|
|
activeFilterCount,
|
|
onTabChange,
|
|
onOpenFilters,
|
|
onOpenCreate
|
|
}: EntriesPanelHeaderProps) {
|
|
return (
|
|
<div className="card-header">
|
|
<ToggleButtonGroup
|
|
value={entryTab}
|
|
onChange={onTabChange}
|
|
ariaLabel="Entries and schedules tab"
|
|
sizeClassName="px-3 py-2 text-xs font-semibold"
|
|
options={[
|
|
{ value: "ENTRIES", label: "Entries", className: "mr-[-10px] w-24" },
|
|
{ value: "SCHEDULES", label: "Schedules", className: "w-24" }
|
|
]}
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onOpenFilters}
|
|
className="rounded-lg btn-outline-accent px-3 py-1 text-xs font-semibold disabled:opacity-50"
|
|
disabled={!activeGroupId}
|
|
>
|
|
Filters{activeFilterCount ? ` (${activeFilterCount})` : ""}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onOpenCreate}
|
|
className="flex h-8 w-8 -translate-y-0.5 items-center justify-center rounded-full border border-accent bg-panel text-lg font-semibold leading-none hover:border-accent-strong disabled:opacity-50"
|
|
disabled={!activeGroupId}
|
|
aria-label={entryTab === "ENTRIES" ? "Add entry" : "Add schedule"}
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|