initial commit

components/layout/TopBar.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "@heroui/react";
+import Breadcrumb from "./Breadcrumb";
+import LanguageSwitch from "./LanguageSwitch";
+import ThemeSwitch from "./ThemeSwitch";
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface TopBarProps {
+  breadcrumbItems?: BreadcrumbItem[];
+}
+
+export default function TopBar({ breadcrumbItems }: TopBarProps) {
+  return (
+    <div className="flex items-center justify-between w-full">
+      {/* Left: Breadcrumb */}
+      <div className="flex items-center gap-2">
+        {breadcrumbItems && <Breadcrumb items={breadcrumbItems} />}
+      </div>
+
+      {/* Right: Actions */}
+      <div className="flex items-center gap-4">
+        {/* Language Switch */}
+        <LanguageSwitch />
+
+        {/* Theme Switch */}
+        <ThemeSwitch />
+
+        {/* Wallet Button */}
+        <Button
+          isIconOnly
+          variant="bordered"
+          className="bg-bg-surface border-border-normal min-w-10 h-10 rounded-lg"
+        >
+          <div className="flex items-center justify-center">
+            <Image src="/icon-wallet.svg" alt="Wallet" width={20} height={20} />
+            <Image
+              src="/icon-notification.svg"
+              alt="Notification"
+              width={14}
+              height={14}
+              className="ml-1"
+            />
+          </div>
+        </Button>
+
+        {/* Address Button */}
+        <Button
+          className="bg-text-primary text-white font-bold font-jetbrains text-sm h-10 px-4 rounded-lg"
+          startContent={<Image src="/icon-copy.svg" alt="Copy" width={16} height={16} />}
+        >
+          0x12...4F82
+        </Button>
+      </div>
+    </div>
+  );
+}