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


function Home() {
  const [blogData, setBlogData] = useState([])
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  console.log("blogData", blogData)

  const saveBlog = () => {
    let num = Math.random();
    if (title?.trim() && description?.trim()) {
      setBlogData((prev) => [...prev, { id: num, title, description }])
      setTitle("")
      setDescription("")
    }
  }

   const handleDelete = (id) => {
    const filtedData = blogData?.filter((blog) => blog?.id !== id)
    setBlogData(filtedData)
  }

  return (
    <div className="text-center ma-20">
      <div className="mb-20">
        <Input title={title} description={description} setTitle={setTitle} setDescription={setDescription} />
        <button data-testid="create-button" className="mt-10" onClick={saveBlog}>
          Create Post
        </button>
      </div>
       <div className="posts-section">
        <div data-testid="posts-container" className="flex wrap gap-10">
        <PostDisplay blogData={blogData} handleDelete={handleDelete} />
        </div>
      </div>
    </div>
  );
}
export default Home

Input Component:
import React, { useState } from "react";

function Input({title, description, setTitle, setDescription}) {

  const handleChange = (e) => {
   if(e.target.name === "title"){
    setTitle(e.target.value)
   }else{
    setDescription(e.target.value)
   }

  }

  return (
    <div className="layout-column justify-content-center align-items-center">
      <input className="w-100" type="text" name="title" placeholder="Enter Title" value={title} onChange={handleChange} data-testid="title-input" />
      <textarea className="mt-10 w-100" name="description" placeholder="Enter Description" value={description} onChange={handleChange} data-testid="description-input" />
    </div>
  );
}

export default Input;

Post Display Component:
import React from "react";

function PostDisplay({ blogData, handleDelete }) {

  return (
    <>
      {blogData?.length !== 0 && blogData?.map((blog) => {
        return <div className="post-box" key={blog?.id}>
          <h3>{blog?.title}</h3>
          <p>{blog?.description}</p>
          <button onClick={() => { handleDelete(blog?.id) }}>Delete</button>
        </div>
      })}
    </>
  );
}

export default PostDisplay;

;