generated from fahricansecer/boilerplate-fe
This commit is contained in:
Harun CAN
@@ -45,13 +45,13 @@ const XIcon = ({ size = 16 }: { size?: number }) => (
|
||||
);
|
||||
|
||||
const STATUS_MAP: Record<string, { label: string; color: string; icon: React.ElementType; bgClass: string }> = {
|
||||
DRAFT: { label: 'Taslak', color: 'text-slate-400', icon: FileText, bgClass: 'bg-slate-500/10 border-slate-500/20' },
|
||||
GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-violet-400', icon: Sparkles, bgClass: 'bg-violet-500/10 border-violet-500/20' },
|
||||
PENDING: { label: 'Kuyrukta', color: 'text-amber-400', icon: Clock, bgClass: 'bg-amber-500/10 border-amber-500/20' },
|
||||
GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-cyan-400', icon: Sparkles, bgClass: 'bg-cyan-500/10 border-cyan-500/20' },
|
||||
RENDERING: { label: 'Video İşleniyor', color: 'text-blue-400', icon: Film, bgClass: 'bg-blue-500/10 border-blue-500/20' },
|
||||
COMPLETED: { label: 'Tamamlandı', color: 'text-emerald-400', icon: CheckCircle2, bgClass: 'bg-emerald-500/10 border-emerald-500/20' },
|
||||
FAILED: { label: 'Başarısız', color: 'text-red-400', icon: AlertCircle, bgClass: 'bg-red-500/10 border-red-500/20' },
|
||||
DRAFT: { label: 'Taslak', color: 'text-neutral-400', icon: FileText, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||||
GENERATING_SCRIPT: { label: 'Senaryo Üretiliyor', color: 'text-neutral-300', icon: Sparkles, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||||
PENDING: { label: 'Kuyrukta', color: 'text-neutral-400', icon: Clock, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||||
GENERATING_MEDIA: { label: 'Medya Üretiliyor', color: 'text-neutral-300', icon: Sparkles, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||||
RENDERING: { label: 'Video İşleniyor', color: 'text-neutral-300', icon: Film, bgClass: 'bg-neutral-500/10 border-neutral-500/20' },
|
||||
COMPLETED: { label: 'Tamamlandı', color: 'text-neutral-100', icon: CheckCircle2, bgClass: 'bg-neutral-500/20 border-neutral-500/30' },
|
||||
FAILED: { label: 'Başarısız', color: 'text-neutral-500', icon: AlertCircle, bgClass: 'bg-neutral-800/50 border-neutral-800' },
|
||||
};
|
||||
|
||||
const videoStyles = [
|
||||
@@ -240,7 +240,7 @@ export default function ProjectDetailPage() {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Loader2 size={32} className="animate-spin text-violet-400" />
|
||||
<Loader2 size={32} className="animate-spin text-neutral-400" />
|
||||
<p className="text-sm text-[var(--color-text-muted)]">Proje yükleniyor...</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -379,7 +379,7 @@ export default function ProjectDetailPage() {
|
||||
value={project.videoStyle}
|
||||
onChange={(e) => handleStyleChange(e.target.value)}
|
||||
disabled={isRendering}
|
||||
className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-violet-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
|
||||
className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-neutral-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
|
||||
>
|
||||
{videoStyles.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
@@ -393,7 +393,7 @@ export default function ProjectDetailPage() {
|
||||
value={project.cinematicReference || ''}
|
||||
onChange={(e) => handleCinematicReferenceChange(e.target.value)}
|
||||
disabled={isRendering}
|
||||
className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-violet-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer w-44 truncate"
|
||||
className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-neutral-500/50 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer w-44 truncate"
|
||||
>
|
||||
<option value="">🎬 Sinematik Yönetmen/Film...</option>
|
||||
{CINEMATIC_REFERENCES.map(ref => (
|
||||
@@ -438,7 +438,7 @@ export default function ProjectDetailPage() {
|
||||
<button
|
||||
onClick={handleGenerateScript}
|
||||
disabled={isRendering || generateScriptMutation.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-violet-500 to-violet-600 text-white text-sm font-medium shadow-lg shadow-violet-500/20 hover:shadow-violet-500/30 transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{generateScriptMutation.isPending ? (
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
@@ -470,7 +470,7 @@ export default function ProjectDetailPage() {
|
||||
<button
|
||||
onClick={handleApprove}
|
||||
disabled={isRendering || approveMutation.isPending}
|
||||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-600 text-white text-sm font-medium shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{approveMutation.isPending ? (
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
@@ -554,7 +554,7 @@ export default function ProjectDetailPage() {
|
||||
<motion.div variants={fadeUp}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
|
||||
<Film size={15} className="text-violet-400" />
|
||||
<Film size={15} className="text-neutral-400" />
|
||||
Senaryo — {project.scenes!.length} sahne
|
||||
</h2>
|
||||
<span className="text-[10px] text-[var(--color-text-ghost)]">
|
||||
@@ -585,8 +585,8 @@ export default function ProjectDetailPage() {
|
||||
{/* ── Boş durum (senaryo yok) ── */}
|
||||
{!hasScript && isEditable && (
|
||||
<motion.div variants={fadeUp} className="card-surface p-8 text-center">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-500/15 to-cyan-400/10 mx-auto mb-4 flex items-center justify-center">
|
||||
<Sparkles size={28} className="text-violet-400" />
|
||||
<div className="w-16 h-16 rounded-2xl bg-[var(--color-bg-elevated)] mx-auto mb-4 flex items-center justify-center">
|
||||
<Sparkles size={28} className="text-neutral-400" />
|
||||
</div>
|
||||
<h3 className="text-base font-semibold mb-1.5">Henüz senaryo üretilmedi</h3>
|
||||
<p className="text-sm text-[var(--color-text-muted)] mb-4 max-w-sm mx-auto">
|
||||
@@ -595,7 +595,7 @@ export default function ProjectDetailPage() {
|
||||
<button
|
||||
onClick={handleGenerateScript}
|
||||
disabled={generateScriptMutation.isPending}
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-violet-500 to-violet-600 text-white text-sm font-medium shadow-lg shadow-violet-500/20 hover:shadow-violet-500/30 transition-shadow disabled:opacity-50"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-[var(--color-bg-inverted)] text-[var(--color-text-inverted)] text-sm font-medium hover:bg-neutral-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{generateScriptMutation.isPending ? (
|
||||
<Loader2 size={15} className="animate-spin" />
|
||||
@@ -612,7 +612,7 @@ export default function ProjectDetailPage() {
|
||||
<motion.div variants={fadeUp}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-semibold text-[var(--color-text-primary)] flex items-center gap-2">
|
||||
<Clock size={15} className="text-cyan-400" />
|
||||
<Clock size={15} className="text-neutral-400" />
|
||||
Render Geçmişi
|
||||
</h2>
|
||||
{project.status === 'GENERATING_MEDIA' || project.renderJobs.some((j: any) => j.status === 'QUEUED' || j.status === 'PROCESSING') ? (
|
||||
@@ -632,10 +632,10 @@ export default function ProjectDetailPage() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
job.status === 'COMPLETED' ? 'bg-emerald-400' :
|
||||
job.status === 'FAILED' ? 'bg-red-400' :
|
||||
job.status === 'CANCELLED' ? 'bg-slate-400' :
|
||||
'bg-amber-400 animate-pulse'
|
||||
job.status === 'COMPLETED' ? 'bg-neutral-100' :
|
||||
job.status === 'FAILED' ? 'bg-neutral-500' :
|
||||
job.status === 'CANCELLED' ? 'bg-neutral-600' :
|
||||
'bg-neutral-300 animate-pulse'
|
||||
}`} />
|
||||
<span className="text-xs text-[var(--color-text-secondary)]">
|
||||
Deneme #{job.attemptNumber}
|
||||
@@ -658,9 +658,9 @@ export default function ProjectDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
{(job.status === 'QUEUED' || job.status === 'PROCESSING') && (
|
||||
<div className="w-full bg-slate-800 rounded-full h-1.5 mt-1 overflow-hidden">
|
||||
<div className="w-full bg-[var(--color-bg-surface)] rounded-full h-1.5 mt-1 overflow-hidden">
|
||||
<div
|
||||
className="bg-amber-400 h-1.5 rounded-full transition-all duration-1000 ease-out relative"
|
||||
className="bg-neutral-300 h-1.5 rounded-full transition-all duration-1000 ease-out relative"
|
||||
style={{ width: `${job.progress || (job.status === 'QUEUED' ? 5 : 50)}%` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-white/20 animate-pulse" />
|
||||
|
||||
Reference in New Issue
Block a user