make both components equals

.github/workflows/fly.yml

@@ -0,0 +1,16 @@
+# name: Fly Deploy
+# on:
+#   push:
+    # branches:
+    #   - main 
+# jobs:
+#   deploy:
+#     name: Deploy app
+#     runs-on: ubuntu-latest
+#     concurrency: deploy-group
+#     steps:
+#       - uses: actions/checkout@v4
+#       - uses: superfly/flyctl-actions/setup-flyctl@master
+#       - run: flyctl deploy --remote-only
+#         env:
+#           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

app/controllers/main_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class MainController < ApplicationController
+  layout -> { ApplicationLayout }
+
+  def index
+    render(Main::Index.new)
+  end
+end

app/javascript/App/Pages/Combobox.jsx

@@ -19,28 +19,39 @@ import {
   PopoverTrigger,
 } from "../components/ui/popover"
 
-const frameworks = [
+
+const suggestions = [
   {
-    value: "next.js",
-    label: "Next.js",
+    value: "calendar",
+    label: "Calendar",
   },
   {
-    value: "sveltekit",
-    label: "SvelteKit",
+    value: "smile",
+    label: "Search Emoji",
   },
   {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
+    value: "calculator",
+    label: "Calculator",
+  }
+]
+
+const settings = [
   {
-    value: "remix",
-    label: "Remix",
+    value: "profile",
+    label: "Profile",
   },
   {
-    value: "astro",
-    label: "Astro",
+    value: "billing",
+    label: "Billing",
   },
+  {
+    value: "settings",
+    label: "Settings",
+  }
 ]
+
+const frameworks = [...suggestions, ...settings]
+
 function Combobox() {
   const [open, setOpen] = React.useState(false)
   const [value, setValue] = React.useState("")
@@ -67,8 +78,28 @@ function Combobox() {
               <CommandInput placeholder="Search framework..." />
               <CommandList>
                 <CommandEmpty>No framework found.</CommandEmpty>
-                <CommandGroup>
-                  {frameworks.map((framework) => (
+                <CommandGroup heading="Suggestions">
+                  {suggestions.map((framework) => (
+                    <CommandItem
+                      key={framework.value}
+                      value={framework.value}
+                      onSelect={(currentValue) => {
+                        setValue(currentValue === value ? "" : currentValue)
+                        setOpen(false)
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          value === framework.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      {framework.label}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+                <CommandGroup heading="Settings">
+                  {settings.map((framework) => (
                     <CommandItem
                       key={framework.value}
                       value={framework.value}

app/views/main/index.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Main
+  class Index < ApplicationView
+    def view_template
+      div(class: "p-8") do
+        h1(class: "mb-6 text-xl font-bold text-gray-900 dark:text-white") { "PhlexUI components playground" }
+
+        div(class: "flex flex-col gap-4") do
+          div do
+            h2(class: "mb-2 text-lg font-semibold text-gray-900 dark:text-white") { "Powered by Phlex" }
+
+            ul(class: "max-w-md space-y-1 text-gray-500 list-disc list-inside dark:text-gray-400") do
+              li { a(href: "/phlex/combobox", class: "font-medium text-blue-600 dark:text-blue-500 hover:underline") { "Combobox" } }
+            end
+          end
+
+          div do
+            h2(class: "mb-2 text-lg font-semibold text-gray-900 dark:text-white") { "Powered by Shadcn" }
+
+            ul(class: "max-w-md space-y-1 text-gray-500 list-disc list-inside dark:text-gray-400") do
+              li { a(href: "/shadcn/combobox", class: "font-medium text-blue-600 dark:text-blue-500 hover:underline") { "Combobox" } }
+            end
+          end
+        end
+      end
+    end
+  end
+end

config/routes.rb

@@ -18,5 +18,5 @@
   end
 
   # Defines the root path route ("/")
-  # root "posts#index"
+  root "main#index"
 end

fly.toml

@@ -10,37 +10,37 @@ console_command = "/rails/bin/rails console"
 [build]
 
 [[mounts]]
-  source = "data"
-  destination = "/data"
-  auto_extend_size_threshold = 0
+source = "data"
+destination = "/data"
+auto_extend_size_threshold = 0
 
 [http_service]
-  internal_port = 3000
-  force_https = true
-  auto_stop_machines = true
-  auto_start_machines = true
-  min_machines_running = 0
-  processes = ["app"]
+internal_port = 3000
+force_https = true
+auto_stop_machines = true
+auto_start_machines = true
+min_machines_running = 0
+processes = ["app"]
 
 [checks]
-  [checks.status]
-    port = 3000
-    type = "http"
-    interval = "10s"
-    timeout = "2s"
-    grace_period = "5s"
-    method = "GET"
-    path = "/up"
-    protocol = "http"
-    tls_skip_verify = false
-    [checks.status.headers]
-      X-Forwarded-Proto = "https"
+[checks.status]
+port = 3000
+type = "http"
+interval = "10s"
+timeout = "2s"
+grace_period = "5s"
+method = "GET"
+path = "/up"
+protocol = "http"
+tls_skip_verify = false
+[checks.status.headers]
+X-Forwarded-Proto = "https"
 
 [[vm]]
-  cpu_kind = "shared"
-  cpus = 1
-  memory_mb = 1024
+cpu_kind = "shared"
+cpus = 1
+memory_mb = 512
 
 [[statics]]
-  guest_path = "/rails/public"
-  url_prefix = "/"
+guest_path = "/rails/public"
+url_prefix = "/"