ui tweaks

app/(auth)/calendar/index.tsx

@@ -1,125 +1,159 @@
-import React, {useRef, useState} from "react";
-import {LayoutChangeEvent} from "react-native";
-import {Calendar} from "react-native-big-calendar";
-import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
-import {MaterialIcons} from "@expo/vector-icons";
-import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
+import React, { useRef, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import { Calendar } from "react-native-big-calendar";
+import {
+  Button,
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { MaterialIcons } from "@expo/vector-icons";
+import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
 import { useAuthContext } from "@/contexts/AuthContext";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
 
 const modeMap = new Map([
-    [0, "day"],
-    [1, "week"],
-    [2, "month"]
+  [0, "day"],
+  [1, "week"],
+  [2, "month"],
 ]);
 
 const months = [
-    "January", "February", "March", "April", "May", "June",
-    "July", "August", "September", "October", "November", "December"
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 export default function Screen() {
-    const { profileData } = useAuthContext();
-    const [calendarHeight, setCalendarHeight] = useState(0);
-    const [mode, setMode] = useState<"week" | "month" | "day">("week");
-    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const { profileData } = useAuthContext();
+  const [calendarHeight, setCalendarHeight] = useState(0);
+  const [mode, setMode] = useState<"week" | "month" | "day">("week");
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 
-    const calendarContainerRef = useRef(null);
-    const { data: events} = useGetEvents()
+  const calendarContainerRef = useRef(null);
+  const { data: events } = useGetEvents();
 
-    const onLayout = (event: LayoutChangeEvent) => {
-        const {height} = event.nativeEvent.layout;
-        setCalendarHeight(height);
-    };
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setCalendarHeight(height);
+  };
 
-    const handleSegmentChange = (index: number) => {
-        const selectedMode = modeMap.get(index);
-        if (selectedMode) {
-            setMode(selectedMode as "week" | "month" | "day");
-        }
-    };
+  const handleSegmentChange = (index: number) => {
+    const selectedMode = modeMap.get(index);
+    if (selectedMode) {
+      setMode(selectedMode as "week" | "month" | "day");
+    }
+  };
 
-    const handleMonthChange = (month: string) => {
-        const currentYear = selectedDate.getFullYear();
-        const currentDay = selectedDate.getDate();
-        const newMonthIndex = months.indexOf(month);
+  const handleMonthChange = (month: string) => {
+    const currentYear = selectedDate.getFullYear();
+    const currentDay = selectedDate.getDate();
+    const newMonthIndex = months.indexOf(month);
 
-        // Update the date with the new month while preserving the day and year
-        const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
-        setSelectedDate(updatedDate);
-    };
+    // Update the date with the new month while preserving the day and year
+    const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
+    setSelectedDate(updatedDate);
+  };
 
-    console.log(events)
+  console.log(events);
 
-    return (
-        <View style={{flex: 1, height: "100%", padding: 10}}>
-            <View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
-                <Text>Welcome {profileData?.firstName}</Text>
-                <Text>Let's get your week started!</Text>
-            </View>
+  return (
+    <View style={{ flex: 1, height: "100%", padding: 10 }}>
+      <HeaderTemplate
+        message={"Let's get your week started!"}
+        isWelcome={true}
+      />
 
-            <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
-                ref={calendarContainerRef}
-                onLayout={onLayout}
-            >
-                <View style={{
-                    flexDirection: "row",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    paddingHorizontal: 10,
-                    paddingVertical: 8,
-                    borderRadius: 20,
-                    borderBottomLeftRadius: 0,
-                    borderBottomRightRadius: 0,
-                    backgroundColor: "#f9f9f9",
-                    marginBottom: 10,
-                    shadowColor: "#000",
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 5,
-                    elevation: 3,
-                }}>
-                    <Picker
-                        value={months[selectedDate.getMonth()]} // Get the month from the date
-                        placeholder={"Select Month"}
-                        mode={PickerModes.SINGLE}
-                        onChange={(itemValue) => handleMonthChange(itemValue as string)}
-                        trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
-                    >
-                        {months.map((month) => (
-                            <Picker.Item key={month} label={month} value={month}/>
-                        ))}
-                    </Picker>
+      <View
+        style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
+        ref={calendarContainerRef}
+        onLayout={onLayout}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: 10,
+            paddingVertical: 8,
+            borderRadius: 20,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            backgroundColor: "white",
+            marginBottom: 10,
+          }}
+        >
+          <Picker
+            value={months[selectedDate.getMonth()]} // Get the month from the date
+            placeholder={"Select Month"}
+            mode={PickerModes.SINGLE}
+            onChange={(itemValue) => handleMonthChange(itemValue as string)}
+            trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
+          >
+            {months.map((month) => (
+              <Picker.Item key={month} label={month} value={month} />
+            ))}
+          </Picker>
 
-                    <View>
-                    <SegmentedControl
-                        segments={[
-                            {label: "D"},
-                            {label: "W"},
-                            {label: "M"}
-                        ]}
-                        onChangeIndex={handleSegmentChange}
-                        initialIndex={[...modeMap.entries()].find(([_, value]) => value === mode)?.[0] || 1}
-                    />
-                    </View>
-                </View>
-
-                {calendarHeight > 0 && (
-                    <Calendar
-                        mode={mode}
-                        events={events ?? []}
-                        height={calendarHeight}
-                        activeDate={selectedDate}
-                        onSwipeEnd={(newDate) => {
-                            console.log(newDate)
-                            setSelectedDate(newDate);
-                        }}
-                    />
-                )}
-            </View>
-
-            <AddEventDialog/>
+          <View>
+            <SegmentedControl
+              segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
+              backgroundColor="#ececec"
+              inactiveColor="#919191"
+              activeBackgroundColor="#ea156c"
+              activeColor="white"
+              outlineColor="white"
+              outlineWidth={3}
+              style={{ backgroundColor: "green" }}
+              segmentLabelStyle={styles.segmentslblStyle}
+              onChangeIndex={handleSegmentChange}
+              initialIndex={
+                [...modeMap.entries()].find(
+                  ([_, value]) => value === mode
+                )?.[0] || 1
+              }
+            />
+          </View>
         </View>
-    );
+
+        {calendarHeight > 0 && (
+          <Calendar
+          bodyContainerStyle={styles.calHeader}
+            mode={mode}
+            events={events ?? []}
+            height={calendarHeight}
+            activeDate={selectedDate}
+            onSwipeEnd={(newDate) => {
+              console.log(newDate);
+              setSelectedDate(newDate);
+            }}
+          />
+        )}
+      </View>
+        <CalendarViewSwitch />
+      <AddEventDialog />
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  segmentslblStyle: {
+    fontSize: 14,
+  },
+  calHeader: {
+    borderWidth: 0
+  },
+});