improve UI for code output selection

frontend/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",

frontend/src/components/OutputSettingsSection.tsx

@@ -6,14 +6,11 @@ import {
   SelectTrigger,
 } from "./ui/select";
 import { CSSOption, JSFrameworkOption, OutputSettings } from "../types";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "./ui/accordion";
 import { capitalize } from "../lib/utils";
 import toast from "react-hot-toast";
+import { Label } from "@radix-ui/react-label";
+import { Button } from "./ui/button";
+import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover";
 
 function displayCSSOption(option: CSSOption) {
   switch (option) {
@@ -113,35 +110,31 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   };
 
   return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
-          <div className="flex gap-x-2">
+    <div className="flex flex-col gap-y-2 justify-between text-sm">
       {generateDisplayString(outputSettings)}{" "}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">Customize</Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 text-sm">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <h4 className="font-medium leading-none">Code Settings</h4>
+              <p className="text-muted-foreground">
+                Customize your code output
+              </p>
             </div>
-        </AccordionTrigger>
-        <AccordionContent className="gap-y-2 flex flex-col pt-2">
-          <div className="flex justify-between items-center pr-2">
-            <span className="text-sm">CSS</span>
-            <Select value={outputSettings.css} onValueChange={onCSSValueChange}>
-              <SelectTrigger className="w-[180px]">
-                {displayCSSOption(outputSettings.css)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  <SelectItem value={CSSOption.TAILWIND}>Tailwind</SelectItem>
-                  <SelectItem value={CSSOption.BOOTSTRAP}>Bootstrap</SelectItem>
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex justify-between items-center pr-2">
-            <span className="text-sm">JS Framework</span>
+            <div className="grid gap-2">
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="output-settings-js">JS</Label>
                 <Select
                   value={outputSettings.js}
                   onValueChange={onJsFrameworkChange}
                 >
-              <SelectTrigger className="w-[180px]">
+                  <SelectTrigger
+                    className="col-span-2 h-8"
+                    id="output-settings-js"
+                  >
                     {capitalize(outputSettings.js)}
                   </SelectTrigger>
                   <SelectContent>
@@ -149,14 +142,42 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
                       <SelectItem value={JSFrameworkOption.VANILLA}>
                         Vanilla
                       </SelectItem>
-                  <SelectItem value={JSFrameworkOption.REACT}>React</SelectItem>
+                      <SelectItem value={JSFrameworkOption.REACT}>
+                        React
+                      </SelectItem>
                     </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+              <div className="grid grid-cols-3 items-center gap-4">
+                <Label htmlFor="output-settings-css">CSS</Label>
+                <Select
+                  value={outputSettings.css}
+                  onValueChange={onCSSValueChange}
+                >
+                  <SelectTrigger
+                    className="col-span-2 h-8"
+                    id="output-settings-css"
+                  >
+                    {displayCSSOption(outputSettings.css)}
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value={CSSOption.TAILWIND}>
+                        Tailwind
+                      </SelectItem>
+                      <SelectItem value={CSSOption.BOOTSTRAP}>
+                        Bootstrap
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
   );
 }
 

frontend/src/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

frontend/yarn.lock

@@ -805,6 +805,28 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-popper@1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"