36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { twMerge } from "tailwind-merge";
|
|
import Tag from "@moduletrace/twui/elements/Tag";
|
|
import { TaskStatuses, type TaskStatus } from "@/src/dict/task-dict";
|
|
|
|
type Props = {
|
|
status?: TaskStatus | string | null;
|
|
};
|
|
|
|
/**
|
|
* A task's status as one word. The tone follows the state: a blocked task
|
|
* is the only one that asks for the user, so it's the only one that reads
|
|
* as a call.
|
|
*/
|
|
export default function TaskStatusChip({ status = "todo" }: Props) {
|
|
const value = (status || "todo") as TaskStatus;
|
|
const title = TaskStatuses.find((it) => it.value == value)?.title || "To do";
|
|
|
|
/**
|
|
* A `Tag` is a filled primary button by default (ink in light mode), so
|
|
* the chip clears its fill and sets its own text: only the outline speaks.
|
|
*/
|
|
return (
|
|
<Tag
|
|
className={twMerge(
|
|
"shrink-0 px-2! py-0.5! text-[11px]! font-bold! leading-4! border border-solid",
|
|
"bg-transparent! dark:bg-transparent! hover:bg-transparent!",
|
|
value == "blocked" && "text-ink! dark:text-ink! border-ink",
|
|
value == "doing" && "text-ink! dark:text-ink! border-hairline-strong",
|
|
value != "blocked" && value != "doing" && "text-ink-secondary! dark:text-ink-secondary! border-hairline",
|
|
)}
|
|
>
|
|
{title}
|
|
</Tag>
|
|
);
|
|
}
|