wip

omeralpi · Apr 13, 2024 · 2dce4d6 · 2dce4d6
1 parent 95148b9
commit 2dce4d6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 27 deletions.
diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
@@ -91,7 +91,7 @@ const CountrySelect = ({ disabled, value, onChange, options }: CountrySelectProp
       <PopoverContent className="p-0 w-[300px]">
         <Command>
           <CommandList>
-            <ScrollArea className="h-72 w-full rounded-md">
+            <ScrollArea className="h-72">
               <CommandInput placeholder="Search country..." />
               <CommandEmpty>No country found.</CommandEmpty>
               <CommandGroup>

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
@@ -29,6 +29,7 @@ import {
 } from "@/components/ui/popover";
 
 import { cn } from "@/lib/utils";
+import { ScrollArea } from "./scroll-area";
 
 type PhoneInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -120,33 +121,35 @@ const CountrySelect = ({
           <CommandList>
             <CommandInput placeholder="Search country..." />
             <CommandEmpty>No country found.</CommandEmpty>
-            <CommandGroup>
-              {options
-                .filter((x) => x.value)
-                .map((option) => (
-                  <CommandItem
-                    className="gap-2"
-                    key={option.value}
-                    onSelect={() => handleSelect(option.value)}>
-                    <FlagComponent
-                      country={option.value}
-                      countryName={option.label}
-                    />
-                    <span className="text-sm flex-1">{option.label}</span>
-                    {option.value && (
-                      <span className="text-sm text-foreground/50">
-                        {`+${RPNInput.getCountryCallingCode(option.value)}`}
-                      </span>
-                    )}
-                    <CheckIcon
-                      className={cn(
-                        "ml-auto h-4 w-4",
-                        option.value === value ? "opacity-100" : "opacity-0",
+            <ScrollArea className="h-72">
+              <CommandGroup>
+                {options
+                  .filter((x) => x.value)
+                  .map((option) => (
+                    <CommandItem
+                      className="gap-2"
+                      key={option.value}
+                      onSelect={() => handleSelect(option.value)}>
+                      <FlagComponent
+                        country={option.value}
+                        countryName={option.label}
+                      />
+                      <span className="text-sm flex-1">{option.label}</span>
+                      {option.value && (
+                        <span className="text-sm text-foreground/50">
+                          {`+${RPNInput.getCountryCallingCode(option.value)}`}
+                        </span>
                       )}
-                    />
-                  </CommandItem>
-                ))}
-            </CommandGroup>
+                      <CheckIcon
+                        className={cn(
+                          "ml-auto h-4 w-4",
+                          option.value === value ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            </ScrollArea>
           </CommandList>
         </Command>
       </PopoverContent>