initial commit with Youssef work
This commit is contained in:
Riccardo Giorato
@@ -0,0 +1,92 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState, useRef } from "react"
|
||||
import { X, Upload } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function CharacterUploader() {
|
||||
const [preview, setPreview] = useState<string | null>(null)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleFile = (file: File) => {
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
setPreview(e.target?.result as string)
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setIsDragging(false)
|
||||
const file = e.dataTransfer.files[0]
|
||||
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/*"
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { ArrowRight, Loader2 } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
|
||||
interface CreateButtonProps {
|
||||
prompt: string
|
||||
style: string
|
||||
characterFiles: File[]
|
||||
}
|
||||
|
||||
export function CreateButton({ prompt, style, characterFiles }: CreateButtonProps) {
|
||||
const router = useRouter()
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [loadingStep, setLoadingStep] = useState(0)
|
||||
const { toast } = useToast()
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading) return
|
||||
|
||||
const steps = ["Enhancing prompt...", "Generating scenes...", "Creating your comic..."]
|
||||
let currentStep = 0
|
||||
|
||||
const interval = setInterval(() => {
|
||||
currentStep += 1
|
||||
if (currentStep < steps.length) {
|
||||
setLoadingStep(currentStep)
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 2500)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [isLoading])
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!prompt.trim()) {
|
||||
toast({
|
||||
title: "Prompt required",
|
||||
description: "Please enter a prompt to generate your comic",
|
||||
variant: "destructive",
|
||||
duration: 3000,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setIsLoading(true)
|
||||
setLoadingStep(0)
|
||||
|
||||
try {
|
||||
const apiKey = localStorage.getItem("together_api_key")
|
||||
|
||||
const characterUploads = await Promise.all(characterFiles.map((file) => fileToBase64(file)))
|
||||
|
||||
if (!apiKey) {
|
||||
const comicData = {
|
||||
prompt,
|
||||
style,
|
||||
characterUploads,
|
||||
}
|
||||
sessionStorage.setItem("firstPageData", JSON.stringify(comicData))
|
||||
setTimeout(() => {
|
||||
router.push("/editor")
|
||||
}, 7500)
|
||||
return
|
||||
}
|
||||
|
||||
const response = await fetch("/api/generate-comic", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
prompt,
|
||||
apiKey,
|
||||
style,
|
||||
characterImages: characterUploads, // Send base64 images to API
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
|
||||
if (response.status === 402 || errorData.errorType === "credit_limit") {
|
||||
toast({
|
||||
title: "API credits required",
|
||||
description: "Your Together.ai API key needs credits. Please add credits or use a different API key.",
|
||||
variant: "destructive",
|
||||
duration: 6000,
|
||||
})
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
throw new Error(errorData.error || "Failed to generate comic")
|
||||
}
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
const comicData = {
|
||||
prompt,
|
||||
style,
|
||||
imageUrl: result.imageUrl,
|
||||
characterUploads,
|
||||
}
|
||||
|
||||
sessionStorage.setItem("firstPageData", JSON.stringify(comicData))
|
||||
|
||||
setTimeout(() => {
|
||||
router.push("/editor")
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error("[v0] Error creating comic:", error)
|
||||
toast({
|
||||
title: "Creation failed",
|
||||
description: error instanceof Error ? error.message : "Failed to create comic. Please try again.",
|
||||
variant: "destructive",
|
||||
duration: 4000,
|
||||
})
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fileToBase64 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(reader.result as string)
|
||||
reader.onerror = reject
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
const loadingSteps = ["Enhancing prompt...", "Generating scenes...", "Creating your comic..."]
|
||||
|
||||
return (
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
disabled={isLoading || !prompt.trim()}
|
||||
className="w-full sm:w-auto sm:min-w-40 bg-white hover:bg-neutral-200 text-black px-8 py-2 rounded-md text-sm font-medium transition-colors flex items-center justify-center gap-3 tracking-tight"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span className="text-sm font-medium tracking-tight">{loadingSteps[loadingStep]}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Generate
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Github } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
function XIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" className={className}>
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="h-8 border-t border-border/50 bg-background flex items-center justify-between px-6 text-[10px] text-muted-foreground select-none">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>
|
||||
Made & powered by{" "}
|
||||
<Link
|
||||
href="https://together.ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white transition-colors text-white"
|
||||
>
|
||||
Together.ai
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="https://github.com/makecomics/makecomics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
<Github className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
<Link
|
||||
href="https://x.com/makecomics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
<XIcon className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
export function LandingHero() {
|
||||
return (
|
||||
<header className="relative py-8 sm:py-12 md:py-16 lg:py-0">
|
||||
<div className="relative z-10">
|
||||
<div className="lg:text-left text-center">
|
||||
<div className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full border border-border glass-panel mb-4 sm:mb-6 w-fit">
|
||||
<span className="text-[10px] font-medium text-muted-foreground tracking-[-0.015em]">
|
||||
Powered by Together AI
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-foreground uppercase mb-4 sm:mb-5 tracking-wide font-heading font-semibold leading-tight sm:leading-[5.2rem]">
|
||||
Create stunning <span className="text-indigo font-semibold">comics</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground leading-relaxed max-w-md mx-auto lg:mx-0 tracking-[-0.02em] px-4 sm:px-0 text-sm">
|
||||
Describe your scene, choose a style, and let AI render professional comic panels instantly.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Github, Key } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { ApiKeyModal } from "@/components/api-key-modal"
|
||||
|
||||
export function Navbar() {
|
||||
const [showApiModal, setShowApiModal] = useState(false)
|
||||
|
||||
const handleApiKeySubmit = (key: string) => {
|
||||
localStorage.setItem("together_api_key", key)
|
||||
setShowApiModal(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="w-full h-14 sm:h-16 border-b border-border/50 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-50 bg-background/80 backdrop-blur-md">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center">
|
||||
<img src="/images/makecomics-logo.png" alt="MakeComics Logo" className="w-full h-full object-contain" />
|
||||
</div>
|
||||
<span className="text-white font-heading tracking-[0.005em] text-lg sm:text-xl">MakeComics</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={() => setShowApiModal(true)}
|
||||
className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
|
||||
>
|
||||
<Key className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
||||
<span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline tracking-tight">API Key</span>
|
||||
</button>
|
||||
|
||||
<Link
|
||||
href="https://github.com/makecomics/makecomics"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
|
||||
>
|
||||
<Github className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
||||
<span className="text-muted-foreground text-xs sm:text-sm hidden sm:inline">0</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/signup"
|
||||
className="flex items-center gap-2 px-2.5 sm:px-3 py-1.5 rounded glass-panel glass-panel-hover transition-all text-xs rounded-md"
|
||||
>
|
||||
<span className="text-foreground text-xs sm:text-sm tracking-[-0.01em] font-normal">Sign up</span>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ApiKeyModal isOpen={showApiModal} onClose={() => setShowApiModal(false)} onSubmit={handleApiKeySubmit} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
const validFiles = Array.from(newFiles).filter((file) => file.type.startsWith("image/"))
|
||||
const totalFiles = [...characterFiles, ...validFiles].slice(0, 2) // Max 2 files
|
||||
|
||||
setCharacterFiles(totalFiles)
|
||||
|
||||
// Generate previews for all files
|
||||
const newPreviews: string[] = []
|
||||
totalFiles.forEach((file, index) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
newPreviews[index] = e.target?.result as string
|
||||
if (newPreviews.filter(Boolean).length === totalFiles.length) {
|
||||
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)
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ""
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement
|
||||
if (!target.closest(".dropdown-container")) {
|
||||
setShowStyleDropdown(false)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
placeholder="A cyberpunk detective standing in neon rain, holding a glowing datapad, moody lighting, noir style..."
|
||||
className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-16 leading-relaxed"
|
||||
/>
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-border/30 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-2">
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0 w-full sm:w-auto">
|
||||
{characterFiles.length > 0 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
{previews.map((preview, index) => (
|
||||
<div key={index} className="relative group/thumb">
|
||||
<button
|
||||
onClick={() => setShowPreview(index)}
|
||||
className="w-8 h-8 rounded-md overflow-hidden border border-border/50 hover:border-indigo/50 transition-colors"
|
||||
>
|
||||
<img
|
||||
src={preview || "/placeholder.svg"}
|
||||
alt={`Character ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
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"
|
||||
>
|
||||
<X className="w-2.5 h-2.5 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{characterFiles.length < 2 && (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-8 h-8 rounded-md border border-dashed border-border/50 hover:border-indigo/50 flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
<span>Upload Characters</span>
|
||||
<span className="text-muted-foreground/50 hidden sm:inline">(Max 2)</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0 w-full sm:w-auto justify-start sm:justify-end">
|
||||
<div className="relative dropdown-container z-[60]">
|
||||
<button
|
||||
onClick={() => {
|
||||
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">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
|
||||
/>
|
||||
</svg>
|
||||
<span>{COMIC_STYLES.find((s) => s.id === style)?.name}</span>
|
||||
</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">
|
||||
{COMIC_STYLES.map((styleOption) => (
|
||||
<button
|
||||
key={styleOption.id}
|
||||
onClick={() => {
|
||||
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
|
||||
? "bg-indigo/10 text-indigo"
|
||||
: "text-muted-foreground hover:bg-white/5 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<span>{styleOption.name}</span>
|
||||
{style === styleOption.id && <Check className="w-3 h-3" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => handleFiles(e.target.files)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showPreview !== null && previews[showPreview] && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4"
|
||||
onClick={() => setShowPreview(null)}
|
||||
>
|
||||
<div className="relative max-w-2xl max-h-[80vh] glass-panel p-4 rounded-xl z-[101]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute top-2 right-2 h-8 w-8 hover:bg-white/10 z-[102]"
|
||||
onClick={() => setShowPreview(null)}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
<img
|
||||
src={previews[showPreview] || "/placeholder.svg"}
|
||||
alt="Character preview"
|
||||
className="w-full h-full object-contain rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Check } from "lucide-react"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
const COMIC_STYLES = [
|
||||
{ id: "american-modern", name: "American Modern" },
|
||||
{ id: "manga", name: "Manga" },
|
||||
{ id: "noir", name: "Noir" },
|
||||
{ id: "vintage", name: "Vintage" },
|
||||
]
|
||||
|
||||
export function StyleSelector() {
|
||||
const [selectedStyle, setSelectedStyle] = useState("noir")
|
||||
|
||||
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((style) => (
|
||||
<button
|
||||
key={style.id}
|
||||
onClick={() => setSelectedStyle(style.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]
|
||||
${
|
||||
selectedStyle === style.id
|
||||
? "border-primary bg-primary/5 shadow-sm"
|
||||
: "border-border hover:border-primary/30 bg-card hover:bg-muted/50"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-sm text-foreground font-display">{style.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{selectedStyle === style.id && (
|
||||
<div className="bg-primary text-primary-foreground p-1 rounded-full shrink-0">
|
||||
<Check className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user