init project portal web

lib/price-plan/view/combobox/index.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+type Props = {
+  types: any[]
+  value: string
+  onChange: (val: string) => void
+}
+
+export function ComboboxPricePlanType({ types, value, onChange }: Props) {
+  const [open, setOpen] = useState(false)
+
+  const selected = types.find((item) => item.id === value)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selected ? selected.pricePlanTypeName : "Select priceplan type"}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0 max-h-60 overflow-y-auto">
+        <Command>
+          <CommandInput placeholder="Search priceplan type..." />
+          <CommandEmpty>No type found.</CommandEmpty>
+          <CommandGroup>
+            {types.map((item) => (
+              <CommandItem
+                key={item.id}
+                value={item.pricePlanTypeName}
+                onSelect={() => {
+                  onChange(item.id)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    item.id === value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {item.pricePlanTypeName}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}