Paul Bailey
2f200aa61b
- Remove excessive animations and gradients - Implement clean card-based layout - Add professional progress stepper with checkmarks - Simplify color scheme to gray/indigo/purple - Create minimal, elegant component designs - Add subtle hover effects and transitions - Improve typography and spacing - Remove emoji overload, keep minimal icons - Create professional button styles - Implement clean form inputs with focus states - Add proper visual hierarchy - Simplify loading states and messages - Create cohesive, modern user experience
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
interface AudioPlayerSectionProps {
|
||
audioUrl: string;
|
||
onDownload: () => void;
|
||
}
|
||
|
||
export default function AudioPlayerSection({
|
||
audioUrl,
|
||
onDownload
|
||
}: AudioPlayerSectionProps) {
|
||
return (
|
||
<div className="card-modern p-8 space-y-6">
|
||
{/* Success Header */}
|
||
<div className="text-center">
|
||
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-500 rounded-2xl mb-4">
|
||
<span className="text-3xl">🎉</span>
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-2">
|
||
Your Audiobook is Ready!
|
||
</h2>
|
||
<p className="text-gray-600">
|
||
Listen below or download to enjoy offline
|
||
</p>
|
||
</div>
|
||
|
||
{/* Audio Player */}
|
||
<div className="p-6 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl border border-indigo-100">
|
||
<audio
|
||
controls
|
||
src={audioUrl}
|
||
className="w-full"
|
||
preload="metadata"
|
||
>
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
</div>
|
||
|
||
{/* Download Button */}
|
||
<div className="flex justify-center">
|
||
<button
|
||
onClick={onDownload}
|
||
className="btn-primary flex items-center gap-2"
|
||
>
|
||
<span>⬇️</span>
|
||
Download Audiobook
|
||
</button>
|
||
</div>
|
||
|
||
{/* Success Message */}
|
||
<div className="p-4 bg-green-50 border border-green-200 text-green-800 rounded-xl text-center">
|
||
<p className="font-medium">
|
||
✅ Your audiobook has been successfully generated!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|