add new create site workflow

src/components/StrategySelect.tsx

@@ -2,42 +2,59 @@
 
 import { cn } from "@app/lib/cn";
 import { RadioGroup, RadioGroupItem } from "./ui/radio-group";
+import { useState } from "react";
 
 interface StrategyOption {
     id: string;
     title: string;
     description: string;
+    disabled?: boolean; // New optional property
 }
 
 interface StrategySelectProps {
     options: StrategyOption[];
     defaultValue?: string;
     onChange?: (value: string) => void;
+    cols?: number;
 }
 
 export function StrategySelect({
     options,
     defaultValue,
-    onChange
+    onChange,
+    cols
 }: StrategySelectProps) {
+    const [selected, setSelected] = useState(defaultValue);
+
     return (
         <RadioGroup
             defaultValue={defaultValue}
-            onValueChange={onChange}
-            className="grid gap-4"
+            onValueChange={(value) => {
+                setSelected(value);
+                onChange?.(value);
+            }}
+            className={`grid md:grid-cols-${cols ? cols : 1} gap-4`}
         >
             {options.map((option) => (
                 <label
                     key={option.id}
                     htmlFor={option.id}
+                    data-state={
+                        selected === option.id ? "checked" : "unchecked"
+                    }
                     className={cn(
-                        "relative flex cursor-pointer rounded-lg border-2 p-4",
-                        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
+                        "relative flex rounded-lg border-2 p-4 transition-colors cursor-pointer",
+                        option.disabled
+                            ? "border-input text-muted-foreground cursor-not-allowed opacity-50"
+                            : selected === option.id
+                              ? "border-primary bg-primary/10 text-primary"
+                              : "border-input hover:bg-accent"
                     )}
                 >
                     <RadioGroupItem
                         value={option.id}
                         id={option.id}
+                        disabled={option.disabled}
                         className="absolute left-4 top-5 h-4 w-4 border-primary text-primary"
                     />
                     <div className="pl-7">