79768111

Date: 2025-09-18 07:35:52
Score: 1
Natty:
Report link

import React, { useEffect, useState } from "react";

// Simple single-file Social Media app prototype // - Tailwind CSS assumed to be available in the host project // - Paste this component into a Vite/CRA React project and render <SocialApp /> in App.jsx

const samplePosts = [ { id: 1, author: "Mango Shak", avatarLetter: "M", time: "2025-09-18", text: "Hello world! This is my first post.", image: null, likes: 3, comments: [ { id: 1, author: "Ami", text: "Nice post!" }, ], }, ];

function useLocalStorage(key, initial) { const [state, setState] = useState(() => { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch (e) { return initial; } });

useEffect(() => { try { localStorage.setItem(key, JSON.stringify(state)); } catch (e) {} }, [key, state]);

return [state, setState]; }

export default function SocialApp() { const [posts, setPosts] = useLocalStorage("sm_posts", samplePosts); const [user, setUser] = useLocalStorage("sm_user", { name: "You", avatarLetter: "Y", });

const [newText, setNewText] = useState(""); const [newImage, setNewImage] = useState(""); const [query, setQuery] = useState(""); const [filter, setFilter] = useState("latest");

function addPost() { if (!newText.trim() && !newImage.trim()) return; const id = Date.now(); const post = { id, author: user.name, avatarLetter: user.avatarLetter || user.name.charAt(0).toUpperCase(), time: new Date().toISOString(), text: newText.trim(), image: newImage.trim() || null, likes: 0, comments: [], }; setPosts([post, ...posts]); setNewText(""); setNewImage(""); }

function toggleLike(postId) { setPosts( posts.map((p) => (p.id === postId ? { ...p, likes: p.likes + 1 } : p)) ); }

function addComment(postId, text) { if (!text.trim()) return; setPosts( posts.map((p) => p.id === postId ? { ...p, comments: [ ...p.comments, { id: Date.now(), author: user.name, text: text.trim() }, ], } : p ) ); }

function deletePost(postId) { setPosts(posts.filter((p) => p.id !== postId)); }

function updateProfile(name) { setUser({ ...user, name, avatarLetter: name.charAt(0).toUpperCase() }); }

const visiblePosts = posts .filter((p) => p.text.toLowerCase().includes(query.toLowerCase())) .sort((a, b) => { if (filter === "latest") return new Date(b.time) - new Date(a.time); if (filter === "oldest") return new Date(a.time) - new Date(b.time); return 0; });

return ( <div className="min-h-screen bg-gray-50 p-4 md:p-8"> <div className="max-w-4xl mx-auto"> {/* Header */} <header className="flex items-center justify-between mb-6"> <h1 className="text-2xl font-bold">Simple Social — Prototype</h1> <div className="flex items-center gap-3"> <div className="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-semibold">{user.avatarLetter}</div> <div className="text-sm text-gray-700">{user.name}</div> </div> </header>

{/* Composer */}

\<section className="bg-white p-4 rounded-2xl shadow mb-6"\>

  \<textarea

    value={newText}

    onChange={(e) =\> setNewText(e.target.value)}

    placeholder={\`What's on your mind, ${user.name}?\`}

    className="w-full border-0 focus:ring-0 resize-none text-sm"

    rows={3}

  /\>

  \<div className="mt-2 flex gap-2"\>

    \<input

      value={newImage}

      onChange={(e) =\> setNewImage(e.target.value)}

      placeholder="Image URL (optional)"

      className="flex-1 text-sm border rounded px-2 py-1"

    /\>

    \<button onClick={addPost} className="px-4 py-2 bg-indigo-600 text-white rounded"\>Post\</button\>

  \</div\>

  \<div className="mt-3 text-xs text-gray-500"\>Tip: paste an image URL or write a short post.\</div\>

\</section\>

{/\* Filters/Search \*/}

\<div className="flex gap-3 items-center mb-4"\>

  \<input

    value={query}

    onChange={(e) =\> setQuery(e.target.value)}

    placeholder="Search posts..."

    className="flex-1 border px-3 py-2 rounded"

  /\>

  \<select value={filter} onChange={(e) =\> setFilter(e.target.value)} className="border rounded px-2 py-2"\>

    \<option value="latest"\>Latest\</option\>

    \<option value="oldest"\>Oldest\</option\>

  \</select\>

  \<button

    onClick={() =\> {

      const name = prompt("Enter display name:", user.name) || user.name;

      updateProfile(name);

    }}

    className="px-3 py-2 border rounded"

  \>

    Edit Profile

  \</button\>

\</div\>

{/\* Posts \*/}

\<main className="space-y-4"\>

  {visiblePosts.length === 0 && (

    \<div className="text-center text-gray-500 py-8"\>No posts yet — be the first!\</div\>

  )}

  {visiblePosts.map((post) =\> (

    \<article key={post.id} className="bg-white p-4 rounded-2xl shadow"\>

      \<div className="flex gap-3"\>

        \<div className="w-12 h-12 rounded-full bg-indigo-600 text-white flex items-center justify-center font-semibold"\>{post.avatarLetter || post.author.charAt(0)}\</div\>

        \<div className="flex-1"\>

          \<div className="flex items-center justify-between"\>

            \<div\>

              \<div className="font-semibold"\>{post.author}\</div\>

              \<div className="text-xs text-gray-500"\>{new Date(post.time).toLocaleString()}\</div\>

            \</div\>

            \<div className="text-xs"\>

              \<button onClick={() =\> deletePost(post.id)} className="px-2 py-1 rounded hover:bg-gray-100"\>Delete\</button\>

            \</div\>

          \</div\>

          \<p className="mt-3 whitespace-pre-wrap"\>{post.text}\</p\>

          {post.image && (

            \<div className="mt-3"\>

              \<img src={post.image} alt="post" className="w-full max-h-64 object-cover rounded-lg" /\>

            \</div\>

          )}

          \<div className="mt-3 flex items-center gap-3 text-sm text-gray-600"\>

            \<button onClick={() =\> toggleLike(post.id)} className="px-2 py-1 rounded hover:bg-gray-100"\>👍 Like ({post.likes})\</button\>

            \<CommentBox post={post} onAddComment={(t) =\> addComment(post.id, t)} /\>

          \</div\>

          {post.comments.length \> 0 && (

            \<div className="mt-3 border-t pt-3"\>

              {post.comments.map((c) =\> (

                \<div key={c.id} className="text-sm mb-2"\>

                  \<span className="font-semibold"\>{c.author}\</span\>: {c.text}

                \</div\>

              ))}

            \</div\>

          )}

        \</div\>

      \</div\>

    \</article\>

  ))}

\</main\>

{/\* Footer / small profile settings \*/}

\<footer className="mt-8 text-center text-gray-500 text-xs"\>Prototype — data saved locally in your browser.\</footer\>

</div>

</div>

); }

function CommentBox({ post, onAddComment }) { const [open, setOpen] = useState(false); const [text, setText] = useState("");

return ( <div> <button onClick={() => setOpen((s) => !s)} className="px-2 py-1 rounded hover:bg-gray-100">💬 Comment</button> {open && ( <div className="mt-2 flex gap-2"> <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Write a comment..." className="flex-1 border rounded px-2 py-1 text-sm" /> <button onClicimport React, { useEffect, useState } from "react";

// Simple single-file Social Media app prototype // - Tailwind CSS assumed to be available in the host project // - Paste this component into a Vite/CRA React project and render <SocialApp /> in App.jsx

const samplePosts = [ { id: 1, author: "Mango Shak", avatarLetter: "M", time: "2025-09-18", text: "Hello world! This is my first post.", image: null, likes: 3, comments: [ { id: 1, author: "Ami", text: "Nice post!" }, ], }, ];

function useLocalStorage(key, initial) { const [state, setState] = useState(() => { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch (e) { return initial; } });

useEffect(() => { try { localStorage.setItem(key, JSON.stringify(state)); } catch (e) {} }, [key, state]);

return [state, setState]; }

export default function SocialApp() { const [posts, setPosts] = useLocalStorage("sm_posts", samplePosts); const [user, setUser] = useLocalStorage("sm_user", { name: "You", avatarLetter: "Y", });

const [newText, setNewText] = useState(""); const [newImage, setNewImage] = useState(""); const [query, setQuery] = useState(""); const [filter, setFilter] = useState("latest");

function addPost() { if (!newText.trim() && !newImage.trim()) return; const id = Date.now(); const post = { id, author: user.name, avatarLetter: user.avatarLetter || user.name.charAt(0).toUpperCase(), time: new Date().toISOString(), text: newText.trim(), image: newImage.trim() || null, likes: 0, comments: [], }; setPosts([post, ...posts]); setNewText(""); setNewImage(""); }

function toggleLike(postId) { setPosts( posts.map((p) => (p.id === postId ? { ...p, likes: p.likes + 1 } : p)) ); }

function addComment(postId, text) { if (!text.trim()) return; setPosts( posts.map((p) => p.id === postId ? { ...p, comments: [ ...p.comments, { id: Date.now(), author: user.name, text: text.trim() }, ], } : p ) ); }

function deletePost(postId) { setPosts(posts.filter((p) => p.id !== postId)); }

function updateProfile(name) { setUser({ ...user, name, avatarLetter: name.charAt(0).toUpperCase() }); }

const visiblePosts = posts .filter((p) => p.text.toLowerCase().includes(query.toLowerCase())) .sort((a, b) => { if (filter === "latest") return new Date(b.time) - new Date(a.time); if (filter === "oldest") return new Date(a.time) - new Date(b.time); return 0; });

return ( <div className="min-h-screen bg-gray-50 p-4 md:p-8"> <div className="max-w-4xl mx-auto"> {/* Header */} <header className="flex items-center justify-between mb-6"> <h1 className="text-2xl font-bold">Simple Social — Prototype</h1> <div className="flex items-center gap-3"> <div className="w-10 h-10 rounded-full bg-indigo-600 text-white flex items-center justify-center font-semibold">{user.avatarLetter}</div> <div className="text-sm text-gray-700">{user.name}</div> </div> </header>

{/* Composer */}

\<section className="bg-white p-4 rounded-2xl shadow mb-6"\>

  \<textarea

    value={newText}

    onChange={(e) =\> setNewText(e.target.value)}

    placeholder={\`What's on your mind, ${user.name}?\`}

    className="w-full border-0 focus:ring-0 resize-none text-sm"

    rows={3}

  /\>

  \<div className="mt-2 flex gap-2"\>

    \<input

      value={newImage}

      onChange={(e) =\> setNewImage(e.target.value)}

      placeholder="Image URL (optional)"

      className="flex-1 text-sm border rounded px-2 py-1"

    /\>

    \<button onClick={addPost} className="px-4 py-2 bg-indigo-600 text-white rounded"\>Post\</button\>

  \</div\>

  \<div className="mt-3 text-xs text-gray-500"\>Tip: paste an image URL or write a short post.\</div\>

\</section\>

{/\* Filters/Search \*/}

\<div className="flex gap-3 items-center mb-4"\>

  \<input

    value={query}

    onChange={(e) =\> setQuery(e.target.value)}

    placeholder="Search posts..."

    className="flex-1 border px-3 py-2 rounded"

  /\>

  \<select value={filter} onChange={(e) =\> setFilter(e.target.value)} className="border rounded px-2 py-2"\>

    \<option value="latest"\>Latest\</option\>

    \<option value="oldest"\>Oldest\</option\>

  \</select\>

  \<button

    onClick={() =\> {

      const name = prompt("Enter display name:", user.name) || user.name;

      updateProfile(name);

    }}

    className="px-3 py-2 border rounded"

  \>

    Edit Profile

  \</button\>

\</div\>

{/\* Posts \*/}

\<main className="space-y-4"\>

  {visiblePosts.length === 0 && (

    \<div className="text-center text-gray-500 py-8"\>No posts yet — be the first!\</div\>

  )}

  {visiblePosts.map((post) =\> (

    \<article key={post.id} className="bg-white p-4 rounded-2xl shadow"\>

      \<div className="flex gap-3"\>

        \<div className="w-12 h-12 rounded-full bg-indigo-600 text-white flex items-center justify-center font-semibold"\>{post.avatarLetter || post.author.charAt(0)}\</div\>

        \<div className="flex-1"\>

          \<div className="flex items-center justify-between"\>

            \<div\>

              \<div className="font-semibold"\>{post.author}\</div\>

              \<div className="text-xs text-gray-500"\>{new Date(post.time).toLocaleString()}\</div\>

            \</div\>

            \<div className="text-xs"\>

              \<button onClick={() =\> deletePost(post.id)} className="px-2 py-1 rounded hover:bg-gray-100"\>Delete\</button\>

            \</div\>

          \</div\>

          \<p className="mt-3 whitespace-pre-wrap"\>{post.text}\</p\>

          {post.image && (

            \<div className="mt-3"\>

              \<img src={post.image} alt="post" className="w-full max-h-64 object-cover rounded-lg" /\>

            \</div\>

          )}

          \<div className="mt-3 flex items-center gap-3 text-sm text-gray-600"\>

            \<button onClick={() =\> toggleLike(post.id)} className="px-2 py-1 rounded hover:bg-gray-100"\>👍 Like ({post.likes})\</button\>

            \<CommentBox post={post} onAddComment={(t) =\> addComment(post.id, t)} /\>

          \</div\>

          {post.comments.length \> 0 && (

            \<div className="mt-3 border-t pt-3"\>

              {post.comments.map((c) =\> (

                \<div key={c.id} className="text-sm mb-2"\>

                  \<span className="font-semibold"\>{c.author}\</span\>: {c.text}

                \</div\>

              ))}

            \</div\>

          )}

        \</div\>

      \</div\>

    \</article\>

  ))}

\</main\>

{/\* Footer / small profile settings \*/}

\<footer className="mt-8 text-center text-gray-500 text-xs"\>Prototype — data saved locally in your browser.\</footer\>

</div>

</div>

); }

function CommentBox({ post, onAddComment }) { const [open, setOpen] = useState(false); const [text, setText] = useState("");

return ( <div> <button onClick={() => setOpen((s) => !s)} className="px-2 py-1 rounded hover:bg-gray-100">💬 Comment</button> {open && ( <div className="mt-2 flex gap-2"> <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Write a comment..." className="flex-1 border rounded px-2 py-1 text-sm" /> <button onClick={() => { onAddComment(text); setText(""); }} className="px-3 py-1 border rounded text-sm" > Send </button> </div> )} </div> ); }

k={() => { onAddComment(text); setText(""); }} className="px-3 py-1 border rounded text-sm" > Send </button> </div> )} </div> ); }

Reasons:
  • Contains signature (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Contains question mark (0.5):
  • Low reputation (1):
Posted by: Mango shak