feat: improvements

Author: rafa-thayto

package.json

@@ -22,6 +22,7 @@
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.4",
     "@plaiceholder/next": "^2.5.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/postcss": "^4.1.8",
     "@types/lodash": "^4.17.17",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { nanoid } from 'nanoid'
 import Link from 'next/link'
 import { useMemo } from 'react'
 import { ThemeSwitcher } from '../theme-switcher/theme-switcher'
+import { Text } from '../ui/text'
 
 type Link = {
   href: string
@@ -69,7 +70,12 @@ export const Footer = ({
                       : undefined
                   }
                 >
-                  {link.name}
+                  <Text
+                    variant="hover-decoration"
+                    className="text-gray-900 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-200"
+                  >
+                    {link.name}
+                  </Text>
                 </Link>
                 {index < allLinks.length - 1 && (
                   <span className="ml-4 text-gray-400 dark:text-gray-600">

src/components/Footer/Footer.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { motion, type MotionProps } from 'motion/react'
+import * as Slot from '@radix-ui/react-slot'
+import { cn } from '@/lib/utils'
+
+type Variant = {
+  variant: string
+  component: React.FC<React.ComponentProps<'span'> & Partial<MotionProps>>
+}
+
+const variants = [
+  {
+    variant: 'hover-decoration',
+    component: ({ children, className, ...props }) => (
+      <div
+        className={cn(
+          'relative after:absolute after:bottom-0 after:left-0 after:h-px after:w-full after:origin-bottom-right',
+          'after:scale-x-0 after:bg-current after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100',
+        )}
+      >
+        <span {...props} className={cn(className)}>
+          {children}
+        </span>
+      </div>
+    ),
+  },
+] as const satisfies readonly Variant[]
+
+export type TextProps = {
+  variant?: typeof variants[number]['variant']
+} & React.ComponentProps<'span'> &
+  Partial<MotionProps>
+
+export function Text({
+  variant = 'hover-decoration',
+  className,
+  ...props
+}: TextProps) {
+  const FALLBACK_INDEX = 0
+
+  const variantComponent = variants.find(
+    (v) => v.variant === variant,
+  )?.component
+
+  const Component = variantComponent || variants[FALLBACK_INDEX].component
+
+  return (
+    <Slot.Root className={cn('font-medium text-sm')}>
+      <Component {...props} className={className} />
+    </Slot.Root>
+  )
+}

src/components/ui/text.tsx

@@ -143,12 +143,12 @@ pensamentos (tanto em inglês quanto em português).`
             onMouseLeave={handleMouseLeave}
           >
             <div
-              className={`absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-full blur-sm transition-all duration-500 ${
+              className={`absolute -inset-1 bg-gradient-to-r from-blue-600 via-blue-500 to-blue-400 rounded-full blur-sm transition-all duration-500 ${
                 showAnimation ? 'opacity-75 animate-spin' : 'opacity-0'
               }`}
             ></div>
             <div
-              className={`absolute -inset-0.5 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full transition-all duration-500 ${
+              className={`absolute -inset-0.5 bg-gradient-to-r from-blue-500 via-blue-400 to-blue-300 rounded-full transition-all duration-500 ${
                 showAnimation ? 'opacity-100 animate-spin' : 'opacity-0'
               }`}
             ></div>