3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance glass panel blur effect and update component styling

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-23 12:35:10 +01:00
parent d2b94bde98
commit 55144e38d3
2 changed files with 74 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+1 -1
View File
@@ -105,7 +105,7 @@
/* Glass panel effect for cards */ /* Glass panel effect for cards */
.glass-panel { .glass-panel {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px); backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
} }
components/landing/story-input.tsx
+73 -53
View File
@@ -1,84 +1,95 @@
"use client" "use client";
import { useState } from "react" import { useState } from "react";
import { useRef, useEffect } from "react" import { useRef, useEffect } from "react";
import { Upload, X, Check } from "lucide-react" import { Upload, X, Check } from "lucide-react";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
const COMIC_STYLES = [ const COMIC_STYLES = [
{ id: "american-modern", name: "American Modern" }, { id: "american-modern", name: "American Modern" },
{ id: "manga", name: "Manga" }, { id: "manga", name: "Manga" },
{ id: "noir", name: "Noir" }, { id: "noir", name: "Noir" },
{ id: "vintage", name: "Vintage" }, { id: "vintage", name: "Vintage" },
] ];
interface StoryInputProps { interface StoryInputProps {
prompt: string prompt: string;
setPrompt: (prompt: string) => void setPrompt: (prompt: string) => void;
style: string style: string;
setStyle: (style: string) => void setStyle: (style: string) => void;
characterFiles: File[] characterFiles: File[];
setCharacterFiles: (files: File[]) => void setCharacterFiles: (files: File[]) => void;
} }
export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles, setCharacterFiles }: StoryInputProps) { export function StoryInput({
const [previews, setPreviews] = useState<string[]>([]) prompt,
const [showPreview, setShowPreview] = useState<number | null>(null) setPrompt,
const [showStyleDropdown, setShowStyleDropdown] = useState(false) style,
const fileInputRef = useRef<HTMLInputElement>(null) setStyle,
characterFiles,
setCharacterFiles,
}: StoryInputProps) {
const [previews, setPreviews] = useState<string[]>([]);
const [showPreview, setShowPreview] = useState<number | null>(null);
const [showStyleDropdown, setShowStyleDropdown] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
const handleFiles = (newFiles: FileList | null) => { const handleFiles = (newFiles: FileList | null) => {
if (!newFiles) return if (!newFiles) return;
const validFiles = Array.from(newFiles).filter((file) => file.type.startsWith("image/")) const validFiles = Array.from(newFiles).filter((file) =>
const totalFiles = [...characterFiles, ...validFiles].slice(0, 2) // Max 2 files file.type.startsWith("image/")
);
const totalFiles = [...characterFiles, ...validFiles].slice(0, 2); // Max 2 files
setCharacterFiles(totalFiles) setCharacterFiles(totalFiles);
// Generate previews for all files // Generate previews for all files
const newPreviews: string[] = [] const newPreviews: string[] = [];
totalFiles.forEach((file, index) => { totalFiles.forEach((file, index) => {
const reader = new FileReader() const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
newPreviews[index] = e.target?.result as string newPreviews[index] = e.target?.result as string;
if (newPreviews.filter(Boolean).length === totalFiles.length) { if (newPreviews.filter(Boolean).length === totalFiles.length) {
setPreviews([...newPreviews]) setPreviews([...newPreviews]);
} }
} };
reader.readAsDataURL(file) reader.readAsDataURL(file);
}) });
} };
const removeFile = (index: number) => { const removeFile = (index: number) => {
const newFiles = characterFiles.filter((_, i) => i !== index) const newFiles = characterFiles.filter((_, i) => i !== index);
const newPreviews = previews.filter((_, i) => i !== index) const newPreviews = previews.filter((_, i) => i !== index);
setCharacterFiles(newFiles) setCharacterFiles(newFiles);
setPreviews(newPreviews) setPreviews(newPreviews);
setShowPreview(null) setShowPreview(null);
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.value = "" fileInputRef.current.value = "";
} }
} };
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement const target = event.target as HTMLElement;
if (!target.closest(".dropdown-container")) { if (!target.closest(".dropdown-container")) {
setShowStyleDropdown(false) setShowStyleDropdown(false);
} }
} };
document.addEventListener("mousedown", handleClickOutside) document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside);
}, []) }, []);
return ( return (
<> <>
<div className="relative glass-panel p-0.5 sm:p-1 rounded-xl group focus-within:border-indigo/30 transition-colors"> <div className="relative glass-panel p-0.5 sm:p-1 rounded-xl group focus-within:border-indigo/30 transition-colors">
<div className="bg-background/80 rounded-lg p-3 sm:p-4 border border-border/50"> <div className="bg-background/80 rounded-lg p-3 sm:p-4 border border-border/50">
<div className="flex justify-between items-center mb-2 sm:mb-3"> <div className="flex justify-between items-center mb-2 sm:mb-3">
<label className="text-[10px] uppercase text-muted-foreground tracking-[0.02em] font-medium">Prompt</label> <label className="text-[10px] uppercase text-muted-foreground tracking-[0.02em] font-medium">
Prompt
</label>
</div> </div>
<textarea <textarea
@@ -106,8 +117,8 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
</button> </button>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation();
removeFile(index) removeFile(index);
}} }}
className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity" className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity"
> >
@@ -131,7 +142,9 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
> >
<Upload className="w-3.5 h-3.5" /> <Upload className="w-3.5 h-3.5" />
<span>Upload Characters</span> <span>Upload Characters</span>
<span className="text-muted-foreground/50 hidden sm:inline">(Max 2)</span> <span className="text-muted-foreground/50 hidden sm:inline">
(Max 2)
</span>
</button> </button>
)} )}
</div> </div>
@@ -140,11 +153,16 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
<div className="relative dropdown-container z-[60]"> <div className="relative dropdown-container z-[60]">
<button <button
onClick={() => { onClick={() => {
setShowStyleDropdown(!showStyleDropdown) setShowStyleDropdown(!showStyleDropdown);
}} }}
className="flex items-center gap-2 px-2.5 py-1.5 rounded-md glass-panel glass-panel-hover transition-all text-xs text-muted-foreground hover:text-white" className="flex items-center gap-2 px-2.5 py-1.5 rounded-md glass-panel glass-panel-hover transition-all text-xs text-muted-foreground hover:text-white"
> >
<svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg
className="w-3 h-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@@ -156,13 +174,13 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
</button> </button>
{showStyleDropdown && ( {showStyleDropdown && (
<div className="absolute left-0 sm:right-0 sm:left-auto bottom-full mb-2 w-40 glass-panel rounded-lg p-1 z-[70] shadow-2xl border border-border/50"> <div className="absolute left-0 sm:right-0 sm:left-auto bottom-full mb-2 w-40 glass-panel rounded-lg p-1 z-70 shadow-2xl border border-border/50">
{COMIC_STYLES.map((styleOption) => ( {COMIC_STYLES.map((styleOption) => (
<button <button
key={styleOption.id} key={styleOption.id}
onClick={() => { onClick={() => {
setStyle(styleOption.id) setStyle(styleOption.id);
setShowStyleDropdown(false) setShowStyleDropdown(false);
}} }}
className={`w-full text-left px-3 py-2 rounded text-xs transition-colors flex items-center justify-between ${ className={`w-full text-left px-3 py-2 rounded text-xs transition-colors flex items-center justify-between ${
style === styleOption.id style === styleOption.id
@@ -171,7 +189,9 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
}`} }`}
> >
<span>{styleOption.name}</span> <span>{styleOption.name}</span>
{style === styleOption.id && <Check className="w-3 h-3" />} {style === styleOption.id && (
<Check className="w-3 h-3" />
)}
</button> </button>
))} ))}
</div> </div>
@@ -214,5 +234,5 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
</div> </div>
)} )}
</> </>
) );
} }