3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading state and style constants, enhance API key modal with delete

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-26 12:15:01 +01:00
parent 14b247ffaa
commit 66b252fb2e
17 changed files with 379 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/landing/create-button.tsx
+4 -1
View File
@@ -12,15 +12,18 @@ interface CreateButtonProps {
prompt: string;
style: string;
characterFiles: File[];
isLoading: boolean;
setIsLoading: (loading: boolean) => void;
}
export function CreateButton({
prompt,
style,
characterFiles,
isLoading,
setIsLoading,
}: CreateButtonProps) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [loadingStep, setLoadingStep] = useState(0);
const { toast } = useToast();
const { uploadToS3 } = useS3Upload();
components/landing/navbar.tsx
+9 -8
View File
@@ -5,16 +5,12 @@ import { usePathname } from "next/navigation";
import { Github, Key, BookOpen, User, Plus } from "lucide-react";
import Link from "next/link";
import { ApiKeyModal } from "@/components/api-key-modal";
import {
SignInButton,
SignUpButton,
SignedIn,
SignedOut,
UserButton,
} from "@clerk/nextjs";
import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
export function Navbar() {
const [showApiModal, setShowApiModal] = useState(false);
const { isLoaded } = useAuth();
const pathname = usePathname();
const handleApiKeySubmit = (key: string) => {
@@ -24,10 +20,15 @@ export function Navbar() {
const isOnStoriesPage = pathname === "/stories";
if (!isLoaded) return null;
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">
<Link href="/" className="flex items-center gap-1 hover:opacity-80 transition-opacity">
<Link
href="/"
className="flex items-center gap-1 hover:opacity-80 transition-opacity"
>
<div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center">
<img
src="/images/makecomics-logo.png"
components/landing/story-input.tsx
+23 -16
View File
@@ -5,13 +5,7 @@ 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" },
];
import { COMIC_STYLES } from "@/lib/constants";
interface StoryInputProps {
prompt: string;
@@ -20,6 +14,7 @@ interface StoryInputProps {
setStyle: (style: string) => void;
characterFiles: File[];
setCharacterFiles: (files: File[]) => void;
isLoading: boolean;
}
export function StoryInput({
@@ -29,12 +24,19 @@ export function StoryInput({
setStyle,
characterFiles,
setCharacterFiles,
isLoading,
}: StoryInputProps) {
const [previews, setPreviews] = useState<string[]>([]);
const [showPreview, setShowPreview] = useState<number | null>(null);
const [showStyleDropdown, setShowStyleDropdown] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isLoading) {
setShowStyleDropdown(false);
}
}, [isLoading]);
const handleFiles = (newFiles: FileList | null) => {
if (!newFiles) return;
@@ -96,7 +98,8 @@ export function StoryInput({
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"
disabled={isLoading}
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 disabled:opacity-50 disabled:cursor-not-allowed"
/>
<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">
@@ -118,9 +121,10 @@ export function StoryInput({
<button
onClick={(e) => {
e.stopPropagation();
removeFile(index);
if (!isLoading) 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"
disabled={isLoading}
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 disabled:opacity-50 disabled:cursor-not-allowed"
>
<X className="w-2.5 h-2.5 text-white" />
</button>
@@ -128,8 +132,9 @@ export function StoryInput({
))}
{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"
onClick={() => !isLoading && fileInputRef.current?.click()}
disabled={isLoading}
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 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-border/50 disabled:hover:text-muted-foreground"
>
<Upload className="w-3.5 h-3.5" />
</button>
@@ -137,8 +142,9 @@ export function StoryInput({
</div>
) : (
<button
onClick={() => fileInputRef.current?.click()}
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
onClick={() => !isLoading && fileInputRef.current?.click()}
disabled={isLoading}
className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-muted-foreground"
>
<Upload className="w-3.5 h-3.5" />
<span>Upload Characters</span>
@@ -153,9 +159,10 @@ export function StoryInput({
<div className="relative dropdown-container z-60">
<button
onClick={() => {
setShowStyleDropdown(!showStyleDropdown);
if (!isLoading) 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"
disabled={isLoading}
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 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-muted-foreground"
>
<svg
className="w-3 h-3"
components/landing/style-selector.tsx
+17 -18
View File
@@ -1,18 +1,15 @@
"use client"
import { useState } from "react"
import { Check } from "lucide-react"
import { Label } from "@/components/ui/label"
import { COMIC_STYLES } from "@/lib/constants"
const COMIC_STYLES = [
{ id: "american-modern", name: "American Modern" },
{ id: "manga", name: "Manga" },
{ id: "noir", name: "Noir" },
{ id: "vintage", name: "Vintage" },
]
interface StyleSelectorProps {
style: string
setStyle: (style: string) => void
}
export function StyleSelector() {
const [selectedStyle, setSelectedStyle] = useState("noir")
export function StyleSelector({ style, setStyle }: StyleSelectorProps) {
return (
<div className="space-y-3">
@@ -20,28 +17,30 @@ export function StyleSelector() {
{/* Grid for style selection */}
<div className="grid grid-cols-2 gap-3">
{COMIC_STYLES.map((style) => (
{COMIC_STYLES.map((styleOption) => (
<button
key={style.id}
onClick={() => setSelectedStyle(style.id)}
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]
${
selectedStyle === style.id
? "border-primary bg-primary/5 shadow-sm"
: "border-border hover:border-primary/30 bg-card hover:bg-muted/50"
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 text-foreground font-display">{style.name}</h3>
<h3 className={`font-semibold text-sm font-display ${
style === styleOption.id ? "text-white" : "text-foreground"
}`}>{styleOption.name}</h3>
</div>
</div>
{selectedStyle === style.id && (
<div className="bg-primary text-primary-foreground p-1 rounded-full shrink-0">
{style === styleOption.id && (
<div className="bg-white text-indigo p-1 rounded-full shrink-0">
<Check className="w-3 h-3" />
</div>
)}