cleanup
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user