Add Next.js frontend PWA
- Pages: login, register, tasks list, task detail - Components: TaskCard, TaskForm, GroupSelector, StatusBadge, Header - Tailwind CSS, dark/light mode, PWA manifest - Running on :3001 via systemd Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
24
apps/tasks/components/StatusBadge.tsx
Normal file
24
apps/tasks/components/StatusBadge.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: string;
|
||||
size?: "sm" | "md";
|
||||
}
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; bg: string; text: string }> = {
|
||||
pending: { label: "Ceka", bg: "bg-yellow-100 dark:bg-yellow-900/30", text: "text-yellow-800 dark:text-yellow-300" },
|
||||
in_progress: { label: "Probiha", bg: "bg-blue-100 dark:bg-blue-900/30", text: "text-blue-800 dark:text-blue-300" },
|
||||
done: { label: "Hotovo", bg: "bg-green-100 dark:bg-green-900/30", text: "text-green-800 dark:text-green-300" },
|
||||
cancelled: { label: "Zruseno", bg: "bg-gray-100 dark:bg-gray-800/30", text: "text-gray-600 dark:text-gray-400" },
|
||||
};
|
||||
|
||||
export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
|
||||
const s = STATUS_MAP[status] || STATUS_MAP.pending;
|
||||
const sizeClass = size === "sm" ? "px-2 py-0.5 text-xs" : "px-3 py-1 text-sm";
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center rounded-full font-medium ${s.bg} ${s.text} ${sizeClass}`}>
|
||||
{s.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user