ssh settings on a role

2026-02-20 11:56:38 +00:00 · 2026-02-19 17:53:11 -08:00
parent 874794c996
commit 7a01a4e090
16 changed files with 982 additions and 484 deletions
--- a/src/components/OptionSelect.tsx
+++ b/src/components/OptionSelect.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import { cn } from "@app/lib/cn";
+import type { ReactNode } from "react";
+
+export type OptionSelectOption<TValue extends string> = {
+    value: TValue;
+    label: string;
+    icon?: ReactNode;
+};
+
+type OptionSelectProps<TValue extends string> = {
+    options: ReadonlyArray<OptionSelectOption<TValue>>;
+    value: TValue;
+    onChange: (value: TValue) => void;
+    label?: string;
+    /** Grid columns: 2, 3, 4, 5, etc. Default 5 on md+. */
+    cols?: number;
+    className?: string;
+    disabled?: boolean;
+};
+
+export function OptionSelect<TValue extends string>({
+    options,
+    value,
+    onChange,
+    label,
+    cols = 5,
+    className,
+    disabled = false
+}: OptionSelectProps<TValue>) {
+    return (
+        <div className={className}>
+            {label && (
+                <p className="font-bold mb-3">{label}</p>
+            )}
+            <div
+                className={cn(
+                    "grid gap-2",
+                    cols === 2 && "grid-cols-2",
+                    cols === 3 && "grid-cols-2 md:grid-cols-3",
+                    cols === 4 && "grid-cols-2 md:grid-cols-4",
+                    cols === 5 && "grid-cols-2 md:grid-cols-5",
+                    cols === 6 && "grid-cols-2 md:grid-cols-3 lg:grid-cols-6"
+                )}
+            >
+                {options.map((option) => {
+                    const isSelected = value === option.value;
+                    return (
+                        <Button
+                            key={option.value}
+                            type="button"
+                            variant={isSelected ? "squareOutlinePrimary" : "squareOutline"}
+                            className={cn(
+                                "flex-1 min-w-30 shadow-none",
+                                isSelected && "bg-primary/10"
+                            )}
+                            onClick={() => onChange(option.value)}
+                            disabled={disabled}
+                        >
+                            {option.icon}
+                            {option.label}
+                        </Button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}