Add Sort dropdown option to Events page header
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user