feat(plays): add accordion to play project. (#1445)

* feat(plays):add accordian to play project

* feat(plays): add accordion to play project. #1445(changes done)

---------

Co-authored-by: Priyankar Pal <[email protected]>

src/plays/accordian/Accordian.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import PlayHeader from 'common/playlists/PlayHeader';
+import AccordionData from './AccordianData';
+import './styles.css';
+import { accordionData } from './data';
+
+// WARNING: Do not change the entry componenet name
+function Accordian(props) {
+ const [activeAccordion, setActiveAccordion] = useState(null);
+ const handleAccordionClick = (index) => {
+ setActiveAccordion(index === activeAccordion ? null : index);
+ };
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div className="accordion">
+ {accordionData.map(({ title, content }, index) => (
+ <AccordionData
+ content={content}
+ isActive={index === activeAccordion}
+ key={index}
+ title={title}
+ onClick={() => handleAccordionClick(index)}
+ />
+ ))}
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default Accordian;

src/plays/accordian/AccordianData.jsx

@@ -0,0 +1,13 @@
+function AccordionData({ title, content, isActive, onClick }) {
+ return (
+ <div className="accordion-item">
+ <div className="accordion-title" onClick={onClick}>
+ <div>{title}</div>
+ <div>{isActive ? '-' : '+'}</div>
+ </div>
+ {isActive && <div className="accordion-content">{content}</div>}
+ </div>
+ );
+}
+
+export default AccordionData;

src/plays/accordian/Readme.md

@@ -0,0 +1,14 @@
+# Accordian
+
+When you click on a section, it opens up to show more details, and when you click again, it closes to keep things tidy and prevent information overload.
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: clavy123
+- Gihub Link: https://github.com/clavy123
+

src/plays/accordian/data.js

@@ -0,0 +1,36 @@
+export const accordionData = [
+ {
+ title: 'Section 1',
+ content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
+ laborum cupiditate possimus labore, hic temporibus velit dicta earum
+ suscipit commodi eum enim atque at? Et perspiciatis dolore iure
+ voluptatem.`
+ },
+ {
+ title: 'Section 2',
+ content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
+ reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
+ quaerat iure quos dolorum accusantium ducimus in illum vero commodi
+ pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
+ quidem maiores doloremque est numquam praesentium eos voluptatem amet!
+ Repudiandae, mollitia id reprehenderit a ab odit!`
+ },
+ {
+ title: 'Section 3',
+ content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
+ quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
+ dolor ut sequi minus iste? Quas?`
+ },
+ {
+ title: 'Section 4',
+ content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
+ quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
+ dolor ut sequi minus iste? Quas?`
+ },
+ {
+ title: 'Section 5',
+ content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
+ quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
+ dolor ut sequi minus iste? Quas?`
+ }
+];

src/plays/accordian/styles.css

@@ -0,0 +1,37 @@
+.accordion {
+ max-width: 600px;
+ margin: 2rem auto;
+ }
+
+ .accordion-item {
+ border: 1px solid #ccc;
+ border-radius: 0.5rem;
+ margin-bottom: 1rem;
+ overflow: hidden;
+ }
+
+ .accordion-title {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ background-color: #f0f0f0;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .accordion-title:hover {
+ background-color: #e0e0e0;
+ }
+
+ .accordion-content {
+ padding: 1rem;
+ background-color: #ffffff;
+ }
+
+ @media screen and (max-width: 768px) {
+ .accordion {
+ width: 90%;
+ }
+ }
+