import React, { useState } from "react";
import Input from "./Input";
import PostDisplay from "./PostDisplay";

function Home() {
  const [posts, setPosts] = useState([]);
  const handleCreatePost = (title, description) => {
    const newPost = { title, description };
    setPosts([...posts, newPost]);
  };

  const handleDeletePost = (index) => {
    const updatedPosts = posts.filter((_, i) => i !== index);
    setPosts(updatedPosts);
  };

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input onCreatePost={handleCreatePost} />
      </div>
      <div className="posts-section">
        <PostDisplay posts={posts} onDeletePost={handleDeletePost} />
      </div>
    </div>
  );
}

export default Home;

import React, { useState } from "react";

function Input({ onCreatePost }) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = () => {
    if (title && description) {
      onCreatePost(title, description);
      setTitle('');
      setDescription('');
    }
  };

  return (
    <div className="layout-column justify-content-center align-items-center">
      <input
        className="w-100"
        type="text"
        placeholder="Enter Title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        data-testid="title-input"
      />
      <textarea
        className="mt-10 w-100"
        placeholder="Enter Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        data-testid="description-input"
      />
      <button data-testid="create-button" onClick={handleSubmit} className="mt-10">
        Create Post
      </button>
    </div>
  );
}

export default Input;

import React from "react";

function PostDisplay({ posts, onDeletePost }) {
  return (
    <div data-testid="posts-container" className="flex wrap gap-10">
      {posts.map((post, index) => {
        return (
          <div key={index} className="post-box">
            <h3>{post.title}</h3>
            <p>{post.description}</p>
            <button onClick={() => onDeletePost(index)}>Delete</button>
          </div>
        )
      })}
    </div>
  );
}

export default PostDisplay;