item 1
item 2
item 3
'use client' import { useState } from 'react' export default function RadioGroup({ items }: { items: string[] }) { const [activeItem, setActiveItem] = useState<string | null>(null) return ( <div className="font-base"> {items.map((item) => { const isChecked = activeItem === item return ( <button onClick={() => { setActiveItem(item) }} className="my-2 flex items-center" role="radio" aria-checked={isChecked} key={item} > <div className="mr-2.5 h-5 w-5 rounded-full bg-white dark:bg-secondaryBlack p-1 outline outline-2 outline-black"> {isChecked && ( <div className="h-full w-full rounded-full bg-black dark:bg-white"></div> )} </div> <p className="text-text">{item}</p> </button> ) })} </div> )}
This component is just a reference how radio group should look like, I highly suggest you to use react-hook-form for this one.
import RadioGroup from '@/components/RadioGroup'
<div className="rounded-base border-2 border-border dark:border-darkBorder bg-main p-10 py-5 shadow-light dark:shadow-dark"> <RadioGroup items={['item 1', 'item 2', 'item 3']} /></div>
xd