feat(select): enhance locale and timezone components with selection i…

…ndicators
novuhq · Feb 7, 2025 · 0990aa6 · 0990aa6
1 parent 2dd6897
commit 0990aa6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/apps/dashboard/src/components/subscribers/locale-select.tsx b/apps/dashboard/src/components/subscribers/locale-select.tsx
@@ -1,6 +1,6 @@
 import { locales } from '@/utils/locales';
 import { cn } from '@/utils/ui';
-import { RiArrowDownSLine, RiEarthLine } from 'react-icons/ri';
+import { RiArrowDownSLine, RiCheckLine, RiEarthLine } from 'react-icons/ri';
 import { type Country } from 'react-phone-number-input';
 import flags from 'react-phone-number-input/flags';
 import { Button } from '../primitives/button';
@@ -58,12 +58,13 @@ export function LocaleSelect({
                   <FlagItem
                     countryCode={item.alpha2}
                     languageName={item.langName}
-                    value={item.langIso}
+                    optionValue={item.langIso}
                     key={item.langIso}
                     onChange={(val) => {
                       onChange(val);
                       setOpen(false);
                     }}
+                    currentValue={value}
                   />
                 ))}
               </CommandGroup>
@@ -78,23 +79,32 @@ export function LocaleSelect({
 const FlagItem = ({
   countryCode,
   languageName,
-  value,
+  optionValue,
   onChange,
+  currentValue,
 }: {
   countryCode: string;
   languageName: string;
-  value: string;
+  optionValue: string;
   onChange: (val: string) => void;
+  currentValue?: string;
 }) => {
   const CurrentFlag = countryCode ? flags[countryCode as Country] : RiEarthLine;
+  const isSelected = optionValue === currentValue;
 
   return (
-    <CommandItem className="gap-3" onSelect={() => onChange(value)}>
+    <CommandItem
+      className={cn('cursor-pointer gap-3', {
+        'bg-accent': isSelected,
+      })}
+      onSelect={() => onChange(optionValue)}
+    >
       <div className="flex w-full items-center gap-2">
         <div>{CurrentFlag && <CurrentFlag className="size-4" title={countryCode} />}</div>
         <TruncatedText className="text-sm">
-          {value} - {languageName}
+          {optionValue} - {languageName}
         </TruncatedText>
+        <RiCheckLine className={cn(`ml-auto size-4 ${isSelected ? 'opacity-100' : 'opacity-0'}`)} />
       </div>
     </CommandItem>
   );

diff --git a/apps/dashboard/src/components/subscribers/timezone-select.tsx b/apps/dashboard/src/components/subscribers/timezone-select.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/utils/ui';
-import { RiArrowDownSLine, RiTimeLine } from 'react-icons/ri';
+import { RiArrowDownSLine, RiCheckLine, RiTimeLine } from 'react-icons/ri';
 import { useTimezoneSelect } from 'react-timezone-select';
 import { Button } from '../primitives/button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../primitives/command';
@@ -60,7 +60,9 @@ export function TimezoneSelect({
               <CommandGroup className="rounded-md py-2">
                 {options.map((item) => (
                   <CommandItem
-                    className="gap-3"
+                    className={cn('cursor-pointer', {
+                      'bg-accent': value === item.value,
+                    })}
                     onSelect={() => {
                       const parsedValue = parseTimezone(item.value);
                       onChange(parsedValue.value);
@@ -69,6 +71,7 @@ export function TimezoneSelect({
                     key={item.value}
                   >
                     {item.label}
+                    <RiCheckLine className={`ml-auto size-4 ${value === item.value ? 'opacity-100' : 'opacity-0'}`} />
                   </CommandItem>
                 ))}
               </CommandGroup>