Components
Loading preview...
Audio Show Creator A comprehensive UI component for creating and configuring an audio show from a document. It features options for format, voice selection, engine, and quality, all wrapped in a clean, modal-like card. It uses framer-motion for a smooth entry animation.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/audio-show-creatorimport * as React from "react";
import { AudioShowCreator } from "@/components/ui/audio-show-creator";
import {
Mic,
Languages,
Sparkles,
Award,
} from "lucide-react";
// Sample data for the component's props
const formatStyles = [{ value: "interview", label: "Interview Mode" }];
const hostVoices = [
{ value: "alex", label: "Alex", color: "bg-gradient-to-br from-purple-400 to-indigo-600" },
{ value: "sam", label: "Sam", color: "bg-gradient-to-br from-teal-400 to-cyan-600" },
{ value: "jordan", label: "Jordan", color: "bg-gradient-to-br from-amber-400 to-orange-600" },
];
const guestVoices = [
{ value: "morgan", label: "Morgan", color: "bg-gradient-to-br from-orange-400 to-rose-600" },
{ value: "casey", label: "Casey", color: "bg-gradient-to-br from-lime-400 to-green-600" },
{ value: "riley", label: "Riley", color: "bg-gradient-to-br from-sky-400 to-blue-600" },
];
const voiceEngines = [
{ value: 'eleven_v2', label: 'Eleven AI v2', icon: Sparkles },
{ value: 'deepgram_v1', label: 'Deepgram v1', icon: Mic },
];
const languages = [
{ value: 'auto', label: 'Auto-detect', icon: Languages },
{ value: 'en-us', label: 'English (US)' },
{ value: 'es-es', label: 'Spanish (Spain)' },
];
const audioQualities = [
{ value: 'studio', label: 'Studio', icon: Award },
{ value: 'high', label: 'High' },
{ value: 'standard', label: 'Standard' },
];
export default function AudioShowCreatorDemo() {
const handleGenerate = () => {
alert("Generate action triggered!");
};
const handleClose = () => {
alert("Close action triggered!");
};
return (
<div className="flex min-h-[600px] w-full items-center justify-center bg-background p-4 md:p-10">
<AudioShowCreator
formatStyles={formatStyles}
hostVoices={hostVoices}
guestVoices={guestVoices}
voiceEngines={voiceEngines}
languages={languages}
audioQualities={audioQualities}
onGenerate={handleGenerate}
onClose={handleClose}
/>
</div>
);
}