46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import { FunctionComponent } from "preact";
|
|
import { tv } from "tailwind-variants";
|
|
import classes from "./task.module.scss";
|
|
|
|
interface TaskProps {
|
|
name: string;
|
|
checked?: boolean;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const taskStyle = tv({
|
|
base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
|
|
variants: {
|
|
checked: {
|
|
true: "bg-black",
|
|
false: "bg-white",
|
|
},
|
|
},
|
|
});
|
|
|
|
const markStyle = tv({
|
|
base: "text-4xl font-light text-white",
|
|
variants: {
|
|
checked: {
|
|
true: "block",
|
|
false: "hidden",
|
|
},
|
|
},
|
|
});
|
|
|
|
const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
|
|
return (
|
|
// Временное действие для тестирования
|
|
<div class="w-[95%]">
|
|
<div class={classes.task} onClick={onClick}>
|
|
<div class={taskStyle({ checked })}>
|
|
<p class={markStyle({ checked })}>✓</p>
|
|
</div>
|
|
{name}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Task;
|