From 55144e38d3fcc93f98656350a865e88f3c6aa522 Mon Sep 17 00:00:00 2001 From: Riccardo Giorato Date: Tue, 23 Dec 2025 12:35:10 +0100 Subject: [PATCH] Enhance glass panel blur effect and update component styling --- app/globals.css | 2 +- components/landing/story-input.tsx | 126 +++++++++++++++++------------ 2 files changed, 74 insertions(+), 54 deletions(-) diff --git a/app/globals.css b/app/globals.css index f1fda99..77ef67e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -105,7 +105,7 @@ /* Glass panel effect for cards */ .glass-panel { background: rgba(255, 255, 255, 0.03); - backdrop-filter: blur(10px); + backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); } diff --git a/components/landing/story-input.tsx b/components/landing/story-input.tsx index c135150..9f00ff3 100644 --- a/components/landing/story-input.tsx +++ b/components/landing/story-input.tsx @@ -1,84 +1,95 @@ -"use client" +"use client"; -import { useState } from "react" +import { useState } from "react"; -import { useRef, useEffect } from "react" -import { Upload, X, Check } from "lucide-react" -import { Button } from "@/components/ui/button" +import { useRef, useEffect } from "react"; +import { Upload, X, Check } from "lucide-react"; +import { Button } from "@/components/ui/button"; const COMIC_STYLES = [ { id: "american-modern", name: "American Modern" }, { id: "manga", name: "Manga" }, { id: "noir", name: "Noir" }, { id: "vintage", name: "Vintage" }, -] +]; interface StoryInputProps { - prompt: string - setPrompt: (prompt: string) => void - style: string - setStyle: (style: string) => void - characterFiles: File[] - setCharacterFiles: (files: File[]) => void + prompt: string; + setPrompt: (prompt: string) => void; + style: string; + setStyle: (style: string) => void; + characterFiles: File[]; + setCharacterFiles: (files: File[]) => void; } -export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles, setCharacterFiles }: StoryInputProps) { - const [previews, setPreviews] = useState([]) - const [showPreview, setShowPreview] = useState(null) - const [showStyleDropdown, setShowStyleDropdown] = useState(false) - const fileInputRef = useRef(null) +export function StoryInput({ + prompt, + setPrompt, + style, + setStyle, + characterFiles, + setCharacterFiles, +}: StoryInputProps) { + const [previews, setPreviews] = useState([]); + const [showPreview, setShowPreview] = useState(null); + const [showStyleDropdown, setShowStyleDropdown] = useState(false); + const fileInputRef = useRef(null); const handleFiles = (newFiles: FileList | null) => { - if (!newFiles) return + if (!newFiles) return; - const validFiles = Array.from(newFiles).filter((file) => file.type.startsWith("image/")) - const totalFiles = [...characterFiles, ...validFiles].slice(0, 2) // Max 2 files + const validFiles = Array.from(newFiles).filter((file) => + file.type.startsWith("image/") + ); + const totalFiles = [...characterFiles, ...validFiles].slice(0, 2); // Max 2 files - setCharacterFiles(totalFiles) + setCharacterFiles(totalFiles); // Generate previews for all files - const newPreviews: string[] = [] + const newPreviews: string[] = []; totalFiles.forEach((file, index) => { - const reader = new FileReader() + const reader = new FileReader(); reader.onload = (e) => { - newPreviews[index] = e.target?.result as string + newPreviews[index] = e.target?.result as string; if (newPreviews.filter(Boolean).length === totalFiles.length) { - setPreviews([...newPreviews]) + setPreviews([...newPreviews]); } - } - reader.readAsDataURL(file) - }) - } + }; + reader.readAsDataURL(file); + }); + }; const removeFile = (index: number) => { - const newFiles = characterFiles.filter((_, i) => i !== index) - const newPreviews = previews.filter((_, i) => i !== index) - setCharacterFiles(newFiles) - setPreviews(newPreviews) - setShowPreview(null) + const newFiles = characterFiles.filter((_, i) => i !== index); + const newPreviews = previews.filter((_, i) => i !== index); + setCharacterFiles(newFiles); + setPreviews(newPreviews); + setShowPreview(null); if (fileInputRef.current) { - fileInputRef.current.value = "" + fileInputRef.current.value = ""; } - } + }; useEffect(() => { const handleClickOutside = (event: MouseEvent) => { - const target = event.target as HTMLElement + const target = event.target as HTMLElement; if (!target.closest(".dropdown-container")) { - setShowStyleDropdown(false) + setShowStyleDropdown(false); } - } + }; - document.addEventListener("mousedown", handleClickOutside) - return () => document.removeEventListener("mousedown", handleClickOutside) - }, []) + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, []); return ( <>
- +