haruncan/ContentGen_FE
1
0
Fork 0
generated from fahricansecer/boilerplate-fe
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main
UI Deploy (Next-Auth Support) 🎨 / build-and-deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Harun CAN
2026-04-05 21:10:51 +03:00
parent dd8878d403
commit 5b03bec882
5 changed files with 124 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/project/scene-card.tsx
+21 -6
View File
@@ -2,7 +2,7 @@
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Pencil, Check, X, RefreshCw, Clock, ArrowRight, Wand2, Image as ImageIcon, Mic, Maximize2 } from 'lucide-react';
import { Pencil, Check, X, RefreshCw, Clock, ArrowRight, Wand2, Image as ImageIcon, Mic, Maximize2, Sparkles } from 'lucide-react';
interface SceneCardProps {
scene: {
@@ -92,7 +92,7 @@ export function SceneCard({
{/* Aksiyon butonları */}
{isEditable && !isEditing && (
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
<button
onClick={() => setIsEditing(true)}
className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--color-text-muted)] hover:text-violet-400 hover:bg-violet-500/10 transition-colors"
@@ -201,7 +201,7 @@ export function SceneCard({
{/* Görsel / Upscale Alanı */}
<div className="flex flex-col gap-2 pt-2">
{thumbnailAsset?.url ? (
{thumbnailAsset?.url && !isGeneratingImage ? (
<div className="relative group/thumb rounded-lg overflow-hidden border border-[var(--color-border-faint)] aspect-video max-w-sm">
<img
src={thumbnailAsset.url}
@@ -214,9 +214,24 @@ export function SceneCard({
</div>
</div>
) : (
<div className="rounded-lg border border-dashed border-[var(--color-border-faint)] bg-[var(--color-bg-deep)] aspect-video max-w-sm flex flex-col items-center justify-center p-4">
<ImageIcon size={24} className="text-[var(--color-text-ghost)] mb-2" />
<p className="text-xs text-[var(--color-text-muted)] text-center">Görsel Henüz Üretilmedi</p>
<div className="rounded-lg border border-dashed border-[var(--color-border-faint)] bg-[var(--color-bg-deep)] aspect-video max-w-sm flex flex-col items-center justify-center p-4 relative overflow-hidden">
{isGeneratingImage ? (
<div className="flex flex-col items-center justify-center animate-in fade-in zoom-in duration-300">
<div className="relative w-12 h-12 mb-3">
<div className="absolute inset-0 rounded-full border-2 border-emerald-500/20"></div>
<div className="absolute inset-0 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin"></div>
<Sparkles size={16} className="absolute inset-0 m-auto text-emerald-400 animate-pulse" />
</div>
<p className="text-xs font-medium text-emerald-400 text-center animate-pulse">
AI Görsel Üretiyor...
</p>
</div>
) : (
<>
<ImageIcon size={24} className="text-[var(--color-text-ghost)] mb-2" />
<p className="text-xs text-[var(--color-text-muted)] text-center">Görsel Henüz Üretilmedi</p>
</>
)}
</div>
)}