сайт соц. сеть

import React, { useState, useEffect } from 'react'; const App = () => { const [posts, setPosts] = useState([]); const [newPost, setNewPost] = useState(''); const [user, setUser] = useState({ name: 'Алексей', avatar: 'https://placehold.co/40x40/5271ff/ffffff?text=A' }); // Mock data for initial posts useEffect(() => { const mockPosts = [ { id: 1, user: { name: 'Мария', avatar: 'https://placehold.co/40x40/ff6b6b/ffffff?text=M' }, content: 'Только что вернулась с прогулки в парке. Осень - мое любимое время года! 🍂 #осень #прогулка', image: 'https://placehold.co/600x400/8ecae6/212121?text=Осенний+парк', likes: 24, comments: 8, shares: 3, time: '2 часа назад', liked: false }, { id: 2, user: { name: 'Дмитрий', avatar: 'https://placehold.co/40x40/2a9d8f/ffffff?text=D' }, content: 'Новый рецепт кофе, который изменил моё утро! А вы какой кофе предпочитаете? ☕️', image: 'https://placehold.co/600x400/e9c46a/212121?text=Кофе', likes: 57, comments: 12, shares: 9, time: '5 часов назад', liked: true }, { id: 3, user: { name: 'Елена', avatar: 'https://placehold.co/40x40/e76f51/ffffff?text=E' }, content: 'Закончила новый курс по веб-разработке! Так рада, что не сдалась на середине 💪 #обучение #вебразработка', image: 'https://placehold.co/600x400/f4a261/212121?text=Сертификат', likes: 89, comments: 23, shares: 15, time: '1 день назад', liked: false }, { id: 4, user: { name: 'Иван', avatar: 'https://placehold.co/40x40/264653/ffffff?text=I' }, content: 'Мой кот сегодня решил, что клавиатура - это его новое спальное место 🐱 Кто еще сталкивался с такой проблемой?', image: 'https://placehold.co/600x400/8ab17d/212121?text=Кот+на+клавиатуре', likes: 156, comments: 42, shares: 28, time: '2 дня назад', liked: true } ]; setPosts(mockPosts); }, []); const handlePostSubmit = (e) => { e.preventDefault(); if (newPost.trim()) { const post = { id: posts.length + 1, user: user, content: newPost, likes: 0, comments: 0, shares: 0, time: 'только что', liked: false }; setPosts([post, ...posts]); setNewPost(''); } }; const handleLike = (postId) => { setPosts(posts.map(post => post.id === postId ? { ...post, liked: !post.liked, likes: post.liked ? post.likes - 1 : post.likes + 1 } : post )); }; const handleComment = (postId) => { setPosts(posts.map(post => post.id === postId ? { ...post, comments: post.comments + 1 } : post )); }; const handleShare = (postId) => { setPosts(posts.map(post => post.id === postId ? { ...post, shares: post.shares + 1 } : post )); }; return (

{/* Header */}

RedNote

Главная Моя страница Друзья

{/* Left sidebar */}

{user.name}

Онлайн

Постов 24

Друзей 156

Подписчиков 892

Тренды

#осень2024

12.4K постов

#кофемания

8.7K постов

#вебразработка

5.2K постов

{/* Main content */}

{/* Create post */}

setNewPost(e.target.value)} placeholder="Что у вас нового?" className="w-full p-3 border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" rows="3" >

{/* Posts */} {posts.map(post => (

{post.user.name}

{post.time}

{post.content}

{post.image && (

)}

))}

{/* Right sidebar */}

Друзья онлайн

{[ { name: 'Анна', avatar: 'https://placehold.co/32x32/ff9f1c/ffffff?text=A' }, { name: 'Сергей', avatar: 'https://placehold.co/32x32/06d6a0/ffffff?text=S' }, { name: 'Ольга', avatar: 'https://placehold.co/32x32/118ab2/ffffff?text=O' }, { name: 'Никита', avatar: 'https://placehold.co/32x32/ef476f/ffffff?text=N' }, { name: 'Юлия', avatar: 'https://placehold.co/32x32/073b4c/ffffff?text=Y' } ].map((friend, index) => (

{friend.name}

))}

Рекомендуемые группы

Любители кофе ☕

15.3K участников

Веб-разработка 💻

8.7K участников

Путешествия 🌍

23.1K участников

); }; export default App;