29 lines
759 B
TypeScript
29 lines
759 B
TypeScript
|
import { CustomIcon, CustomIconName } from 'components/CustomIcon'
|
||
|
|
|
||
|
|
interface SettingsTabButtonProps {
|
||
|
|
checked: boolean
|
||
|
|
icon: CustomIconName
|
||
|
|
text: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SettingsTabButton(props: SettingsTabButtonProps) {
|
||
|
|
const { checked, icon, text } = props
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`cursor-pointer select-none flex items-center gap-1 p-1 pr-2 -mb-[1px] border-0 border-b ${
|
||
|
|
checked
|
||
|
|
? 'border-primary'
|
||
|
|
: 'border-chalkboard-20 dark:border-chalkboard-30 hover:bg-primary/20 dark:hover:bg-primary/50'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<CustomIcon
|
||
|
|
name={icon}
|
||
|
|
className={
|
||
|
|
'w-5 h-5 ' + (checked ? 'bg-primary !text-chalkboard-10' : '')
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<span>{text}</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|