"use client"; import React, { useState } from "react"; export interface TabData { id: string; label: string; icon: React.ReactNode; content: string; } interface TabButtonProps extends TabData { isActive: boolean; onClick: () => void; } // Example SVG Icons const OverviewIcon: React.FC = () => ( ); const NotificationIcon: React.FC = () => ( ); const AnalyticsIcon: React.FC = () => ( ); const CustomersIcon: React.FC = () => ( ); const tabData: TabData[] = [ { id: "overview", label: "Overview", icon: , content: "Overview ipsum dolor sit amet consectetur. Non vitae facilisis urna tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a. Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi nulla elit sit libero scelerisque ante.", }, { id: "notification", label: "Notification", icon: , content: "Notification ipsum dolor sit amet consectetur. Non vitae facilisis urna tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a. Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi nulla elit sit libero scelerisque ante.", }, { id: "analytics", label: "Analytics", icon: , content: "Analytics ipsum dolor sit amet consectetur. Non vitae facilisis urna tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a. Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi nulla elit sit libero scelerisque ante.", }, { id: "customers", label: "Customers", icon: , content: "Customers ipsum dolor sit amet consectetur. Non vitae facilisis urna tortor placerat egestas donec. Faucibus diam gravida enim elit lacus a. Tincidunt fermentum condimentum quis et a et tempus. Tristique urna nisi nulla elit sit libero scelerisque ante.", }, ]; const TabButton: React.FC = ({ label, icon, isActive, onClick, }) => { return ( ); }; interface TabContentProps { content: string; isActive: boolean; } const TabContent: React.FC = ({ content, isActive }) => { if (!isActive) return null; return (

{content}

); }; export default function TabWithUnderlineAndIcon() { const [activeTab, setActiveTab] = useState("overview"); return (

{tabData.map((tab) => ( ))}

); }