//App.js

import "./App.css";
import { Container, Row, Col, Card } from "react-bootstrap";
import { Post } from "./Post";

function App() {
    return (
        <div className="App">
            <Container fluid>
                <Container>
                    <Row>
                        {Post.map((v, i) => {
                            return <Cardd pitems={v} key={i} />;
                        })}
                    </Row>
                </Container>
            </Container>
        </div>
    );
}

export default App;

function Cardd({ pitems }) {
    if (!pitems) {
        return null;
    }
    return (
        <div className="col-sm-3 my-3">
            <Col>
                <Card style={{ width: "18rem", height: "15rem"}}>
                    <Card.Body>
                        <Card.Title>{pitems.name}</Card.Title>
                        <Card.Subtitle className="mb-2 text-muted">
                            {pitems.email}
                        </Card.Subtitle>
                        <Card.Text>{pitems.body}</Card.Text>
                        <Card.Link>{pitems.Product}</Card.Link>
                    </Card.Body>
                </Card>
            </Col>
        </div>
    );
}

//Post.js

export let Post = [
    {
        postId: 1,
        id: 1,
        name: "ReactJS",
        email: "[email protected]",
        body: `React is one of the most popular JavaScript 
               libraries for building dynamic user interfaces.
               Whether you are a beginner or an experienced 
               developer, React Tutorial will significantly enhance
               your development skills.`,
    },
    {
        postId: 2,
        id: 2,
        name: "AngularJS",
        email: "[email protected]",
        body: `Angular is a popular open-source Typescript 
               framework created by Google for developing web 
               applications. Front-end developers use 
               frameworks like Angular or React to present
               and manipulate data efficiently and dynamically.`,
    },
    {
        postId: 3,
        id: 3,
        name: "NodeJS",
        email: "[email protected]",
        body: `NodeJS is a JavaScript-based server-side
               runtime environment. It is developed by
               Ryan Dahi in the year 2009 and v20.9 is the
               latest version of Node.js.`,
    },
    {
        postId: 4,
        id: 4,
        name: "ExpressJS",
        email: "[email protected]",
        body: "Express makes the development of
               Node application very easy and it is very
               simple to use.It provides a simple and
               efficient way to build web applications 
               and APIs using JavaScript.`,
    },
    {
        postId: 5,
        id: 1,
        name: "MongoDB",
        email: "[email protected]",
        body: `MongoDB, the most popular NoSQL database,
               is an open-source document-oriented database. 
               The term ‘NoSQL’ means ‘non-relational’.`,
    },
    {
        postId: 6,
        id: 2,
        name: "Mongoose",
        email: "[email protected]",
        body: `Mongoose is an Object Data Modeling (ODM) 
               library for MongoDB. MongoDB is a NoSQL database
               and Mongoose is used to interact with MongoDB 
               by providing a schema-based solution.`,
    },
];