| import React from 'react'; |
| import { Link, useLocation } from 'react-router-dom'; |
| import { LogOut, Settings } from 'lucide-react'; |
| import { Button } from '@/components/ui/button'; |
| import { cn } from '@/lib/utils'; |
| import { apiFetch } from '@/lib/api'; |
| import { useAuth } from '@/context/AuthContext'; |
|
|
| |
| |
| |
| export default function GoogleAuthBar() { |
| const location = useLocation(); |
| const { phase, googleOn, microsoftOn, user, refresh } = useAuth(); |
|
|
| const logout = async () => { |
| try { |
| await apiFetch('/api/auth/logout', { method: 'POST' }); |
| await refresh(); |
| } catch (e) { |
| console.error(e); |
| } |
| }; |
|
|
| if (phase === 'loading' || (phase === 'ready' && !googleOn && !microsoftOn)) { |
| if (phase === 'loading') { |
| return ( |
| <div |
| className="h-9 w-24 shrink-0 rounded-md bg-slate-100/80 animate-pulse" |
| aria-hidden |
| /> |
| ); |
| } |
| return null; |
| } |
|
|
| if (phase === 'error' || !user) { |
| return null; |
| } |
|
|
| const settingsActive = |
| location.pathname === '/settings' || location.pathname.startsWith('/settings/'); |
|
|
| return ( |
| <div className="flex max-w-[min(100vw-6rem,28rem)] flex-wrap items-center justify-end gap-2"> |
| <Button |
| asChild |
| variant="ghost" |
| size="icon" |
| className={cn( |
| 'h-9 w-9 shrink-0 text-slate-600 hover:text-violet-700 hover:bg-violet-50', |
| settingsActive && 'text-violet-700 bg-violet-50' |
| )} |
| title="Settings" |
| aria-current={settingsActive ? 'page' : undefined} |
| > |
| <Link to="/settings"> |
| <Settings className="h-5 w-5" aria-hidden /> |
| <span className="sr-only">Settings</span> |
| </Link> |
| </Button> |
| {user.picture ? ( |
| <img |
| src={user.picture} |
| alt="" |
| className="h-8 w-8 shrink-0 rounded-full border border-slate-200 object-cover" |
| referrerPolicy="no-referrer" |
| /> |
| ) : null} |
| <span className="hidden min-w-0 truncate text-sm text-slate-600 lg:inline"> |
| {user.name || user.email || 'Signed in'} |
| </span> |
| <Button |
| type="button" |
| variant="outline" |
| size="sm" |
| className="shrink-0 gap-1" |
| onClick={logout} |
| title="Sign out" |
| > |
| <LogOut className="h-3.5 w-3.5" /> |
| <span className="hidden sm:inline">Sign out</span> |
| </Button> |
| </div> |
| ); |
| } |
|
|
