98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import { Search, Bell, Globe } from "lucide-react"
|
|
import { Input } from "@/components/ui/input"
|
|
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 { Badge } from "@/components/ui/badge"
|
|
import { useTranslation } from "@/lib/i18n"
|
|
|
|
export function Topbar() {
|
|
const { t, locale, setLocale } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex items-center justify-between p-6 border-b bg-background">
|
|
<div className="flex items-center gap-4 flex-1 max-w-md">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
|
<Input placeholder={t("topbar.search")} className="pl-10" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setLocale(locale === "en" ? "zh" : "en")}
|
|
className="flex items-center gap-1.5"
|
|
>
|
|
<Globe className="h-4 w-4" />
|
|
{locale === "en" ? "中文" : "EN"}
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="relative">
|
|
<Bell className="h-4 w-4" />
|
|
<Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs">3</Badge>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-80">
|
|
<DropdownMenuLabel>{t("topbar.notifications")}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm font-medium">{t("topbar.newDealCreated")}</p>
|
|
<p className="text-xs text-muted-foreground">{t("topbar.newDealDetail")}</p>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm font-medium">{t("topbar.taskDueSoon")}</p>
|
|
<p className="text-xs text-muted-foreground">{t("topbar.taskDueDetail")}</p>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-sm font-medium">{t("topbar.dealClosed")}</p>
|
|
<p className="text-xs text-muted-foreground">{t("topbar.dealClosedDetail")}</p>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
|
|
alt="John Doe"
|
|
className="object-cover"
|
|
/>
|
|
<AvatarFallback>JD</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>{t("topbar.myAccount")}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>{t("topbar.profile")}</DropdownMenuItem>
|
|
<DropdownMenuItem>{t("topbar.settings")}</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>{t("topbar.logOut")}</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|