Add @radix-ui/react-toggle-group and refactor ColorGradingSelector an…

…d ControlNetSelector to use ToggleGroup
astriaai · Nov 4, 2024 · 0438117 · 0438117
1 parent 0f3c45c
commit 0438117
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",

diff --git a/src/components/PromptForm/AdvancedControls.tsx b/src/components/PromptForm/AdvancedControls.tsx
@@ -78,7 +78,6 @@ export const AdvancedControls = () => {
                     setPromptText(promptText.replace(loraText, ""));
                 }} />
                 <ControlNetSelector value={controlNet} onChange={setControlNet} />
-                <ColorGradingSelector value={colorGrading} onChange={setColorGrading} />
 
                 <RangeInput label="Denoising Strength" value={denoisingStrength} onChange={setDenoisingStrength} />
                 <RangeInput label="ControlNet Conditioning Scale" value={conditioningScale} onChange={setConditioningScale} />
@@ -97,6 +96,7 @@ export const AdvancedControls = () => {
                     <div className="mt-4 space-y-3">
                         <SwitchInput label="Inpaint Faces" checked={inpaintFaces} onCheckedChange={setInpaintFaces} disabled={!superResolution} />
                         <SwitchInput label="Hi-Res Fix" checked={hiresFix} onCheckedChange={setHiresFix} disabled={!superResolution} />
+                        <ColorGradingSelector value={colorGrading} onChange={setColorGrading} />
                         <div className="flex items-center justify-between">
                             <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
                                 Number of Images

diff --git a/src/components/PromptForm/ColorGradingSelector.tsx b/src/components/PromptForm/ColorGradingSelector.tsx
@@ -1,17 +1,11 @@
 import * as React from "react";
-import {
-  Select,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import { cn } from "@/lib/utils";
 
 const colorGradingOptions = [
-  { label: 'Film Velvia', value: 'Film Velvia' },
-  { label: 'Film Portra', value: 'Film Portra' },
-  { label: 'Ektar', value: 'Ektar' },
+  { label: 'Film Velvia', value: 'film-velvia' },
+  { label: 'Film Portra', value: 'film-portra' },
+  { label: 'Ektar', value: 'ektar' },
 ];
 
 interface ColorGradingSelectorProps {
@@ -34,25 +28,29 @@ const ColorGradingSelector: React.FC<ColorGradingSelectorProps> = ({
       <label htmlFor="color-grading" className="text-gray-700 text-sm font-medium mb-2">
         Color Grading
       </label>
-      <div className="col-span-2">
-      <Select
-        onValueChange={handleValueChange}
-        defaultValue={value}
-      >
-        <SelectTrigger>
-          <SelectValue placeholder="Select grading..." />
-        </SelectTrigger>
-        <SelectContent>
+      <div className="col-span-2 ml-auto">
+        <ToggleGroup.Root
+          type="single"
+          value={value}
+          onValueChange={handleValueChange}
+          className="flex space-x-2"
+        >
           {colorGradingOptions.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
+            <ToggleGroup.Item
+              key={option.value}
+              value={option.value}
+              className={cn(
+                "px-4 py-2 rounded-md text-sm font-medium",
+                value === option.value ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"
+              )}
+            >
               {option.label}
-            </SelectItem>
+            </ToggleGroup.Item>
           ))}
-        </SelectContent>
-      </Select>
+        </ToggleGroup.Root>
       </div>
     </div>
   );
 };
 
-export default ColorGradingSelector;
+export default ColorGradingSelector;
diff --git a/src/components/PromptForm/ControlNetSelector.tsx b/src/components/PromptForm/ControlNetSelector.tsx
@@ -1,12 +1,5 @@
 import * as React from "react";
-import {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import { cn } from "@/lib/utils";
 
 const controlNetOptions = [
@@ -31,28 +24,30 @@ const ControlNetSelector: React.FC<ControlNetSelectorProps> = ({
   };
 
   return (
-    <div className={cn("controlnet-selector gap-1 grid grid-cols-3 items-center", className)}>
-      <label htmlFor="controlnet" className="text-gray-700 text-sm font-medium block">
-        ControlNet
+    <div className={cn("color-grading-selector gap-1 grid grid-cols-3 items-center", className)}>
+      <label htmlFor="color-grading" className="text-gray-700 text-sm font-medium mb-2">
+        Control Net
       </label>
-      <div className="col-span-2">
-        <Select
+      <div className="col-span-2 ml-auto">
+        <ToggleGroup.Root
+          type="single"
+          value={value}
           onValueChange={handleValueChange}
-          defaultValue={value}
+          className="flex space-x-2"
         >
-          <SelectTrigger>
-            <SelectValue placeholder="Select a model..." />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {controlNetOptions.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
+          {controlNetOptions.map((option) => (
+            <ToggleGroup.Item
+              key={option.value}
+              value={option.value}
+              className={cn(
+                "px-4 py-2 rounded-md text-sm font-medium",
+                value === option.value ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"
+              )}
+            >
+              {option.label}
+            </ToggleGroup.Item>
+          ))}
+        </ToggleGroup.Root>
       </div>
     </div>
   );