refactor(tooltip): replace Tooltip component with AnimatedTooltip

Updated the Navbar, ClientProjects, and RepositoryCard components to utilize the new AnimatedTooltip component instead of the previous Tooltip implementation. This change enhances the user experience with smoother animations and improved tooltip functionality across the application.
kWAYTV · Dec 11, 2024 · 3c24d28 · 3c24d28
1 parent 432a60e
commit 3c24d28
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 79 deletions.
diff --git a/src/components/core/layout/nav.tsx b/src/components/core/layout/nav.tsx
@@ -2,13 +2,9 @@
 
 import { Link } from 'next-view-transitions';
 
+import { AnimatedTooltip } from '@/components/motion/tooltip';
 import { Button } from '@/components/ui/button';
 import { ModeToggle } from '@/components/ui/mode-toggle';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
 import { navItems } from '@/enums/nav';
 import type { NavPath } from '@/types/nav';
 
@@ -27,30 +23,32 @@ export function Navbar() {
                 (typeof navItems)[NavPath]
               ][]
             ).map(([path, { name, icon: Icon, tooltip }]) => (
-              <Tooltip key={path}>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant='linkHover2'
-                    className='flex items-center gap-2 p-2'
-                    asChild
+              <AnimatedTooltip
+                key={path}
+                content={{
+                  description: tooltip
+                }}
+              >
+                <Button
+                  variant='linkHover2'
+                  className='flex items-center gap-2 p-2'
+                  asChild
+                >
+                  <Link
+                    href={path}
+                    aria-label={`Navigate to ${name}`}
+                    {...(name.toLowerCase() === 'github'
+                      ? {
+                          target: '_blank',
+                          rel: 'noopener noreferrer'
+                        }
+                      : {})}
                   >
-                    <Link
-                      href={path}
-                      aria-label={`Navigate to ${name}`}
-                      {...(name.toLowerCase() === 'github'
-                        ? {
-                            target: '_blank',
-                            rel: 'noopener noreferrer'
-                          }
-                        : {})}
-                    >
-                      <Icon className='h-4 w-4' aria-hidden='true' />
-                      <span className='capitalize'>{name}</span>
-                    </Link>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{tooltip}</TooltipContent>
-              </Tooltip>
+                    <Icon className='h-4 w-4' aria-hidden='true' />
+                    <span className='capitalize'>{name}</span>
+                  </Link>
+                </Button>
+              </AnimatedTooltip>
             ))}
             <ModeToggle />
           </div>

diff --git a/src/components/core/projects/client-projects.tsx b/src/components/core/projects/client-projects.tsx
@@ -5,13 +5,9 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { RepositoryCard } from '@/components/core/projects/repository-card';
 import { RepositoryCardSkeleton } from '@/components/core/projects/repository-card-skeleton';
 import { SearchInput } from '@/components/core/projects/search-input';
+import { AnimatedTooltip } from '@/components/motion/tooltip';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
 import { useGithubRepos } from '@/hooks/use-github-repos';
 
 export function ClientProjects() {
@@ -65,37 +61,29 @@ export function ClientProjects() {
         <>
           <Separator className='my-2' />
           <div className='flex items-center justify-between'>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant='ghost'
-                  onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-                  disabled={currentPage === 1}
-                >
-                  <ChevronLeft className='h-4 w-4' />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Previous page</TooltipContent>
-            </Tooltip>
+            <AnimatedTooltip content={{ description: 'Previous page' }}>
+              <Button
+                variant='ghost'
+                onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className='h-4 w-4' />
+              </Button>
+            </AnimatedTooltip>
 
             <span className='text-sm text-muted-foreground'>
               Page {currentPage} of {totalPages}
             </span>
 
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant='ghost'
-                  onClick={() =>
-                    setCurrentPage(p => Math.min(totalPages, p + 1))
-                  }
-                  disabled={currentPage === totalPages}
-                >
-                  <ChevronRight className='h-4 w-4' />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Next page</TooltipContent>
-            </Tooltip>
+            <AnimatedTooltip content={{ description: 'Next page' }}>
+              <Button
+                variant='ghost'
+                onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+              >
+                <ChevronRight className='h-4 w-4' />
+              </Button>
+            </AnimatedTooltip>
           </div>
         </>
       )}

diff --git a/src/components/core/projects/repository-card.tsx b/src/components/core/projects/repository-card.tsx
@@ -1,12 +1,8 @@
 import { GitFork, LockIcon, Star } from 'lucide-react';
 
+import { AnimatedTooltip } from '@/components/motion/tooltip';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
 import type { Repository } from '@/interfaces/github';
 
 interface RepositoryCardProps {
@@ -33,12 +29,9 @@ export function RepositoryCard({ repository }: RepositoryCardProps) {
               </a>
             </Button>
             {repository.private && (
-              <Tooltip>
-                <TooltipTrigger>
-                  <LockIcon className='h-4 w-4 text-neutral-500' />
-                </TooltipTrigger>
-                <TooltipContent>Private repository</TooltipContent>
-              </Tooltip>
+              <AnimatedTooltip content={{ description: 'Private repository' }}>
+                <LockIcon className='h-4 w-4 text-neutral-500' />
+              </AnimatedTooltip>
             )}
           </div>
           <div className='flex items-center gap-4 text-sm text-neutral-600 dark:text-neutral-400'>
@@ -61,16 +54,11 @@ export function RepositoryCard({ repository }: RepositoryCardProps) {
             {repository.language || 'Unknown'}
           </Badge>
           {repository.description && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='line-clamp-1 cursor-default text-neutral-600 dark:text-neutral-400'>
-                  {repository.description}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent side='bottom' className='max-w-[300px]'>
+            <AnimatedTooltip content={{ description: repository.description }}>
+              <span className='line-clamp-1 cursor-default text-neutral-600 dark:text-neutral-400'>
                 {repository.description}
-              </TooltipContent>
-            </Tooltip>
+              </span>
+            </AnimatedTooltip>
           )}
         </div>
       </div>