33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import type { Book, ReadingStatus } from "../api";
|
|
|
|
const STATUS: Record<ReadingStatus, { label: string; style: string }> = {
|
|
not_started: { label: "Not started", style: "bg-slate-100 text-slate-700" },
|
|
reading: { label: "Reading", style: "bg-amber-100 text-amber-800" },
|
|
finished: { label: "Finished", style: "bg-emerald-100 text-emerald-800" },
|
|
};
|
|
|
|
export function StatusBadge({ status }: { status: ReadingStatus }) {
|
|
return (
|
|
<span
|
|
className={`rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap ${STATUS[status].style}`}
|
|
>
|
|
{STATUS[status].label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function ProgressBar({ book }: { book: Book }) {
|
|
const percent = Math.round((book.current_page / book.total_pages) * 100);
|
|
return (
|
|
<div className="mt-3">
|
|
<progress
|
|
className="h-2 w-full accent-indigo-600"
|
|
value={book.current_page}
|
|
max={book.total_pages}
|
|
aria-label={`Reading progress for ${book.title}`}
|
|
/>
|
|
<p className="text-sm text-slate-600">{`${book.current_page} / ${book.total_pages} (${percent}%)`}</p>
|
|
</div>
|
|
);
|
|
}
|