feat: introduce Teams & OKRs feature with models, types, and UI components for team management and objective tracking

src/components/ui/ToggleGroup.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+export interface ToggleOption<T extends string> {
+  value: T;
+  label: string;
+  icon?: ReactNode;
+}
+
+interface ToggleGroupProps<T extends string> {
+  value: T;
+  options: ToggleOption<T>[];
+  onChange: (value: T) => void;
+  className?: string;
+}
+
+export function ToggleGroup<T extends string>({
+  value,
+  options,
+  onChange,
+  className = '',
+}: ToggleGroupProps<T>) {
+  return (
+    <div className={`flex items-center gap-2 rounded-lg border border-border bg-card p-1 ${className}`}>
+      {options.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() => onChange(option.value)}
+          className={`
+            flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
+            ${value === option.value
+              ? 'bg-[#8b5cf6] text-white shadow-sm'
+              : 'text-muted hover:text-foreground hover:bg-card-hover'
+            }
+          `}
+        >
+          {option.icon && <span className="flex items-center">{option.icon}</span>}
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+