Lorem ipsum dolor sit amet.
import { ClassValue } from 'clsx'
import { cn } from '@/lib/utils'
type Props = { className?: ClassValue tabsArray: string[] activeTab: string setActiveTab: React.Dispatch<React.SetStateAction<string>>}
export default function Tabs({ className, tabsArray, activeTab, setActiveTab,}: Props) { return ( <div style={{ gridTemplateColumns: Array(tabsArray.length) .fill('x') .map(() => '1fr') .join(' '), }} className={cn('grid w-full rounded-base text-sm sm:text-base', className)} > {tabsArray.map((tab, index) => { const bg = activeTab === tab ? 'bg-mainAccent' : 'bg-main'
return ( <button key={index} onClick={() => setActiveTab(tab)} className={`cursor-pointer text-text border-2 border-border dark:border-darkBorder py-2 text-center font-bold transition-colors first:rounded-ss-base last:rounded-se-base ${bg}`} > {tab} </button> ) })} </div> )}
import { useState } from 'react'
import Tabs from '@/components/Tabs'
const [activeTab, setActiveTab] = useState('Tab 1')const tabsArray = ['Tab 1', 'Tab 2', 'Tab 3']
<div className="max-w-[350px] rounded-base w-full"> <Tabs activeTab={activeTab} setActiveTab={setActiveTab} tabsArray={tabsArray} /> <div className="max-w-full rounded-b-base border-2 border-border dark:border-darkBorder bg-white dark:bg-darkBg p-5 font-base"> {activeTab === 'Tab 1' && ( <div> <h3>Tab 1</h3>
<p className="mt-2">Lorem ipsum dolor sit amet.</p> </div> )} {activeTab === 'Tab 2' && ( <div> <h3>Tab 2</h3>
<p className="mt-2"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p> </div> )} {activeTab === 'Tab 3' && ( <div> <h3>Tab 3</h3>
<p className="mt-2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, necessitatibus! </p> </div> )} </div></div>
xd