This commit is contained in:
Riccardo Giorato
2025-12-26 21:18:35 +01:00
parent b4503b7e3e
commit 8d19367b34
2 changed files with 0 additions and 153 deletions
-100
View File
@@ -1,100 +0,0 @@
"use client"
import type React from "react"
import { useState, useRef } from "react"
import { X, Upload } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"
import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils"
export function CharacterUploader() {
const [preview, setPreview] = useState<string | null>(null)
const [isDragging, setIsDragging] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
const { toast } = useToast()
const handleFile = async (file: File) => {
const validation = validateFileForUpload(file, true)
if (validation.valid) {
const previewUrl = await generateFilePreview(file)
setPreview(previewUrl)
} else if (validation.error) {
toast({
title: "Invalid file",
description: validation.error,
variant: "destructive",
duration: 4000,
})
}
}
const handleDrop = (e: React.DragEvent) => {
e.preventDefault()
setIsDragging(false)
const file = e.dataTransfer.files[0]
if (file) handleFile(file)
}
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault()
setIsDragging(true)
}
const handleDragLeave = () => {
setIsDragging(false)
}
const clearPreview = () => {
setPreview(null)
if (fileInputRef.current) {
fileInputRef.current.value = ""
}
}
if (preview) {
return (
<div className="relative h-24 rounded-lg overflow-hidden glass-panel group transition-all">
<img src={preview || "/placeholder.svg"} alt="Character preview" className="w-full h-full object-contain p-2" />
<Button
variant="ghost"
size="icon"
className="absolute top-2 right-2 h-6 w-6 bg-black/50 hover:bg-black/70 opacity-70 group-hover:opacity-100 transition-opacity"
onClick={clearPreview}
>
<X className="w-3 h-3" />
</Button>
</div>
)
}
return (
<button
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onClick={() => fileInputRef.current?.click()}
className={`
flex items-center gap-2 px-3 py-2 rounded-md transition-all text-xs
${
isDragging
? "glass-panel border-indigo/50 text-white"
: "glass-panel glass-panel-hover text-muted-foreground hover:text-white"
}
`}
>
<input
ref={fileInputRef}
type="file"
accept="image/png,image/jpeg,image/jpg"
className="hidden"
onChange={(e) => {
const file = e.target.files?.[0]
if (file) handleFile(file)
}}
/>
<Upload className="w-3.5 h-3.5" />
<span>Upload Character</span>
<span className="text-muted-foreground/50">(Optional)</span>
</button>
)
}
-53
View File
@@ -1,53 +0,0 @@
"use client"
import { Check } from "lucide-react"
import { Label } from "@/components/ui/label"
import { COMIC_STYLES } from "@/lib/constants"
interface StyleSelectorProps {
style: string
setStyle: (style: string) => void
}
export function StyleSelector({ style, setStyle }: StyleSelectorProps) {
return (
<div className="space-y-3">
<Label className="text-base font-semibold font-display">Choose Your Style</Label>
{/* Grid for style selection */}
<div className="grid grid-cols-2 gap-3">
{COMIC_STYLES.map((styleOption) => (
<button
key={styleOption.id}
onClick={() => setStyle(styleOption.id)}
className={`
relative text-left transition-all duration-200 rounded-lg p-3.5 border-2 group
hover:scale-[1.02] active:scale-[0.98]
${
style === styleOption.id
? "border-indigo bg-indigo shadow-md"
: "border-border hover:border-indigo/50 bg-card hover:bg-muted/20"
}
`}
>
<div className="flex items-start justify-between gap-2">
<div>
<div className="flex items-center gap-2">
<h3 className={`font-semibold text-sm font-display ${
style === styleOption.id ? "text-white" : "text-foreground"
}`}>{styleOption.name}</h3>
</div>
</div>
{style === styleOption.id && (
<div className="bg-white text-indigo p-1 rounded-full shrink-0">
<Check className="w-3 h-3" />
</div>
)}
</div>
</button>
))}
</div>
</div>
)
}