Add Sort dropdown option to Events page header

src/pages/Events.tsx

@@ -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>