49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
// islands/ClearCheckedButton.// islands/ClearCheckedButton.tsx
|
|
|
|
interface ClearCheckedButtonProps {
|
|
clearSig: any;
|
|
setCanStudy: any;
|
|
}
|
|
|
|
export default function ClearCheckedButton(
|
|
{ clearSig, setCanStudy }: ClearCheckedButtonProps,
|
|
) {
|
|
function handleClearCheckedClick(): void {
|
|
// Use a monotonically-changing value so repeated clicks always notify.
|
|
if (!setCanStudy.value) {
|
|
clearSig.value = clearSig.value >= 0 ? -1 : (clearSig.value - 1);
|
|
} else {
|
|
clearSig.value = clearSig.value <= 0 ? 1 : (clearSig.value + 1);
|
|
}
|
|
}
|
|
|
|
const isAllMode = !setCanStudy.value;
|
|
|
|
return (
|
|
<button
|
|
class={`
|
|
w-8 h-8
|
|
${
|
|
isAllMode
|
|
? "bg-blue-600 hover:bg-blue-700"
|
|
: "bg-red-600 hover:bg-red-700"
|
|
}
|
|
text-white font-bold
|
|
rounded-full
|
|
shadow-lg
|
|
transition-all duration-300 ease-in-out
|
|
transform hover:scale-110
|
|
focus:outline-none focus:ring-2 ${
|
|
isAllMode ? "focus:ring-blue-500" : "focus:ring-red-500"
|
|
} focus:ring-opacity-50
|
|
flex flex-col justify-center items-center
|
|
`}
|
|
onClick={handleClearCheckedClick}
|
|
>
|
|
<span class="text-[10px] leading-none">
|
|
{isAllMode ? "All" : "Clear"}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|