Erstes lauffähiges Grundgerüst: Monorepo, Fastify-API, React-Startseite, Docker

packages/ui/src/SearchInput.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** Wird links im Suchfeld angezeigt, z. B. ein Tastaturkürzel-Hinweis. */
+  hint?: string;
+}
+
+/**
+ * Zentrales Sucheingabefeld im Raycast/Spotlight-Stil.
+ * Bewusst schlicht gehalten: großer Text, viel Weißraum, keine Ablenkung.
+ */
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ hint, className = "", ...props }, ref) => {
+    return (
+      <div
+        className={`flex items-center gap-3 rounded-2xl border border-black/10 bg-white/80
+          px-5 py-4 shadow-lg backdrop-blur-md transition-colors
+          focus-within:border-black/20 dark:border-white/10 dark:bg-white/5
+          dark:focus-within:border-white/20 ${className}`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="h-5 w-5 shrink-0 text-black/40 dark:text-white/40"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <input
+          ref={ref}
+          type="text"
+          autoComplete="off"
+          spellCheck={false}
+          className="w-full bg-transparent text-lg text-black outline-none placeholder:text-black/30
+            dark:text-white dark:placeholder:text-white/30"
+          {...props}
+        />
+        {hint ? (
+          <span className="shrink-0 rounded-md border border-black/10 px-1.5 py-0.5 text-xs
+            text-black/40 dark:border-white/10 dark:text-white/40">
+            {hint}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+SearchInput.displayName = "SearchInput";

packages/ui/src/StatusBadge.tsx

@@ -0,0 +1,21 @@
+export interface StatusBadgeProps {
+  online: boolean;
+  label?: string;
+}
+
+/**
+ * Kleiner Statuspunkt (online/offline), z. B. für den Backend-Health-Check
+ * oder später für einzelne Dienste.
+ */
+export function StatusBadge({ online, label }: StatusBadgeProps) {
+  return (
+    <span className="inline-flex items-center gap-2 text-sm text-black/60 dark:text-white/60">
+      <span
+        className={`h-2 w-2 rounded-full ${
+          online ? "bg-emerald-500" : "bg-red-500"
+        }`}
+      />
+      {label ?? (online ? "Online" : "Offline")}
+    </span>
+  );
+}

packages/ui/src/index.ts

@@ -0,0 +1,5 @@
+export { SearchInput } from "./SearchInput.js";
+export type { SearchInputProps } from "./SearchInput.js";
+
+export { StatusBadge } from "./StatusBadge.js";
+export type { StatusBadgeProps } from "./StatusBadge.js";