51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import { CheckIcon, PencilLineIcon, XIcon } from "lucide-react";
|
|
// * Components shadcn
|
|
import { Badge } from "@/components/ui/badge";
|
|
// * Other
|
|
import { LaravelEnum } from "@/back/types/global";
|
|
|
|
type DynamicStatusBadgeProps = {
|
|
value: number;
|
|
};
|
|
|
|
// Get a stylised badge for a specific enum value.
|
|
export default function DynamicStatusBadge({ value }: DynamicStatusBadgeProps) {
|
|
// Get all enum values, labels and names.
|
|
const { enumDynamicPageStatus } = usePage().props as unknown as {
|
|
enumDynamicPageStatus: LaravelEnum;
|
|
};
|
|
|
|
// Set specific icon and style classes for each enum value.
|
|
const statusStyles = {
|
|
[enumDynamicPageStatus.draft.value]: {
|
|
color: "bg-gray-200 dark:bg-gray-900",
|
|
Icon: PencilLineIcon,
|
|
},
|
|
[enumDynamicPageStatus.unpublished.value]: {
|
|
color: "bg-red-200 dark:bg-red-900",
|
|
Icon: XIcon,
|
|
},
|
|
[enumDynamicPageStatus.published?.value ?? "default"]: {
|
|
color: "bg-green-200 dark:bg-green-900",
|
|
Icon: CheckIcon,
|
|
},
|
|
};
|
|
|
|
// Get the current enum value.
|
|
const enumValue = Object.values(enumDynamicPageStatus).find(
|
|
(status) => status.value === value,
|
|
);
|
|
|
|
// Get the color and icon for the current enum value.
|
|
const { color, Icon } =
|
|
statusStyles[enumValue?.value as keyof typeof statusStyles];
|
|
|
|
return (
|
|
<Badge variant="outline" className={`border-0 ${color}`}>
|
|
<Icon size={15} className="mr-1" />
|
|
{enumValue?.label}
|
|
</Badge>
|
|
);
|
|
}
|