init repo

components/topbar.tsx

@@ -0,0 +1,97 @@
+"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>
+  )
+}