60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
interface EmailListHeaderProps {
|
|
allSelected: boolean;
|
|
someSelected: boolean;
|
|
onToggleSelectAll: () => void;
|
|
}
|
|
|
|
export default function EmailListHeader({
|
|
allSelected,
|
|
someSelected,
|
|
onToggleSelectAll,
|
|
}: EmailListHeaderProps) {
|
|
return (
|
|
<div className="flex items-center justify-between border-b px-4 py-2">
|
|
<div className="flex items-center gap-2">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
ref={(input) => {
|
|
if (input) {
|
|
(input as unknown as HTMLInputElement).indeterminate = someSelected && !allSelected;
|
|
}
|
|
}}
|
|
onClick={onToggleSelectAll}
|
|
/>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 p-0">
|
|
<ChevronDown className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuItem onClick={onToggleSelectAll}>
|
|
{allSelected ? 'Unselect all' : 'Select all'}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={onToggleSelectAll} disabled={!someSelected}>
|
|
Unselect all
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground">
|
|
Select messages to perform actions
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|