76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { mdiImageOutline, mdiVideoOutline, mdiEmoticonOutline, mdiSend } from '@mdi/js';
|
|
import BaseIcon from '../BaseIcon';
|
|
import UserAvatarCurrentUser from '../UserAvatarCurrentUser';
|
|
import { useAppDispatch } from '../../stores/hooks';
|
|
import { create as createPost } from '../../stores/posts/postsSlice';
|
|
import BaseButton from '../BaseButton';
|
|
|
|
const CreatePost = ({ onPostCreated }: { onPostCreated: () => void }) => {
|
|
const dispatch = useAppDispatch();
|
|
const [caption, setCaption] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!caption.trim()) return;
|
|
|
|
setLoading(true);
|
|
try {
|
|
await dispatch(createPost({
|
|
caption,
|
|
post_type: 'text',
|
|
visibility: 'public',
|
|
published_at: new Date().toISOString()
|
|
}));
|
|
setCaption('');
|
|
onPostCreated();
|
|
} catch (error) {
|
|
console.error('Failed to create post', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-dark-800 rounded-xl shadow-sm p-4 mb-6 border border-gray-100 dark:border-dark-700">
|
|
<div className="flex items-start space-x-3">
|
|
<UserAvatarCurrentUser className="w-10 h-10 mt-1" />
|
|
<div className="flex-1">
|
|
<textarea
|
|
className="w-full bg-gray-50 dark:bg-dark-900 border-none rounded-lg p-3 text-sm focus:ring-2 focus:ring-indigo-500 transition-shadow resize-none min-h-[100px]"
|
|
placeholder="What's on your mind?"
|
|
value={caption}
|
|
onChange={(e) => setCaption(e.target.value)}
|
|
/>
|
|
|
|
<div className="flex items-center justify-between mt-3">
|
|
<div className="flex items-center space-x-4">
|
|
<button className="text-gray-500 hover:text-indigo-500 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
|
|
<BaseIcon path={mdiImageOutline} size="22" />
|
|
</button>
|
|
<button className="text-gray-500 hover:text-rose-500 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
|
|
<BaseIcon path={mdiVideoOutline} size="22" />
|
|
</button>
|
|
<button className="text-gray-500 hover:text-yellow-500 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-dark-700">
|
|
<BaseIcon path={mdiEmoticonOutline} size="22" />
|
|
</button>
|
|
</div>
|
|
|
|
<BaseButton
|
|
label="Post"
|
|
color="info"
|
|
icon={mdiSend}
|
|
small
|
|
disabled={!caption.trim() || loading}
|
|
onClick={handleSubmit}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreatePost;
|