feat: vollständiges HeroUI v3 Redesign — Types, Utils, Layout, Sections, Dark SaaS Design

frontend/src/components/layout/Topbar.tsx

@@ -0,0 +1,24 @@
+import { Chip } from '@heroui/react';
+
+type Props = {
+  guildName: string;
+  statusMessage?: string;
+  children?: React.ReactNode;
+};
+
+export function Topbar({ guildName, statusMessage, children }: Props) {
+  return (
+    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{guildName}</h1>
+        <p className="mt-1 text-small text-default-500">Bot-Dashboard Verwaltung</p>
+      </div>
+      <div className="flex items-center gap-3">
+        {statusMessage && (
+          <Chip color="warning" size="sm" variant="flat">{statusMessage}</Chip>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}