victorAnumudu
27 lines
830 B
React
27 lines
830 B
React
import React from 'react'
|
|
|
|
export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
|
|
return (
|
|
<button
|
|
className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
|
|
selectedTab === item
|
|
? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
|
|
: "bg-white text-[#000]"
|
|
}`}
|
|
value={item}
|
|
name={item}
|
|
onClick={() => setSelectedTab(item)}
|
|
>
|
|
<div
|
|
className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
|
|
selectedTab === item
|
|
? "border-white bg-emerald-500"
|
|
: "border-red-50 dark:border-[#D85A5A] bg-white"
|
|
}`}
|
|
></div>
|
|
{item[0].toUpperCase() + item.slice(1)}
|
|
</button>
|
|
)
|
|
}
|
|
|