Add Sort dropdown option to Events page header

This commit is contained in:
CycroftX
2026-02-03 20:42:57 +05:30
parent b3128ba5bf
commit dd57db8869

View File

@@ -1,4 +1,12 @@
import { Calendar, Ticket, Flag, Search, Filter, Plus } from 'lucide-react';
import { Calendar, Ticket, Flag, Search, Filter, Plus, ArrowUpDown } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { AppLayout } from '@/components/layout/AppLayout';
import { cn } from '@/lib/utils';
import { mockEvents, formatCurrency } from '@/data/mockData';
@@ -69,6 +77,25 @@ export default function Events() {
className="h-10 w-64 pl-10 pr-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50"
/>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="h-10 px-4 rounded-xl neu-button flex items-center gap-2">
<ArrowUpDown className="h-4 w-4" />
<span className="text-sm font-medium">Sort</span>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuLabel>Sort by</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Newest First</DropdownMenuItem>
<DropdownMenuItem>Oldest First</DropdownMenuItem>
<DropdownMenuItem>Name (A-Z)</DropdownMenuItem>
<DropdownMenuItem>Upcoming</DropdownMenuItem>
<DropdownMenuItem>Status</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<button className="h-10 px-4 rounded-xl neu-button flex items-center gap-2">
<Filter className="h-4 w-4" />
<span className="text-sm font-medium">Filter</span>