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-16 14:16:57 +02:00
parent 50b2c0d8af
commit d7b010fc1e
2 changed files with 83 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/project/scene-card.tsx
+36 -30
View File
@@ -1,6 +1,7 @@
'use client';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { Pencil, Check, X, RefreshCw, Clock, ArrowRight, Wand2, Image as ImageIcon, Mic, Maximize2, Sparkles } from 'lucide-react';
@@ -43,6 +44,9 @@ export function SceneCard({
const [editNarration, setEditNarration] = useState(scene.narrationText);
const [editVisual, setEditVisual] = useState(scene.visualPrompt);
const [lightboxOpen, setLightboxOpen] = useState(false);
const [mounted, setMounted] = useState(false);
useEffect(() => { setMounted(true); }, []);
const handleSave = () => {
onUpdate?.(scene.id, {
@@ -97,8 +101,7 @@ export function SceneCard({
<div className="flex items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
<button
onClick={() => setIsEditing(true)}
disabled={!isEditable || isRendering}
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 disabled:opacity-40 disabled:cursor-not-allowed"
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"
title="Düzenle"
>
<Pencil size={13} />
@@ -268,35 +271,38 @@ export function SceneCard({
{/* Sahne bağlantı çizgisi */}
<div className="absolute left-7 -bottom-3 w-px h-3 bg-gradient-to-b from-[var(--color-border-faint)] to-transparent" />
{/* Lightbox Modal */}
<AnimatePresence>
{lightboxOpen && thumbnailAsset?.url && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setLightboxOpen(false)}
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 md:p-10 cursor-zoom-out"
>
<motion.img
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
transition={{ type: "spring", damping: 25, stiffness: 300 }}
src={thumbnailAsset.url}
alt="Fullscreen Scene"
className="max-w-full max-h-full object-contain rounded-xl shadow-2xl"
onClick={(e) => e.stopPropagation()} // Click image prevents closing
/>
<button
{/* Lightbox Modal — Portal ile document.body'e render (overflow clipping önleme) */}
{mounted && createPortal(
<AnimatePresence>
{lightboxOpen && thumbnailAsset?.url && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setLightboxOpen(false)}
className="absolute top-6 right-6 p-2 rounded-full bg-black/50 text-white/70 hover:text-white hover:bg-black/70 transition-colors"
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/85 backdrop-blur-md p-4 md:p-10 cursor-zoom-out"
>
<X size={24} />
</button>
</motion.div>
)}
</AnimatePresence>
<motion.img
initial={{ scale: 0.85, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.85, opacity: 0 }}
transition={{ type: "spring", damping: 25, stiffness: 300 }}
src={thumbnailAsset.url}
alt="Fullscreen Scene"
className="max-w-[90vw] max-h-[90vh] object-contain rounded-xl shadow-2xl"
onClick={(e) => e.stopPropagation()}
/>
<button
onClick={() => setLightboxOpen(false)}
className="absolute top-6 right-6 p-2.5 rounded-full bg-black/60 text-white/80 hover:text-white hover:bg-black/80 transition-colors"
>
<X size={24} />
</button>
</motion.div>
)}
</AnimatePresence>,
document.body
)}
</motion.div>
);
}