52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { ChevronDown, Inbox } 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;
|
|
currentFolder?: string;
|
|
totalEmails?: number;
|
|
}
|
|
|
|
export default function EmailListHeader({
|
|
allSelected,
|
|
someSelected,
|
|
onToggleSelectAll,
|
|
currentFolder = 'Inbox',
|
|
totalEmails = 0
|
|
}: EmailListHeaderProps) {
|
|
return (
|
|
<div className="border-b border-gray-100 bg-white/95">
|
|
<div className="flex items-center justify-between px-4 h-14">
|
|
<div className="flex items-center gap-3">
|
|
<Checkbox
|
|
checked={allSelected}
|
|
ref={(input) => {
|
|
if (input) {
|
|
(input as unknown as HTMLInputElement).indeterminate = someSelected && !allSelected;
|
|
}
|
|
}}
|
|
onCheckedChange={onToggleSelectAll}
|
|
className="mt-0.5"
|
|
/>
|
|
<h2 className="text-base font-semibold text-gray-900 capitalize">{currentFolder.toLowerCase()}</h2>
|
|
</div>
|
|
|
|
<span className="text-sm text-gray-600">
|
|
{totalEmails} emails
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|