Smooth Tab

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Smooth Tab
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import type { LucideIcon } from "lucide-react";
14import { AnimatePresence, motion } from "motion/react";
15import * as React from "react";
16import { cn } from "@/lib/utils";
17 
18interface TabItem {
19  id: string;
20  title: string;
21  description?: string;
22  icon?: LucideIcon;
23  content?: React.ReactNode;
24  cardContent?: React.ReactNode;
25  color: string;
26}
27 
28const WaveformPath = () => (
29  <motion.path
30    animate={{
31      x: [0, 10, 0],
32      transition: {
33        duration: 5,
34        ease: "linear",
35        repeat: Number.POSITIVE_INFINITY,
36      },
37    }}
38    d="M0 50 
39           C 20 40, 40 30, 60 50
40           C 80 70, 100 60, 120 50
41           C 140 40, 160 30, 180 50
42           C 200 70, 220 60, 240 50
43           C 260 40, 280 30, 300 50
44           C 320 70, 340 60, 360 50
45           C 380 40, 400 30, 420 50
46           L 420 100 L 0 100 Z"
47    initial={false}
48  />
49);
50 
51function TabCardContent({
52  title,
53  description,
54  fillClass,
55}: {
56  title: string;
57  description: string;
58  fillClass: string;
59}) {
60  return (
61    <div className="relative h-full">
62      <div className="absolute inset-0 overflow-hidden">
63        <svg
64          aria-hidden="true"
65          className="absolute bottom-0 h-32 w-full"
66          preserveAspectRatio="none"
67          role="presentation"
68          viewBox="0 0 420 100"
69        >
70          <motion.g
71            animate={{ opacity: 0.15 }}
72            className={`fill-${fillClass} stroke-${fillClass}`}
73            initial={{ opacity: 0 }}
74            style={{ strokeWidth: 1 }}
75            transition={{ duration: 0.5 }}
76          >
77            <WaveformPath />
78          </motion.g>
79          <motion.g
80            animate={{ opacity: 0.1 }}
81            className={`fill-${fillClass} stroke-${fillClass}`}
82            initial={{ opacity: 0 }}
83            style={{ strokeWidth: 1, transform: "translateY(10px)" }}
84            transition={{ duration: 0.5 }}
85          >
86            <WaveformPath />
87          </motion.g>
88        </svg>
89      </div>
90      <div className="relative flex h-full flex-col p-6">
91        <div className="space-y-2">
92          <h3 className="bg-gradient-to-r from-foreground via-foreground/90 to-foreground/70 font-semibold text-2xl tracking-tight [text-shadow:_0_1px_1px_rgb(0_0_0_/_10%)]">
93// … truncated