From 2e1ee5b877d46e27535993732ed23605c45c5454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lovre=20Tomi=C4=87?= <tomiclovre05@gmail.com>
Date: Fri, 7 Feb 2025 19:01:27 +0100
Subject: [PATCH] added toggle button

---
 .../SchedulePage/SchedulePage.module.scss     | 13 ++++++++++++
 .../src/pages/SchedulePage/SchedulePage.tsx   | 20 +++++++++++++------
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/pages/SchedulePage/SchedulePage.module.scss b/apps/app/src/pages/SchedulePage/SchedulePage.module.scss
index 3c51f43c..0f94267f 100644
--- a/apps/app/src/pages/SchedulePage/SchedulePage.module.scss
+++ b/apps/app/src/pages/SchedulePage/SchedulePage.module.scss
@@ -46,6 +46,19 @@
       margin-bottom: 32px;
     }
 
+    .toggleWrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      margin-bottom: 33px;
+
+      & > p {
+        @include paragraph-16;
+        color: $primary-black;
+      }
+    }
+
     .eventsWrapper {
       display: flex;
       flex-direction: column;
diff --git a/apps/app/src/pages/SchedulePage/SchedulePage.tsx b/apps/app/src/pages/SchedulePage/SchedulePage.tsx
index 4ebb5d90..bd27e58a 100644
--- a/apps/app/src/pages/SchedulePage/SchedulePage.tsx
+++ b/apps/app/src/pages/SchedulePage/SchedulePage.tsx
@@ -8,6 +8,7 @@ import clsx from 'clsx';
 import { EventWithSpeakerDto } from '@ddays-app/types';
 import { events } from './events';
 import ScheduleCard from '../../components/ScheduleCard';
+import ToggleButton from '../../components/ToggleButton';
 
 enum TabId {
   FIRST_DAY = 'first-day',
@@ -29,6 +30,7 @@ export const SchedulePage = () => {
   const [filteredEvents, setFilteredEvents] = useState<EventWithSpeakerDto[]>(
     [],
   );
+  const [calendarSyncToggled, setCalendarSyncToggled] = useState(false); // BE: postavit na vrijednost iz baze
 
   useEffect(() => {
     const dateFilter = new Date(
@@ -71,13 +73,19 @@ export const SchedulePage = () => {
           <ClickableTag id={TagId.MARKETING}>Marketing</ClickableTag>
         </ClickableTagGroup>
 
-        <section className={clsx(c.eventsWrapper, c.contentWidth)}>
-          {filteredEvents.map((event) => (
-            <ScheduleCard
-              clickHandler={() => {}}
-              key={event.id}
-              event={event}
+        {activeTab === TabId.MY_SCHEDULE && (
+          <div className={c.toggleWrapper}>
+            <ToggleButton
+              toggled={calendarSyncToggled}
+              onClick={() => setCalendarSyncToggled((prev) => !prev)}
             />
+            <p>Poveži s mojim kalendarom</p>
+          </div>
+        )}
+
+        <section className={clsx(c.eventsWrapper, c.contentWidth)}>
+          {filteredEvents.map((event, i) => (
+            <ScheduleCard clickHandler={() => {}} key={i} event={event} />
           ))}
 
           {filteredEvents.length === 0 && (