Animated Underline

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Settings, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function AnimatedUnderlineSection() {
29  const [hovered, setHovered] = useState<string | null>(null);
30
31  const links = [
32    { id: 'dashboard', label: 'Dashboard' },
33    { id: 'analytics', label: 'Analytics' },
34    { id: 'reports', label: 'Reports' },
35    { id: 'settings', label: 'Settings' },
36  ];
37
38  return (
39    <SectionCard title="Animated Underline" sourceSlug="/ui/source/ui-elements/animated-underline">
40      <div className="space-y-6">
41        {/* Hover Underline */}
42        <div>
43          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Hover Underline</p>
44          <div className="flex gap-6">
45            {links.map((link) => (
46              <a
47                key={link.id}
48                href="#"
49                onClick={(e) => e.preventDefault()}
50                onMouseEnter={() => setHovered(link.id)}
51                onMouseLeave={() => setHovered(null)}
52                className="relative text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-brand-500 dark:hover:text-brand-400 transition-colors"
53              >
54                {link.label}
55                <span className={`absolute bottom-0 left-0 h-0.5 bg-brand-500 transition-all duration-300 ${hovered === link.id ? 'w-full' : 'w-0'}`} />
56              </a>
57            ))}
58          </div>
59        </div>
60        {/* Active Underline */}
61        <div>
62          <p className="mb-3 text-xs font-medium uppercase tracking-wider text-gray-400">Active Underline</p>
63          <div className="flex gap-6">
64            {links.map((link, i) => (
65              <a key={link.id} href="#" onClick={(e) => e.preventDefault()} className="relative text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-brand-500 dark:hover:text-brand-400 transition-colors group">
66                {link.label}
67                <span className={`absolute bottom-0 left-0 h-0.5 bg-brand-500 transition-all duration-300 ${i === 0 ? 'w-full' : 'w-0 group-hover:w-full'}`} />
68              </a>
69            ))}
70          </div>
71        </div>
72      </div>
73    </SectionCard>
74  );
75}