50 lines
1.6 KiB
TypeScript
Executable File
50 lines
1.6 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import { Calendar, ChevronDown } from 'lucide-react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Button } from '#shared/ui/Button';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '#shared/ui/DropdownMenu';
|
|
|
|
export function ToolbarMenu() {
|
|
const months = [
|
|
{ title: 'January, 2024' },
|
|
{ title: 'February, 2024' },
|
|
{ title: 'March, 2024', active: true },
|
|
{ title: 'April, 2024' },
|
|
{ title: 'May, 2024' },
|
|
{ title: 'June, 2024' },
|
|
{ title: 'July, 2024' },
|
|
{ title: 'August, 2024' },
|
|
{ title: 'September, 2024' },
|
|
{ title: 'October, 2024' },
|
|
{ title: 'November, 2024' },
|
|
{ title: 'December, 2024' }
|
|
];
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" className="flex flex-nowrap items-center gap-1">
|
|
<Calendar className="h-4 w-4" />
|
|
<span className="hidden whitespace-nowrap md:inline">September, 2024</span>
|
|
<span className="inline whitespace-nowrap md:hidden">Sep, 2024</span>
|
|
<ChevronDown className="ml-1 h-3 w-3 lg:ml-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="max-h-62.5 w-48 overflow-y-auto">
|
|
{months.map((item, index) => (
|
|
<DropdownMenuItem
|
|
key={index}
|
|
className={item.active ? 'bg-muted font-medium' : ''}
|
|
asChild
|
|
>
|
|
<Link to="/" className="w-full">
|
|
{item.title}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|