let claude haiku 4.5 generate front page and login module (css crashed & login malfunctioning)
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import { Upload, Wand2, Save, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function CreatePage() {
|
||||
const [characterData, setCharacterData] = useState({
|
||||
name: "",
|
||||
avatar: "",
|
||||
description: "",
|
||||
personality: "",
|
||||
category: "Fantasy",
|
||||
});
|
||||
|
||||
const [step, setStep] = useState(1);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setCharacterData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (step < 4) setStep(step + 1);
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
if (step > 1) setStep(step - 1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold mb-2">Create Character</h1>
|
||||
<p className="text-gray-600">Build your own AI character in 4 simple steps</p>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="flex gap-2 mb-8">
|
||||
{[1, 2, 3, 4].map((num) => (
|
||||
<div
|
||||
key={num}
|
||||
className={`flex-1 h-2 rounded-full transition ${
|
||||
num <= step ? "bg-black" : "bg-gray-200"
|
||||
}`}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<div className="bg-white border border-gray-200 rounded-xl p-8 space-y-6">
|
||||
{/* Step 1: Basic Info */}
|
||||
{step === 1 && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Character Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={characterData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="e.g., Luna, Alex, Sage"
|
||||
className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Category</label>
|
||||
<select
|
||||
name="category"
|
||||
value={characterData.category}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition"
|
||||
>
|
||||
<option>Fantasy</option>
|
||||
<option>Sci-Fi</option>
|
||||
<option>Romance</option>
|
||||
<option>Mystery</option>
|
||||
<option>Adventure</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600">
|
||||
Give your character a unique name and choose a category that best fits their personality.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 2: Avatar */}
|
||||
{step === 2 && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-4">Character Avatar</label>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="w-32 h-32 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-xl flex items-center justify-center mb-6">
|
||||
<span className="text-5xl">✨</span>
|
||||
</div>
|
||||
|
||||
{/* Upload Options */}
|
||||
<div className="space-y-3">
|
||||
<button className="w-full border-2 border-dashed border-gray-300 rounded-lg py-8 hover:border-gray-400 transition flex flex-col items-center gap-2">
|
||||
<Upload className="w-6 h-6 text-gray-600" />
|
||||
<span className="text-sm font-medium">Upload Image</span>
|
||||
<span className="text-xs text-gray-500">or drag and drop</span>
|
||||
</button>
|
||||
|
||||
<button className="w-full border-2 border-gray-200 rounded-lg py-3 font-medium hover:bg-gray-50 transition flex items-center justify-center gap-2">
|
||||
<Wand2 className="w-5 h-5" />
|
||||
Generate with AI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 3: Description */}
|
||||
{step === 3 && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Character Description</label>
|
||||
<textarea
|
||||
name="description"
|
||||
value={characterData.description}
|
||||
onChange={handleChange}
|
||||
placeholder="Describe your character's appearance, background, and key traits..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-semibold mb-2">Personality & Traits</label>
|
||||
<textarea
|
||||
name="personality"
|
||||
value={characterData.personality}
|
||||
onChange={handleChange}
|
||||
placeholder="Define their personality, interests, quirks, and conversation style..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-black focus:outline-none transition resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step 4: Review */}
|
||||
{step === 4 && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gray-50 rounded-lg p-6 space-y-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-lg flex items-center justify-center text-3xl">
|
||||
✨
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold">{characterData.name || "Character Name"}</h3>
|
||||
<p className="text-sm text-gray-600">{characterData.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 pt-4">
|
||||
<p className="text-sm">
|
||||
<span className="font-semibold">Description:</span>{" "}
|
||||
{characterData.description || "No description provided"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 pt-4">
|
||||
<p className="text-sm">
|
||||
<span className="font-semibold">Personality:</span>{" "}
|
||||
{characterData.personality || "No personality traits provided"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-600">
|
||||
Review your character and click "Publish" to make them available to the community!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-6 border-t border-gray-200">
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
disabled={step === 1}
|
||||
className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-lg font-medium hover:bg-gray-50 transition disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
{step < 4 ? (
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="flex-1 px-4 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
) : (
|
||||
<button className="flex-1 px-4 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition flex items-center justify-center gap-2">
|
||||
<Save className="w-5 h-5" />
|
||||
Publish Character
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user