Initial commit of Glimpse: Procedural paper desk and moodboard workspace
This commit is contained in:
airent106 committed
1 parent
eb0ad24141
commit
eb3787dd16
29 files changed
+6333
No files matched your search
@@ -0,0 +1,275 @@
|
||||
import React, { useState } from 'react';
|
||||
import { CardItem, CardType, AttachType } from '../types';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
interface AddCardModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onAdd: (card: Partial<CardItem>) => void;
|
||||
}
|
||||
|
||||
export const AddCardModal: React.FC<AddCardModalProps> = ({ isOpen, onClose, onAdd }) => {
|
||||
const [type, setType] = useState<CardType>('sticky');
|
||||
const [title, setTitle] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [color, setColor] = useState('#FFF9A6');
|
||||
const [attachType, setAttachType] = useState<AttachType>('washi');
|
||||
const [fontFamily, setFontFamily] = useState('font-caveat');
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onAdd({
|
||||
type,
|
||||
title: title.trim() || undefined,
|
||||
content: content.trim(),
|
||||
imageUrl: type === 'polaroid' ? (imageUrl.trim() || 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80') : undefined,
|
||||
photoCaption: type === 'polaroid' ? (title.trim() || content.trim()) : undefined,
|
||||
color,
|
||||
attachType,
|
||||
fontFamily,
|
||||
width: type === 'polaroid' ? 175 : type === 'tag' ? 140 : 180,
|
||||
height: type === 'polaroid' ? 220 : type === 'tag' ? 220 : 180
|
||||
});
|
||||
onClose();
|
||||
setTitle('');
|
||||
setContent('');
|
||||
setImageUrl('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
||||
<div className="bg-[#1C1A17] border border-neutral-700 w-full max-w-md rounded-xl p-5 text-neutral-200 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-4 pb-2 border-b border-neutral-800">
|
||||
<h2 className="text-base font-bold text-white flex items-center gap-2">
|
||||
<span>Add New Paper Card</span>
|
||||
</h2>
|
||||
<button onClick={onClose} className="text-neutral-400 hover:text-white">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4 text-xs">
|
||||
{/* Card Type */}
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Card Type</label>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
{(['sticky', 'polaroid', 'tag', 'torn', 'business', 'moodboard'] as CardType[]).map((t) => (
|
||||
<button
|
||||
type="button"
|
||||
key={t}
|
||||
onClick={() => setType(t)}
|
||||
className={`py-1.5 rounded capitalize border transition text-center ${
|
||||
type === t
|
||||
? 'bg-amber-500/20 text-amber-300 border-amber-500 font-bold'
|
||||
: 'bg-neutral-800 text-neutral-400 border-neutral-700 hover:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Title / Header</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="e.g. Brainstorm note, Project Retro"
|
||||
className="w-full bg-neutral-800 border border-neutral-700 rounded px-2.5 py-1.5 text-neutral-100 focus:outline-none focus:border-amber-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Content / Body</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
placeholder="Write your note or thoughts here..."
|
||||
className="w-full bg-neutral-800 border border-neutral-700 rounded px-2.5 py-1.5 text-neutral-100 focus:outline-none focus:border-amber-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Image URL for Polaroid */}
|
||||
{type === 'polaroid' && (
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Image URL (Optional)</label>
|
||||
<input
|
||||
type="url"
|
||||
value={imageUrl}
|
||||
onChange={(e) => setImageUrl(e.target.value)}
|
||||
placeholder="https://images.unsplash.com/..."
|
||||
className="w-full bg-neutral-800 border border-neutral-700 rounded px-2.5 py-1.5 text-neutral-100 focus:outline-none focus:border-amber-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Color & Fastener */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Paper Tint</label>
|
||||
<div className="flex gap-1.5 flex-wrap">
|
||||
{['#FFF9A6', '#FFDFD3', '#E0D4FC', '#BEE7F5', '#C8F7C5', '#FFFFFF', '#282C34'].map((c) => (
|
||||
<button
|
||||
type="button"
|
||||
key={c}
|
||||
onClick={() => setColor(c)}
|
||||
className={`w-6 h-6 rounded-full border-2 ${color === c ? 'border-amber-400 scale-110' : 'border-neutral-600'}`}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Fastener</label>
|
||||
<select
|
||||
value={attachType}
|
||||
onChange={(e) => setAttachType(e.target.value as AttachType)}
|
||||
className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1.5 text-neutral-200"
|
||||
>
|
||||
<option value="none">None</option>
|
||||
<option value="washi">Washi Tape</option>
|
||||
<option value="pin">Red Pushpin</option>
|
||||
<option value="paperclip">Paperclip</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-3 border-t border-neutral-800">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-3 py-1.5 rounded bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-1.5 rounded bg-amber-500 hover:bg-amber-400 text-neutral-950 font-bold"
|
||||
>
|
||||
Add Card
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface EditCardModalProps {
|
||||
card: CardItem | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (updated: CardItem) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
export const EditCardModal: React.FC<EditCardModalProps> = ({
|
||||
card,
|
||||
isOpen,
|
||||
onClose,
|
||||
onSave,
|
||||
onDelete
|
||||
}) => {
|
||||
if (!isOpen || !card) return null;
|
||||
|
||||
const [title, setTitle] = useState(card.title || '');
|
||||
const [content, setContent] = useState(card.content || '');
|
||||
const [color, setColor] = useState(card.color || '#FFF9A6');
|
||||
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
...card,
|
||||
title: title.trim() || undefined,
|
||||
content: content.trim(),
|
||||
color
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
|
||||
<div className="bg-[#1C1A17] border border-neutral-700 w-full max-w-md rounded-xl p-5 text-neutral-200 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-4 pb-2 border-b border-neutral-800">
|
||||
<h2 className="text-sm font-bold text-white flex items-center gap-2">
|
||||
<span>Edit Card ({card.type})</span>
|
||||
</h2>
|
||||
<button onClick={onClose} className="text-neutral-400 hover:text-white">
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 text-xs">
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full bg-neutral-800 border border-neutral-700 rounded px-2.5 py-1.5 text-neutral-100 focus:outline-none focus:border-amber-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Content</label>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
className="w-full bg-neutral-800 border border-neutral-700 rounded px-2.5 py-1.5 text-neutral-100 focus:outline-none focus:border-amber-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-neutral-400 mb-1">Paper Tint</label>
|
||||
<div className="flex gap-2">
|
||||
{['#FFF9A6', '#FFDFD3', '#E0D4FC', '#BEE7F5', '#C8F7C5', '#FFFFFF', '#282C34'].map((c) => (
|
||||
<button
|
||||
type="button"
|
||||
key={c}
|
||||
onClick={() => setColor(c)}
|
||||
className={`w-6 h-6 rounded-full border-2 ${color === c ? 'border-amber-400 scale-110' : 'border-neutral-600'}`}
|
||||
style={{ backgroundColor: c }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pt-3 border-t border-neutral-800">
|
||||
<button
|
||||
onClick={() => {
|
||||
onDelete(card.id);
|
||||
onClose();
|
||||
}}
|
||||
className="px-3 py-1.5 rounded bg-red-900/40 text-red-300 hover:bg-red-800/60 font-medium"
|
||||
>
|
||||
Delete Card
|
||||
</button>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-3 py-1.5 rounded bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-4 py-1.5 rounded bg-amber-500 hover:bg-amber-400 text-neutral-950 font-bold"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user