added toggle button

dump-hr · Feb 7, 2025 · 2e1ee5b · 2e1ee5b
1 parent ddf3bb1
commit 2e1ee5b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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 && (