2024-04-11 17:29:23 +02:00

29 lines
1.2 KiB
TypeScript

import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import React from "react"
export function OlStateButton(props: {
className?: string,
checked: boolean,
icon: IconProp,
onClick: () => void
}) {
const className = (props.className ?? '') + ` h-[40px] w-[40px] flex-none font-medium rounded-md text-sm dark:bg-[#2A3949] dark:data-[checked='true']:bg-blue-500 dark:text-white dark:border-gray-600 `;
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
<FontAwesomeIcon icon={props.icon} />
</button>
}
export function OlRoundStateButton(props: {
className?: string,
checked: boolean,
icon: IconProp,
onClick: () => void
}) {
const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-white dark:data-[checked='true']:text-gray-900 dark:border-gray-600 `;
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
<FontAwesomeIcon icon={props.icon} />
</button>
}