first commit

SwyxWeb: React-Frontend und Spring-Boot-Backend mit SwyxTray-Mock.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/Tabs.tsx

@@ -0,0 +1,42 @@
+export interface Tab<Id extends string> {
+  id: Id
+  label: string
+}
+
+interface Props<Id extends string> {
+  tabs: Tab<Id>[]
+  active: Id
+  onChange: (id: Id) => void
+}
+
+/** Kennung des Knopfes zu einem Tab – die Panels verweisen mit aria-labelledby darauf. */
+export function tabId(id: string): string {
+  return `tab-${id}`
+}
+
+/** Kennung des Panels zu einem Tab. */
+export function panelId(id: string): string {
+  return `panel-${id}`
+}
+
+/** Tab-Leiste. Native Knöpfe, damit die Tastaturbedienung von selbst funktioniert. */
+export default function Tabs<Id extends string>({ tabs, active, onChange }: Props<Id>) {
+  return (
+    <nav className="tabs" role="tablist" aria-label="Bereiche">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          id={tabId(tab.id)}
+          type="button"
+          role="tab"
+          className={`tabs__button${tab.id === active ? ' tabs__button--active' : ''}`}
+          aria-selected={tab.id === active}
+          aria-controls={panelId(tab.id)}
+          onClick={() => onChange(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </nav>
+  )
+}