Neobrutalism components

Tabs

Tab 1

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>
  )
}

Usage

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-secondaryBlack 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>

Edit this page