created a tour project using context Api

01-birthday-reminder/setup/src/App.js

@@ -1,8 +1,27 @@
-import React, { useState } from 'react';
-import data from './data';
-import List from './List';
+import React, { useState } from "react";
+import data from "./data";
+import List from "./List";
 function App() {
-  return <h2>reminder project setup</h2>;
+  const [check, setcheck] = useState(false);
+  const [people, setpeople] = useState(data);
+  if (people.length === 0) {
+    return (
+      <main>
+        <section className="container">
+          <button onClick={() => setpeople(data)}>restore</button>
+        </section>
+      </main>
+    );
+  }
+  return (
+    <main>
+      <section className="container">
+        <h3>{people.length} birthdays today</h3>
+        <List people={people} />
+        <button onClick={() => setpeople([])}>clear all </button>
+      </section>
+    </main>
+  );
 }
 
 export default App;

01-birthday-reminder/setup/src/List.js

@@ -1,9 +1,20 @@
-import React from 'react';
+import React from "react";
 
-const List = () => {
+const List = ({ people }) => {
   return (
     <>
-      <h2>list component</h2>
+      {people.map((person) => {
+        const { id, name, age, image } = person;
+        return (
+          <article key={id} className="person">
+            <img src={image} alt="" />
+            <div>
+              <p>{name}</p>
+              <p>{age}</p>
+            </div>
+          </article>
+        );
+      })}
     </>
   );
 };

01-birthday-reminder/setup/src/index.css

@@ -57,8 +57,8 @@ Global Styles
   box-sizing: border-box;
 }
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   background: var(--clr-pink);
   color: var(--clr-grey-9);
   line-height: 1.5;
@@ -141,8 +141,8 @@ main {
 }
 
 .container {
-  width: 90vw;
-  margin: 5rem 0;
+  width: 100%;
+  margin: 0 auto;
   max-width: var(--fixed-width);
   background: var(--clr-white);
   border-radius: var(--radius);

01-birthday-reminder/setup/src/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );