Components
Loading preview...
AudiobookCard An AudiobookCard is a visually rich component designed to display the progress and details of an audiobook or any reading material. It features a prominent cover image, title, author details, and an animated, segmented progress bar. The component is built to be highly reusable and customizable through props.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/audiobook-cardimport * as React from "react";
import { BookOpen } from "lucide-react";
import { AudiobookCard } from "@/components/ui/audiobook-card"; // Adjust path as needed
import { Slider } from "@/components/ui/slider"; // Assuming you have a shadcn Slider component
import { Label } from "@/components/ui/label"; // Assuming you have a shadcn Label component
export default function AudiobookCardDemo() {
const totalPages = 840;
const [pagesRead, setPagesRead] = React.useState(220);
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-8 bg-background p-4">
{/* The component itself */}
<AudiobookCard
imageUrl="https://cdn.dribbble.com/userupload/35223132/file/original-ef853765fc767c6f1d0648662220c2a3.jpg?resize=1024x1280&vertical=center" // Using the actual Dune Messiah cover
title="Dune Messiah"
author="Frank Herbert"
category="Science Fiction"
year={1969}
totalPages={totalPages}
pagesRead={pagesRead}
icon={<BookOpen className="h-5 w-5" />}
/>
{/* Controls to demonstrate interactivity */}
<div className="w-full max-w-sm rounded-lg border bg-card p-4">
<Label htmlFor="progress-slider" className="mb-2 block text-center text-sm font-medium">
Control Reading Progress
</Label>
<div className="flex items-center gap-4">
<span className="text-xs font-mono">{pagesRead}</span>
<Slider
id="progress-slider"
min={0}
max={totalPages}
step={10}
value={[pagesRead]}
onValueChange={(value) => setPagesRead(value[0])}
aria-label="Adjust pages read"
/>
<span className="text-xs font-mono">{totalPages}</span>
</div>
</div>
</div>
);
}