Add ride detail pages

src/components/auth/AuthButtons.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { User, Settings, LogOut, Trophy } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/use-toast';
+
+export function AuthButtons() {
+  const { user, profile, signOut } = useAuth();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [loggingOut, setLoggingOut] = useState(false);
+
+  const handleSignOut = async () => {
+    setLoggingOut(true);
+    try {
+      await signOut();
+      toast({
+        title: "Signed out",
+        description: "You've been signed out successfully.",
+      });
+      navigate('/');
+    } catch (error: any) {
+      toast({
+        variant: "destructive",
+        title: "Error signing out",
+        description: error.message,
+      });
+    } finally {
+      setLoggingOut(false);
+    }
+  };
+
+  if (!user) {
+    return (
+      <>
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          className="hidden sm:flex"
+          onClick={() => navigate('/auth?tab=signin')}
+        >
+          Sign In
+        </Button>
+        <Button 
+          size="sm" 
+          className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+          onClick={() => navigate('/auth?tab=signup')}
+        >
+          Join ThrillWiki
+        </Button>
+      </>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+          <Avatar className="h-8 w-8">
+            <AvatarImage src={profile?.avatar_url || ''} alt={profile?.display_name || profile?.username || ''} />
+            <AvatarFallback>
+              {(profile?.display_name || profile?.username || user.email || 'U').charAt(0).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {profile?.display_name || profile?.username}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => navigate('/profile')}>
+          <User className="mr-2 h-4 w-4" />
+          <span>Profile</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => navigate('/profile#lists')}>
+          <Trophy className="mr-2 h-4 w-4" />
+          <span>My Lists</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => navigate('/profile#settings')}>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>Settings</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleSignOut} disabled={loggingOut}>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>{loggingOut ? 'Signing out...' : 'Sign out'}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}