chore(fe): create signup hover (#2143)

skkuding · Oct 13, 2024 · 576359f · 576359f
1 parent 6874e92
commit 576359f
Showing 1 changed file with 38 additions and 22 deletions.
diff --git a/apps/frontend/components/auth/SignUpRegister.tsx b/apps/frontend/components/auth/SignUpRegister.tsx
@@ -15,6 +15,12 @@ import {
   PopoverTrigger
 } from '@/components/ui/popover'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip'
 import { baseUrl } from '@/lib/constants'
 import { majors } from '@/lib/constants'
 import { cn } from '@/lib/utils'
@@ -551,28 +557,38 @@ export default function SignUpRegister() {
                 <ScrollArea className="h-40">
                   <CommandEmpty>No major found.</CommandEmpty>
                   <CommandGroup>
-                    <CommandList>
-                      {majors?.map((major) => (
-                        <CommandItem
-                          key={major}
-                          value={major}
-                          onSelect={(currentValue) => {
-                            setMajorValue(currentValue)
-                            setMajorOpen(false)
-                          }}
-                        >
-                          <FaCheck
-                            className={cn(
-                              'mr-2 h-4 w-4',
-                              majorValue === major ? 'opacity-100' : 'opacity-0'
-                            )}
-                          />
-                          <p className="w-[230px] overflow-hidden text-ellipsis whitespace-nowrap">
-                            {major}
-                          </p>
-                        </CommandItem>
-                      ))}
-                    </CommandList>
+                    <TooltipProvider>
+                      <CommandList>
+                        {majors?.map((major) => (
+                          <Tooltip key={major}>
+                            <TooltipTrigger>
+                              <CommandItem
+                                value={major}
+                                onSelect={(currentValue) => {
+                                  setMajorValue(currentValue)
+                                  setMajorOpen(false)
+                                }}
+                              >
+                                <FaCheck
+                                  className={cn(
+                                    'mr-2 h-4 w-4',
+                                    majorValue === major
+                                      ? 'opacity-100'
+                                      : 'opacity-0'
+                                  )}
+                                />
+                                <p className="w-[230px] overflow-hidden text-ellipsis whitespace-nowrap text-left">
+                                  {major}
+                                </p>
+                              </CommandItem>
+                            </TooltipTrigger>
+                            <TooltipContent className="bg-blue-600">
+                              <p>{major}</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        ))}
+                      </CommandList>
+                    </TooltipProvider>
                   </CommandGroup>
                 </ScrollArea>
               </Command>