cleanup

2025-12-26 21:18:35 +01:00
parent b4503b7e3e
commit 8d19367b34
2 changed files with 0 additions and 153 deletions
@@ -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>
  )
 }