Feature/f 39 implement generic accordion component (#12)

* feat: implement accordion and card component

* rename icons and refactor code

* Fix: remove css files, remove unused import

* fix(accordion/card): accordion/card function name, adjust overflow of content, adjust operations

* fix(accordion/card): adjust color scheme of accordion and card

* fix(lint): adjust lint errors

* fix(tailwind): instead of custom css use tailwind

* fix(color): fix color for accordion/card

* fix(accordion/card): fix overflow text style

* fix(accordion): fix overflow in accordion content

* fix(accordion): fix accordion's title alignment

* feat(accordion): add accordion call in page.tsx

---------

Co-authored-by: Armanpreet Ghotra <[email protected]>
Co-authored-by: Bohdan Garchu <[email protected]>

package.json

@@ -13,6 +13,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@nextui-org/accordion": "^2.0.40",
     "@nextui-org/button": "^2.0.38",
     "@nextui-org/card": "^2.0.34",
     "@nextui-org/chip": "^2.0.33",

src/app/elements/page.tsx

@@ -1,7 +1,9 @@
+import CustomAccordion from '@/components/Accordions/Accordion';
 import { CustomButton } from '@/components/Buttons/CustomButton';
 import { Chart } from '@/components/Charts/Chart';
 import container from '@/container';
 import CountryRepository from '@/domain/repositories/CountryRepository';
+import AccordionsOperations from '@/operations/accordions/AccordionOperations';
 
 /**
  * You can use this page to try and show off your components.
@@ -14,6 +16,7 @@ export default async function Elements() {
       <Chart chartData={countryData.fcsGraph} />;<CustomButton variant="solid">Test</CustomButton>
       <CustomButton variant="bordered">Test</CustomButton>
       <CustomButton variant="flat">Test</CustomButton>
+      <CustomAccordion items={AccordionsOperations.getAccordionData()} />;
     </div>
   );
 }

src/components/Accordions/Accordion.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Accordion, AccordionItem } from '@nextui-org/accordion';
+
+import { AccordionsProps } from '@/domain/props/AccordionProps';
+
+export default function CustomAccordion({ items }: AccordionsProps) {
+  return (
+    <div className="w-full flex justify-start items-start max-w-[600px] overflow-visible overflow-x-auto p-2 rounded-lg">
+      <Accordion variant="splitted">
+        {items.map((item) => (
+          <AccordionItem
+            key={item.title}
+            aria-label={item.title}
+            className="last:border-b-[none] dark:bg-black white:bg-white overflow-x-auto"
+            title={
+              <div className="flex justify-between items-center w-full">
+                <span>{item.title}</span>
+                {item.iconSrc && <img src={item.iconSrc} alt="info icon" className="w-[37px] h-[37px] p-[5.5px]" />}
+              </div>
+            }
+          >
+            {typeof item.content === 'string' ? (
+              <div className="p-4 break-words text-balance">{item.content}</div>
+            ) : (
+              item.content
+            )}
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

src/components/Cards/Card.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Card, CardBody, CardHeader, Image } from '@nextui-org/react';
+
+import { CardProps } from '@/domain/props/CardProps';
+
+export default function CustomCard({ title, content }: CardProps) {
+  return (
+    <Card className="w-fit h-auto min-w-[210px] justify-evenly m-2.5 dark:primary white:bg-white">
+      <CardHeader className="flex flex-col items-center p-[5px] overflow-visible">
+        <h2 className="text-large break-words text-pretty"> {title} </h2>
+      </CardHeader>
+      <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
+        <div className="flex flex-row gap-6 overflow-y-auto">
+          {content.map((item) => (
+            <div key={item.text} className="flex flex-col gap-[3px] items-center">
+              <div className="imageWrapper">
+                <Image alt={item.altText} className="w-[102px] h-[75px]" src={item.imageSrc} />
+              </div>
+              <h1 className="text-base text-center mt-2">{item.text}</h1>
+              {item.timeText && <h1 className="text-xs text-[#888888] text-center break-words">{item.timeText}</h1>}
+            </div>
+          ))}
+        </div>
+      </CardBody>
+    </Card>
+  );
+}

src/domain/entities/accordions/Accordions.ts

@@ -0,0 +1,5 @@
+export interface AccordionItemProps {
+  title: string;
+  iconSrc?: string;
+  content: React.ReactNode | string;
+}

src/domain/entities/cards/Cards.ts

@@ -0,0 +1,6 @@
+export interface CardContent {
+  imageSrc: string;
+  text: string;
+  timeText?: string;
+  altText: string;
+}

src/domain/props/AccordionProps.tsx

@@ -0,0 +1,5 @@
+import { AccordionItemProps } from '../entities/accordions/Accordions';
+
+export interface AccordionsProps {
+  items: AccordionItemProps[];
+}

src/domain/props/CardProps.tsx

@@ -0,0 +1,6 @@
+import { CardContent } from '../entities/cards/Cards';
+
+export interface CardProps {
+  title: string;
+  content: CardContent[];
+}