43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { ChevronDown, Inbox } from 'lucide-react';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
|
|
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="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">Messages</h2>
|
|
</div>
|
|
|
|
<span className="text-sm text-gray-600">
|
|
{totalEmails} {totalEmails === 1 ? 'email' : 'emails'}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|