feat: add icons for the accordion

brolag · Aug 7, 2024 · e97bb73 · e97bb73
1 parent df30a09
commit e97bb73
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/nextjs/components/ui/AccourdionItem.tsx b/packages/nextjs/components/ui/AccourdionItem.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ReactElement, useState } from "react";
+import Image from "next/image";
 
 type AccordionItemProps = {
   title: string;
@@ -16,8 +17,15 @@ const AccordionItem = ({ title, content }: AccordionItemProps) => {
 
   return (
     <div className="my-2 border border-gray-700 rounded-lg">
-      <div className="p-4 cursor-pointer bg-gray-800 text-white rounded-t-lg" onClick={toggleAccordion}>
-        {title}
+      <div
+        className="p-4 cursor-pointer bg-gray-800 text-white rounded-t-lg flex items-center justify-between"
+        onClick={toggleAccordion}
+      >
+        <div className="flex items-center">
+          <Image src="/images/empty_star.png" alt="Star" width={16} height={16} className="mr-2" />
+          {title}
+        </div>
+        <div>{isOpen ? "▼" : "▶"}</div>
       </div>
       {isOpen && <div className="p-4 bg-gray-900 text-white rounded-b-lg">{content}</div>}
     </div>

diff --git a/packages/nextjs/public/images/empty_star.png b/packages/nextjs/public/images/empty_star.png