buzzword-bingo/src/app/components/bingoitem.tsx

import clsx from 'clsx'
import React from 'react'

interface Props{
	text: string;
}

export default function BingoItem({text}: Props){
	const [clicked, setClicked] = React.useState(false);

	return(
		<td><a className={clsx("btn btn-xs sm:btn-sm md:btn-md w-full", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
	);
}