From ed1e309a3542fa2c9594888c4ca83fa1c33faf0b Mon Sep 17 00:00:00 2001
From: faisolavolut <faisol@avolut.com>
Date: Tue, 25 Feb 2025 09:24:20 +0700
Subject: [PATCH] feat: add dynamic background color support for event items in
 CalenderGoogle

---
 components/ui/CalenderGoogle.tsx | 48 ++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/components/ui/CalenderGoogle.tsx b/components/ui/CalenderGoogle.tsx
index d5587b8..14dbc02 100644
--- a/components/ui/CalenderGoogle.tsx
+++ b/components/ui/CalenderGoogle.tsx
@@ -29,6 +29,7 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
     end: new Date(),
     allDay: true,
     color: "#2196f3",
+    backgroundColor: "#2196f3",
     extendedProps: {
       id: 1,
       pic: [
@@ -104,7 +105,16 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
             <div className="w-full  flex flex-col flex-grow bg-white overflow-hidden ">
               <div className=" py-4 px-0 rounded-lg  max-w-sm">
                 <div className="flex items-center gap-2">
-                  <div className="w-[15px] h-[15px] bg-red-500 rounded-md"></div>
+                  <div
+                    className={cx(
+                      "w-[15px] h-[15px] rounded-md",
+                      detailDialog?.backgroundColor
+                        ? css`
+                            background-color: ${detailDialog?.backgroundColor};
+                          `
+                        : "bg-primary"
+                    )}
+                  ></div>
                   <h2 className="text-lg font-semibold">
                     {detailDialog.title || "No title"}
                   </h2>
@@ -249,19 +259,29 @@ export const CalenderGoogle: FC<{ events: any[] }> = ({ events }) => {
                   </div>
                   <div className="flex flex-col">
                     <div className="flex flex-col gap-y-1">
-                      {listMore.map((evt, idx) => (
-                        <div
-                          key={idx}
-                          className="bg-red-500 text-sm px-2 rounded-md text-white cursor-pointer"
-                          onClick={() => {
-                            setDetailDialog(evt);
-                            setShowDialog(true);
-                            setCanClose(false);
-                          }}
-                        >
-                          {evt?.title}
-                        </div>
-                      ))}
+                      {listMore.map((evt, idx) => {
+                        console.log(evt);
+                        return (
+                          <div
+                            key={idx}
+                            className={cx(
+                              ` text-sm px-2 rounded-md text-white cursor-pointer`,
+                              evt?.backgroundColor
+                                ? css`
+                                    background-color: ${evt?.backgroundColor};
+                                  `
+                                : "bg-primary"
+                            )}
+                            onClick={() => {
+                              setDetailDialog(evt);
+                              setShowDialog(true);
+                              setCanClose(false);
+                            }}
+                          >
+                            {evt?.title}
+                          </div>
+                        );
+                      })}
                     </div>
                   </div>