"use client"; import { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Tab = { title: string; value: string; content?: string | React.ReactNode | any; }; export const Tabs = ({ tabs: propTabs, containerClassName, activeTabClassName, tabClassName, contentClassName, }: { tabs: Tab[]; containerClassName?: string; activeTabClassName?: string; tabClassName?: string; contentClassName?: string; }) => { const [active, setActive] = useState(propTabs[0]); const [tabs, setTabs] = useState(propTabs); const moveSelectedTabToTop = (idx: number) => { const newTabs = [...propTabs]; const selectedTab = newTabs.splice(idx, 1); newTabs.unshift(selectedTab[0]); setTabs(newTabs); setActive(newTabs[0]); }; const [hovering, setHovering] = useState(false); return ( <>

{propTabs.map((tab, idx) => ( ))}

); }; export const FadeInDiv = ({ className, tabs, hovering, }: { className?: string; key?: string; tabs: Tab[]; active: Tab; hovering?: boolean; }) => { const isActive = (tab: Tab) => { return tab.value === tabs[0].value; }; return (

{tabs.map((tab, idx) => ( {tab.content} ))}

); };

Tabs

Instalação

Dependências