Refactor CreateLookDialog to use compact sidebar and 2-column grid
This change refines the `CreateLookDialog` layout to be more compact and user-friendly. Key changes: - Replaced the sidebar with a text-only vertical navigation bar (`w-32`) to maximize content space. - Adjusted the equipment grid to a fixed 2-column layout (`grid-cols-2`) for better item visibility and reduced density. - Removed icons from sidebar buttons to streamline the interface. - Maintained the tabbed structure (Equipment, Pose, Expression, Instructions) and footer layout from the previous iteration.
This commit is contained in:
google-labs-jules[bot] committed
1 parent
f5dbce1640
commit
db22c3f271
1 file changed
+343
-269
@@ -9,7 +9,14 @@ import { LoadOutfitDialog } from './LoadOutfitDialog'
|
||||
import { SaveOutfitDialog } from './SaveOutfitDialog'
|
||||
import { Badge } from './ui/badge'
|
||||
import { Button } from './ui/button'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './ui/dialog'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from './ui/dialog'
|
||||
import { Label } from './ui/label'
|
||||
import { ScrollArea, ScrollBar } from './ui/scroll-area'
|
||||
import { Textarea } from './ui/textarea'
|
||||
@@ -29,12 +36,15 @@ interface CreateLookDialogProps {
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
type Tab = 'equipment' | 'pose' | 'expression' | 'instructions'
|
||||
|
||||
export const CreateLookDialog: React.FC<CreateLookDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
characterId,
|
||||
onSuccess,
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<Tab>('equipment')
|
||||
const [items, setItems] = useState<EquipmentItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([])
|
||||
@@ -165,288 +175,352 @@ export const CreateLookDialog: React.FC<CreateLookDialogProps> = ({
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-5xl h-[85vh] flex flex-col p-0 gap-0 bg-stone-50 overflow-hidden">
|
||||
<DialogHeader className="px-6 py-4 border-b border-stone-200 bg-white shrink-0 flex flex-row items-center justify-between space-y-0">
|
||||
<div>
|
||||
<DialogTitle className="text-xl font-black uppercase tracking-tighter text-stone-800">
|
||||
Select Equipment
|
||||
</DialogTitle>
|
||||
<DialogDescription>Choose items to equip on your character.</DialogDescription>
|
||||
<DialogContent className="max-w-7xl h-[85vh] flex flex-col p-0 gap-0 bg-stone-50 overflow-hidden">
|
||||
{/* Header */}
|
||||
<DialogHeader className="px-6 py-4 border-b border-stone-200 bg-white shrink-0">
|
||||
<DialogTitle className="text-xl font-black uppercase tracking-tighter text-stone-800">
|
||||
Create New Look
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Design your character's look by selecting equipment, pose, and expression.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Sidebar Navigation */}
|
||||
<div className="w-32 bg-stone-100 border-r border-stone-200 flex flex-col py-4 gap-1">
|
||||
<button
|
||||
onClick={() => setActiveTab('equipment')}
|
||||
className={cn(
|
||||
'w-full text-left px-6 py-3 text-sm font-medium transition-colors block',
|
||||
activeTab === 'equipment'
|
||||
? 'bg-white text-stone-900 border-r-2 border-stone-900 shadow-sm'
|
||||
: 'text-stone-500 hover:text-stone-900 hover:bg-stone-50',
|
||||
)}
|
||||
>
|
||||
Equipment
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('pose')}
|
||||
className={cn(
|
||||
'w-full text-left px-6 py-3 text-sm font-medium transition-colors block',
|
||||
activeTab === 'pose'
|
||||
? 'bg-white text-stone-900 border-r-2 border-stone-900 shadow-sm'
|
||||
: 'text-stone-500 hover:text-stone-900 hover:bg-stone-50',
|
||||
)}
|
||||
>
|
||||
Pose
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('expression')}
|
||||
className={cn(
|
||||
'w-full text-left px-6 py-3 text-sm font-medium transition-colors block',
|
||||
activeTab === 'expression'
|
||||
? 'bg-white text-stone-900 border-r-2 border-stone-900 shadow-sm'
|
||||
: 'text-stone-500 hover:text-stone-900 hover:bg-stone-50',
|
||||
)}
|
||||
>
|
||||
Expression
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('instructions')}
|
||||
className={cn(
|
||||
'w-full text-left px-6 py-3 text-sm font-medium transition-colors block',
|
||||
activeTab === 'instructions'
|
||||
? 'bg-white text-stone-900 border-r-2 border-stone-900 shadow-sm'
|
||||
: 'text-stone-500 hover:text-stone-900 hover:bg-stone-50',
|
||||
)}
|
||||
>
|
||||
Instructions
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 flex flex-col bg-stone-50 overflow-hidden relative">
|
||||
{/* Equipment Tab */}
|
||||
{activeTab === 'equipment' && (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Category Filter */}
|
||||
<div className="px-6 py-3 border-b border-stone-200 bg-white shrink-0">
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<div className="flex w-max space-x-2 pb-2">
|
||||
{EQUIPMENT_CATEGORIES.map((cat) => {
|
||||
const isSelected = selectedCategories.includes(cat.main_category)
|
||||
return (
|
||||
<Badge
|
||||
key={cat.main_category}
|
||||
variant={isSelected ? 'default' : 'outline'}
|
||||
className={cn(
|
||||
'cursor-pointer px-3 py-1.5 text-xs transition-all select-none hover:bg-stone-100',
|
||||
isSelected
|
||||
? 'bg-stone-900 text-white border-stone-900 hover:bg-stone-800'
|
||||
: 'bg-white text-stone-600 border-stone-200',
|
||||
)}
|
||||
onClick={() => toggleCategory(cat.main_category)}
|
||||
>
|
||||
{cat.main_category}
|
||||
</Badge>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Equipment Grid */}
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-full min-h-[200px]">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-stone-400" />
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full min-h-[200px] text-stone-400">
|
||||
<p>No equipment found.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 gap-6 pb-20">
|
||||
{items.map((item) => {
|
||||
const isSelected = selectedEquipments.some((e) => e.id === item.id)
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
'group relative bg-white rounded-xl border transition-all cursor-pointer overflow-hidden hover:shadow-md',
|
||||
isSelected
|
||||
? 'border-amber-500 ring-2 ring-amber-500/20 shadow-md'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => toggleEquipment(item)}
|
||||
>
|
||||
<div className="aspect-square p-4 flex items-center justify-center relative bg-stone-50/50">
|
||||
<img
|
||||
src={item.image?.path ? `/files/${item.image.path}` : ''}
|
||||
className="max-w-full max-h-full object-contain mix-blend-multiply"
|
||||
alt={item.name}
|
||||
/>
|
||||
{isSelected && (
|
||||
<div className="absolute top-2 right-2 bg-amber-500 text-white rounded-full p-1 shadow-sm z-10">
|
||||
<Check className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-3 border-t border-stone-100 bg-white">
|
||||
<p className="text-sm font-bold truncate text-stone-800">
|
||||
{item.name}
|
||||
</p>
|
||||
<p className="text-[10px] text-stone-500 uppercase truncate mt-0.5">
|
||||
{item.category}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* Selected Items (Persistent in Equipment Tab) */}
|
||||
<div className="border-t border-stone-200 bg-white shrink-0 p-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-10">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="text-xs font-bold text-stone-800 uppercase tracking-wide flex items-center gap-2">
|
||||
Selected Items
|
||||
<span className="bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full text-[10px]">
|
||||
{selectedEquipments.length}
|
||||
</span>
|
||||
</h4>
|
||||
</div>
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<div className="flex gap-3 pb-2 min-h-[80px] items-center">
|
||||
{selectedEquipments.length === 0 ? (
|
||||
<div className="text-stone-400 text-xs italic w-full text-center py-6 border-2 border-dashed border-stone-100 rounded-lg">
|
||||
Select items from the list above.
|
||||
</div>
|
||||
) : (
|
||||
selectedEquipments.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="relative w-20 h-20 shrink-0 bg-stone-50 rounded-lg border border-stone-200 flex items-center justify-center group"
|
||||
>
|
||||
<img
|
||||
src={item.image?.path ? `/files/${item.image.path}` : ''}
|
||||
className="max-w-full max-h-full object-contain p-1"
|
||||
alt={item.name}
|
||||
/>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
toggleEquipment(item)
|
||||
}}
|
||||
className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pose Tab */}
|
||||
{activeTab === 'pose' && (
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
'aspect-[3/4] border rounded-lg cursor-pointer flex flex-col items-center justify-center bg-white transition-all hover:bg-stone-50',
|
||||
selectedPoseId === null
|
||||
? 'border-amber-500 ring-2 ring-amber-500/20'
|
||||
: 'border-stone-200',
|
||||
)}
|
||||
onClick={() => setSelectedPoseId(null)}
|
||||
>
|
||||
<User className="w-10 h-10 text-stone-400 mb-2" />
|
||||
<span className="text-xs font-medium text-stone-600">Default Pose</span>
|
||||
</div>
|
||||
{poses.map((pose) => (
|
||||
<div
|
||||
key={pose.id}
|
||||
className={cn(
|
||||
'group relative aspect-[3/4] border rounded-lg cursor-pointer overflow-hidden transition-all hover:shadow-md bg-white',
|
||||
selectedPoseId === pose.id
|
||||
? 'border-amber-500 ring-2 ring-amber-500/20'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => setSelectedPoseId(pose.id)}
|
||||
>
|
||||
<img
|
||||
src={pose.imageUrl}
|
||||
alt={pose.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 inset-x-0 bg-black/60 p-2 text-center">
|
||||
<span className="text-xs text-white font-medium truncate block">
|
||||
{pose.name}
|
||||
</span>
|
||||
</div>
|
||||
{selectedPoseId === pose.id && (
|
||||
<div className="absolute top-2 right-2 bg-amber-500 text-white rounded-full p-1 shadow-sm">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
{/* Expression Tab */}
|
||||
{activeTab === 'expression' && (
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
'aspect-[3/4] border rounded-lg cursor-pointer flex flex-col items-center justify-center bg-white transition-all hover:bg-stone-50',
|
||||
selectedExpressionId === null
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/20'
|
||||
: 'border-stone-200',
|
||||
)}
|
||||
onClick={() => setSelectedExpressionId(null)}
|
||||
>
|
||||
<Smile className="w-10 h-10 text-stone-400 mb-2" />
|
||||
<span className="text-xs font-medium text-stone-600">Default</span>
|
||||
</div>
|
||||
{expressions.map((expression) => (
|
||||
<div
|
||||
key={expression.id}
|
||||
className={cn(
|
||||
'group relative aspect-[3/4] border rounded-lg cursor-pointer overflow-hidden transition-all hover:shadow-md bg-white',
|
||||
selectedExpressionId === expression.id
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/20'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => setSelectedExpressionId(expression.id)}
|
||||
>
|
||||
<img
|
||||
src={expression.imageUrl}
|
||||
alt={expression.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 inset-x-0 bg-black/60 p-2 text-center">
|
||||
<span className="text-xs text-white font-medium truncate block">
|
||||
{expression.name}
|
||||
</span>
|
||||
</div>
|
||||
{selectedExpressionId === expression.id && (
|
||||
<div className="absolute top-2 right-2 bg-emerald-500 text-white rounded-full p-1 shadow-sm">
|
||||
<Check className="w-4 h-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
{/* Instructions Tab */}
|
||||
{activeTab === 'instructions' && (
|
||||
<div className="p-8 max-w-2xl mx-auto w-full h-full flex flex-col">
|
||||
<div className="bg-white p-6 rounded-xl border border-stone-200 shadow-sm flex-1 flex flex-col">
|
||||
<Label
|
||||
htmlFor="user-prompt"
|
||||
className="text-sm font-bold text-stone-800 uppercase tracking-wide mb-4 block"
|
||||
>
|
||||
Extra Instructions
|
||||
</Label>
|
||||
<p className="text-sm text-stone-500 mb-4">
|
||||
Add any specific details or instructions for the AI generation. Describe how
|
||||
the equipment should be worn or any specific stylistic preferences.
|
||||
</p>
|
||||
<Textarea
|
||||
id="user-prompt"
|
||||
placeholder="E.g. The sword should be worn on the back, slightly angled to the right..."
|
||||
className="resize-none bg-stone-50 border-stone-200 focus:border-stone-400 flex-1 text-base p-4"
|
||||
value={userPrompt}
|
||||
onChange={(e) => setUserPrompt(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<DialogFooter className="px-6 py-4 border-t border-stone-200 bg-white shrink-0 flex items-center justify-between sm:justify-between w-full">
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setLoadOutfitOpen(true)}>
|
||||
<Button variant="outline" onClick={() => setLoadOutfitOpen(true)}>
|
||||
<Download className="w-4 h-4 mr-2" /> Load Outfit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSaveOutfitOpen(true)}
|
||||
disabled={selectedEquipments.length === 0}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" /> Save Outfit
|
||||
</Button>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Pose Selection */}
|
||||
<div className="px-6 py-3 border-b border-stone-200 bg-white shrink-0">
|
||||
<div className="mb-2 text-xs font-bold text-stone-700 uppercase">Select Pose</div>
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<div className="flex w-max space-x-2 pb-2">
|
||||
<div
|
||||
className={cn(
|
||||
'w-16 h-20 border rounded-lg cursor-pointer flex flex-col items-center justify-center bg-stone-50 shrink-0 transition-all',
|
||||
selectedPoseId === null
|
||||
? 'border-amber-500 ring-2 ring-amber-500/20 bg-amber-50'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => setSelectedPoseId(null)}
|
||||
>
|
||||
<User className="w-6 h-6 text-stone-400 mb-1" />
|
||||
<span className="text-[10px] font-medium text-stone-600">Default</span>
|
||||
</div>
|
||||
{poses.map((pose) => {
|
||||
const isSelected = selectedPoseId === pose.id
|
||||
return (
|
||||
<div
|
||||
key={pose.id}
|
||||
className={cn(
|
||||
'w-16 h-20 border rounded-lg cursor-pointer overflow-hidden shrink-0 transition-all relative',
|
||||
isSelected
|
||||
? 'border-amber-500 ring-2 ring-amber-500/20 shadow-md'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => setSelectedPoseId(pose.id)}
|
||||
>
|
||||
<img
|
||||
src={pose.imageUrl}
|
||||
alt={pose.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{isSelected && (
|
||||
<div className="absolute inset-0 bg-amber-500/10 flex items-center justify-center">
|
||||
<Check className="w-6 h-6 text-amber-500 drop-shadow-md" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute bottom-0 inset-x-0 bg-black/50 p-0.5 text-center">
|
||||
<span className="text-[8px] text-white font-medium truncate block">
|
||||
{pose.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Expression Selection */}
|
||||
<div className="px-6 py-3 border-b border-stone-200 bg-white shrink-0">
|
||||
<div className="mb-2 text-xs font-bold text-stone-700 uppercase">Select Expression</div>
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<div className="flex w-max space-x-2 pb-2">
|
||||
<div
|
||||
className={cn(
|
||||
'w-16 h-20 border rounded-lg cursor-pointer flex flex-col items-center justify-center bg-stone-50 shrink-0 transition-all',
|
||||
selectedExpressionId === null
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/20 bg-emerald-50'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => setSelectedExpressionId(null)}
|
||||
>
|
||||
<Smile className="w-6 h-6 text-stone-400 mb-1" />
|
||||
<span className="text-[10px] font-medium text-stone-600">Default</span>
|
||||
</div>
|
||||
{expressions.map((expression) => {
|
||||
const isSelected = selectedExpressionId === expression.id
|
||||
return (
|
||||
<div
|
||||
key={expression.id}
|
||||
className={cn(
|
||||
'w-16 h-20 border rounded-lg cursor-pointer overflow-hidden shrink-0 transition-all relative',
|
||||
isSelected
|
||||
? 'border-emerald-500 ring-2 ring-emerald-500/20 shadow-md'
|
||||
: 'border-stone-200 hover:border-stone-400',
|
||||
)}
|
||||
onClick={() => setSelectedExpressionId(expression.id)}
|
||||
>
|
||||
<img
|
||||
src={expression.imageUrl}
|
||||
alt={expression.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{isSelected && (
|
||||
<div className="absolute inset-0 bg-emerald-500/10 flex items-center justify-center">
|
||||
<Check className="w-6 h-6 text-emerald-500 drop-shadow-md" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute bottom-0 inset-x-0 bg-black/50 p-0.5 text-center">
|
||||
<span className="text-[8px] text-white font-medium truncate block">
|
||||
{expression.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="px-6 py-3 border-b border-stone-200 bg-white shrink-0">
|
||||
<ScrollArea className="w-full whitespace-nowrap">
|
||||
<div className="flex w-max space-x-2 pb-2">
|
||||
{EQUIPMENT_CATEGORIES.map((cat) => {
|
||||
const isSelected = selectedCategories.includes(cat.main_category)
|
||||
return (
|
||||
<Badge
|
||||
key={cat.main_category}
|
||||
variant={isSelected ? 'default' : 'outline'}
|
||||
className={cn(
|
||||
'cursor-pointer px-3 py-1.5 text-xs transition-all select-none hover:bg-stone-100',
|
||||
isSelected
|
||||
? 'bg-stone-900 text-white border-stone-900 hover:bg-stone-800'
|
||||
: 'bg-white text-stone-600 border-stone-200',
|
||||
)}
|
||||
onClick={() => toggleCategory(cat.main_category)}
|
||||
>
|
||||
{cat.main_category}
|
||||
</Badge>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 overflow-y-auto p-6 bg-stone-50/50">
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-stone-400" />
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-stone-400">
|
||||
<p>No equipment found.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{items.map((item) => {
|
||||
const isSelected = selectedEquipments.some((e) => e.id === item.id)
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
className={cn(
|
||||
'group relative bg-white rounded-xl border transition-all cursor-pointer overflow-hidden',
|
||||
isSelected
|
||||
? 'border-amber-500 ring-2 ring-amber-500/20 shadow-lg'
|
||||
: 'border-stone-200 hover:border-stone-400 hover:shadow-md',
|
||||
)}
|
||||
onClick={() => toggleEquipment(item)}
|
||||
>
|
||||
<div className="aspect-square p-4 flex items-center justify-center relative">
|
||||
<img
|
||||
src={item.image?.path ? `/files/${item.image.path}` : ''}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
alt={item.name}
|
||||
/>
|
||||
{isSelected && (
|
||||
<div className="absolute top-2 right-2 bg-amber-500 text-white rounded-full p-1 shadow-sm">
|
||||
<Check className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-2 border-t border-stone-100 bg-white">
|
||||
<p className="text-xs font-bold truncate text-stone-800">{item.name}</p>
|
||||
<p className="text-[10px] text-stone-400 uppercase truncate">
|
||||
{item.category}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* User Prompt Area */}
|
||||
<div className="px-6 py-4 border-t border-stone-200 bg-white shrink-0">
|
||||
<Label
|
||||
htmlFor="user-prompt"
|
||||
className="text-xs font-bold text-stone-700 uppercase mb-2 block"
|
||||
>
|
||||
Extra Instructions (Optional)
|
||||
</Label>
|
||||
<Textarea
|
||||
id="user-prompt"
|
||||
placeholder="E.g. The sword should be worn on the back..."
|
||||
className="resize-none bg-stone-50 border-stone-200 focus:border-stone-400"
|
||||
value={userPrompt}
|
||||
onChange={(e) => setUserPrompt(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Bottom Dock - Selected Items */}
|
||||
<div className="border-t border-stone-200 bg-white shrink-0 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-10">
|
||||
<div className="px-6 py-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h4 className="text-sm font-bold text-stone-800 uppercase tracking-wide flex items-center gap-2">
|
||||
Selected Items{' '}
|
||||
<span className="bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full text-xs">
|
||||
{selectedEquipments.length}
|
||||
</span>
|
||||
</h4>
|
||||
{error && <span className="text-red-500 text-xs font-medium">{error}</span>}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 w-full">
|
||||
<ScrollArea className="flex-1 whitespace-nowrap">
|
||||
<div className="flex gap-3 pb-2 h-[120px] items-center">
|
||||
{selectedEquipments.length === 0 ? (
|
||||
<div className="text-stone-400 text-sm italic w-full text-center py-8 border-2 border-dashed border-stone-100 rounded-xl">
|
||||
Select items from the list above to equip them.
|
||||
</div>
|
||||
) : (
|
||||
selectedEquipments.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="relative w-[100px] h-[100px] shrink-0 bg-stone-50 rounded-lg border border-stone-200 flex items-center justify-center group"
|
||||
>
|
||||
<img
|
||||
src={item.image?.path ? `/files/${item.image.path}` : ''}
|
||||
className="max-w-full max-h-full object-contain p-2"
|
||||
alt={item.name}
|
||||
/>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
toggleEquipment(item)
|
||||
}}
|
||||
className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</div>
|
||||
<div className="h-10 items-center pl-4 border-l border-stone-100">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white shadow-lg border-0 h-full max-h-[150px] min-w-[120px]"
|
||||
disabled={submitting || selectedEquipments.length === 0}
|
||||
onClick={handleCreate}
|
||||
>
|
||||
{submitting ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Generate'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
{error && <span className="text-red-500 text-sm font-medium">{error}</span>}
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-stone-900 hover:bg-stone-800 text-white shadow-lg min-w-[150px]"
|
||||
disabled={submitting || selectedEquipments.length === 0}
|
||||
onClick={handleCreate}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin mr-2" /> Generating...
|
||||
</>
|
||||
) : (
|
||||
'Generate Look'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
|
||||
Reference in new issue
Block a user