frontend: redesign homepage with magic dock and login dialog
- Replace top login/register buttons with magic dock navigation - Add dock items: home, downloads, blog, and conditional login/logout - Show dashboard icon in dock when authenticated - Extract HomePageClient for client-side dialog state
This commit is contained in:
74
frontend/app/home-dock.tsx
Normal file
74
frontend/app/home-dock.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { Dock, DockIcon } from "@/components/ui/dock";
|
||||
import { signOut } from "next-auth/react";
|
||||
import { Home, User, LogOut, Download, BookOpen, LayoutDashboard } from "lucide-react";
|
||||
|
||||
export function HomeDock({
|
||||
isAuthenticated,
|
||||
onLoginClick,
|
||||
}: {
|
||||
isAuthenticated: boolean;
|
||||
onLoginClick?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="fixed bottom-8 left-1/2 -translate-x-1/2">
|
||||
<Dock>
|
||||
<DockIcon>
|
||||
<a href="/" aria-label="首页">
|
||||
<Home className="h-5 w-5 text-slate-700" />
|
||||
</a>
|
||||
</DockIcon>
|
||||
<DockIcon>
|
||||
<a
|
||||
href="https://file.liukersun.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="下载网站"
|
||||
>
|
||||
<Download className="h-5 w-5 text-slate-700" />
|
||||
</a>
|
||||
</DockIcon>
|
||||
<DockIcon>
|
||||
<a
|
||||
href="https://blog.liukersun.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="博客"
|
||||
>
|
||||
<BookOpen className="h-5 w-5 text-slate-700" />
|
||||
</a>
|
||||
</DockIcon>
|
||||
{isAuthenticated && (
|
||||
<DockIcon>
|
||||
<a href="/dashboard" aria-label="仪表盘">
|
||||
<LayoutDashboard className="h-5 w-5 text-slate-700" />
|
||||
</a>
|
||||
</DockIcon>
|
||||
)}
|
||||
<DockIcon>
|
||||
{isAuthenticated ? (
|
||||
<button
|
||||
onClick={async () => {
|
||||
await signOut({ redirect: false });
|
||||
window.location.href = "/";
|
||||
}}
|
||||
aria-label="退出"
|
||||
className="flex h-full w-full items-center justify-center"
|
||||
>
|
||||
<LogOut className="h-5 w-5 text-slate-700" />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={onLoginClick}
|
||||
aria-label="登录"
|
||||
className="flex h-full w-full items-center justify-center"
|
||||
>
|
||||
<User className="h-5 w-5 text-slate-700" />
|
||||
</button>
|
||||
)}
|
||||
</DockIcon>
|
||||
</Dock>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user