Complete Accordion Project

Author: DevHanza

10. Accordions/src/Accordion.jsx

@@ -1,11 +1,20 @@
-import React from 'react'
+import React, { useState } from "react";
+
+const Accordion = ({ title, content }) => {
+  const [isActive, setIsActive] = useState(false);
 
-function Accordion() {
   return (
-    <div>
-      Accordion
-    </div>
-  )
+    <section className="accordion-card" key={Math.random()}>
+      <div className="header" onClick={() => setIsActive(!isActive)}>
+        <div>{ title }</div>
+        <p className="icon">{isActive ? "-" : "+"}</p>
+      </div>
+
+      <div className="content">
+        {isActive && <p className="card-info">{content}</p>}
+      </div>
+    </section>
+  );
 }
 
-export default Accordion
+export default Accordion;

10. Accordions/src/App.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import Accordion from "./Accordion";
-
+import { accordionData } from "./utils/content";
 
 function App() {
   return (
-    <div>
-      <Accordion/>
+    <div className="accordion">
+      {accordionData.map(({ title, content }) => {
+       return <Accordion title={title} content={content} />;
+      })}
     </div>
   );
 }

10. Accordions/src/index.css

@@ -0,0 +1,49 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: rgb(36, 36, 36);
+  color: #fff;
+  font-family: sans-serif;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  border: 2px solid white;
+}
+
+.accordion-card {
+  margin: 20px;
+  padding: 20px;
+  background: rgb(73, 73, 73);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  width: 40rem;
+}
+
+.card-title {
+  display: flex;
+  justify-content: space-between;
+  width: 50rem;
+}
+
+.icon {
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+p.card-info {
+  width: 30rem;
+  padding: 20px 0;
+  line-height: 1.3;
+}