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 {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
backdrop-filter: blur(20px);
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 { 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<string[]>([])
const [showPreview, setShowPreview] = useState<number | null>(null)
const [showStyleDropdown, setShowStyleDropdown] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
export function StoryInput({
prompt,
setPrompt,
style,
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) => {
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])
}
}
reader.readAsDataURL(file)
})
setPreviews([...newPreviews]);
}
};
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 (
<>
<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="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>
<textarea
@@ -106,8 +117,8 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
</button>
<button
onClick={(e) => {
e.stopPropagation()
removeFile(index)
e.stopPropagation();
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"
>
@@ -131,7 +142,9 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
>
<Upload className="w-3.5 h-3.5" />
<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>
)}
</div>
@@ -140,11 +153,16 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
<div className="relative dropdown-container z-[60]">
<button
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"
>
<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
strokeLinecap="round"
strokeLinejoin="round"
@@ -156,13 +174,13 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
</button>
{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) => (
<button
key={styleOption.id}
onClick={() => {
setStyle(styleOption.id)
setShowStyleDropdown(false)
setStyle(styleOption.id);
setShowStyleDropdown(false);
}}
className={`w-full text-left px-3 py-2 rounded text-xs transition-colors flex items-center justify-between ${
style === styleOption.id
@@ -171,7 +189,9 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
}`}
>
<span>{styleOption.name}</span>
{style === styleOption.id && <Check className="w-3 h-3" />}
{style === styleOption.id && (
<Check className="w-3 h-3" />
)}
</button>
))}
</div>
@@ -214,5 +234,5 @@ export function StoryInput({ prompt, setPrompt, style, setStyle, characterFiles,
</div>
)}
</>
)
);
}