6f477a1aa7
- Implemented CreateTTSDialog for generating TTS from user input. - Added TTSHeader for search, sorting, and creation controls. - Created TTSList to display TTS history with filtering and sorting capabilities. - Developed TTSLoadingStates for handling loading and error states. - Introduced TTSRow for individual TTS entries with play and delete options. - Built TTSTable for structured display of TTS history. - Integrated TTS service API for generating and managing TTS data. - Added TTSPage to encapsulate the TTS feature with pagination and state management.
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { AlertCircle, Mic, RefreshCw } from 'lucide-react'
|
|
|
|
export function TTSLoading() {
|
|
return (
|
|
<div className="space-y-4">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<Card key={i}>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Skeleton className="h-5 w-16" />
|
|
<Skeleton className="h-5 w-20" />
|
|
</div>
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<div className="flex gap-1">
|
|
<Skeleton className="h-4 w-12" />
|
|
<Skeleton className="h-4 w-16" />
|
|
</div>
|
|
<Skeleton className="h-3 w-32" />
|
|
</div>
|
|
<Skeleton className="h-8 w-8" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface TTSErrorProps {
|
|
error: string
|
|
onRetry: () => void
|
|
}
|
|
|
|
export function TTSError({ error, onRetry }: TTSErrorProps) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
|
<AlertCircle className="h-12 w-12 text-destructive" />
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-semibold">Failed to load TTS generations</h3>
|
|
<p className="text-sm text-muted-foreground">{error}</p>
|
|
</div>
|
|
<Button onClick={onRetry} variant="outline">
|
|
<RefreshCw className="mr-2 h-4 w-4" />
|
|
Try again
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
interface TTSEmptyProps {
|
|
searchQuery: string
|
|
}
|
|
|
|
export function TTSEmpty({ searchQuery }: TTSEmptyProps) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col items-center justify-center space-y-4 text-center">
|
|
<Mic className="h-12 w-12 text-muted-foreground" />
|
|
<div className="space-y-2">
|
|
<h3 className="text-lg font-semibold">
|
|
{searchQuery ? 'No TTS generations found' : 'No TTS generations yet'}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{searchQuery
|
|
? 'Try adjusting your search or create a new TTS generation.'
|
|
: 'Create your first text-to-speech generation to get started.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
} |