feat: improve app ui and project metadata

apps/web/components/ui/SegmentedControl.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+
+import { cn, segmentedClass } from "@/lib/ui/variants";
+
+export interface SegmentOption<T extends string> {
+  value: T;
+  label: ReactNode;
+}
+
+interface SegmentedControlProps<T extends string> {
+  options: Array<SegmentOption<T>>;
+  value: T;
+  onChange: (value: T) => void;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+}: SegmentedControlProps<T>) {
+  return (
+    <div className={segmentedClass(className)} role="group" aria-label={ariaLabel}>
+      {options.map((option) => {
+        const selected = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            aria-pressed={selected}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              "rounded px-3 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cinnabar/35",
+              selected
+                ? "bg-panel text-cinnabar shadow-paper"
+                : "text-ink-soft hover:text-cinnabar",
+            )}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}