118 lines
5.3 KiB
TypeScript
118 lines
5.3 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { Button } from '../ui/button';
|
|
import { X, Image as ImageIcon, Video, Mic2, BarChart, Hash } from 'lucide-react';
|
|
import { useToast } from '../../context/ToastContext';
|
|
|
|
interface CreatePostModalProps {
|
|
onClose: () => void;
|
|
onCreate: (postData: { content: string; visibility: string; type: string }) => void;
|
|
}
|
|
|
|
export const CreatePostModal: React.FC<CreatePostModalProps> = ({ onClose, onCreate }) => {
|
|
const { addToast } = useToast();
|
|
const [content, setContent] = useState('');
|
|
const [visibility, setVisibility] = useState('public');
|
|
const [postType, setPostType] = useState('text'); // text, image, audio, etc.
|
|
|
|
const handleSubmit = () => {
|
|
if (!content) return;
|
|
onCreate({ content, visibility, type: postType });
|
|
onClose();
|
|
};
|
|
|
|
const insertHashtag = (tag: string) => {
|
|
setContent(prev => `${prev } #${tag} `);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
|
|
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
|
|
|
|
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
|
<h3 className="font-bold text-white">Create Post</h3>
|
|
<button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
|
|
</div>
|
|
|
|
<div className="p-4 flex-1">
|
|
<div className="flex gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-gray-700 overflow-hidden flex-shrink-0">
|
|
<img src="https://picsum.photos/id/237/100/100" className="w-full h-full object-cover" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="mb-2">
|
|
<select
|
|
className="bg-kodo-ink border border-kodo-steel rounded px-2 py-1 text-xs text-kodo-cyan focus:outline-none cursor-pointer"
|
|
value={visibility}
|
|
onChange={(e) => setVisibility(e.target.value)}
|
|
>
|
|
<option value="public">Public</option>
|
|
<option value="followers">Followers Only</option>
|
|
<option value="private">Private Draft</option>
|
|
</select>
|
|
</div>
|
|
<textarea
|
|
className="w-full bg-transparent border-none text-white placeholder-gray-500 focus:ring-0 resize-none h-32 text-base"
|
|
placeholder="What's happening in your studio?"
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Suggestions */}
|
|
<div className="mt-4 flex flex-wrap gap-2 text-xs">
|
|
<span className="text-gray-500 flex items-center gap-1"><Hash className="w-3 h-3" /> Trending:</span>
|
|
{['Synthwave', 'NewGear', 'StudioLife', 'WIP'].map(tag => (
|
|
<button
|
|
key={tag}
|
|
onClick={() => insertHashtag(tag)}
|
|
className="text-kodo-cyan hover:underline"
|
|
>
|
|
#{tag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
|
<div className="flex gap-2">
|
|
<button
|
|
className={`p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-cyan ${postType === 'image' ? 'text-kodo-cyan' : ''}`}
|
|
onClick={() => { setPostType('image'); addToast("Image upload simulated"); }}
|
|
title="Photo"
|
|
>
|
|
<ImageIcon className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-magenta"
|
|
onClick={() => { setPostType('video'); addToast("Video upload simulated"); }}
|
|
title="Video"
|
|
>
|
|
<Video className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-lime"
|
|
onClick={() => { setPostType('audio'); addToast("Audio upload simulated"); }}
|
|
title="Audio"
|
|
>
|
|
<Mic2 className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
className="p-2 rounded hover:bg-white/10 text-gray-400 hover:text-kodo-gold"
|
|
onClick={() => { setPostType('poll'); addToast("Poll creator simulated"); }}
|
|
title="Poll"
|
|
>
|
|
<BarChart className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<Button variant="primary" onClick={handleSubmit} disabled={!content}>
|
|
Post
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|