ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Month cal changes

Browse Source
This commit is contained in:
Milan Paunovic
2025-01-23 02:16:07 +01:00
parent 231e99ff8f
commit 580104d052
8 changed files with 597 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
components/pages/calendar/CalendarViewSwitch.tsx
View File

@ -1,92 +1,94 @@
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { isFamilyViewAtom } from "@/components/pages/calendar/atoms";
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import React, {useState, useCallback} from "react";
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";
const CalendarViewSwitch = () => {
const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);
const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);
const [localState, setLocalState] = useState(isFamilyView);
return (
<View
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
// iOS shadow
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
// Android shadow (elevation)
elevation: 6,
}}
centerV
>
<TouchableOpacity
onPress={() => {
setIsFamilyView(true);
}}
>
<View
centerV
centerH
height={40}
paddingH-15
style={isFamilyView ? styles.switchBtnActive : styles.switchBtn}
>
<Text
color={isFamilyView ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
Family View
</Text>
</View>
</TouchableOpacity>
const handleViewChange = useCallback((newValue: boolean) => {
setLocalState(newValue);
setTimeout(() => {
setIsFamilyView(newValue);
}, 150);
}, [setIsFamilyView]);
<TouchableOpacity
onPress={() => {
setIsFamilyView(false);
}}
>
return (
<View
centerV
centerH
height={40}
paddingH-15
style={!isFamilyView ? styles.switchBtnActive : styles.switchBtn}
row
spread
style={{
position: "absolute",
bottom: 20,
left: 20,
borderRadius: 30,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center",
shadowColor: "#000",
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 6,
}}
centerV
>
<Text
color={!isFamilyView ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
My View
</Text>
<TouchableOpacity
onPress={() => handleViewChange(true)}
>
<View
centerV
centerH
height={40}
paddingH-15
style={localState ? styles.switchBtnActive : styles.switchBtn}
>
<Text
color={localState ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
Family View
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleViewChange(false)}
>
<View
centerV
centerH
height={40}
paddingH-15
style={!localState ? styles.switchBtnActive : styles.switchBtn}
>
<Text
color={!localState ? "white" : "#a1a1a1"}
style={styles.switchTxt}
>
My View
</Text>
</View>
</TouchableOpacity>
</View>
</TouchableOpacity>
</View>
);
);
};
export default CalendarViewSwitch;
const styles = StyleSheet.create({
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
switchTxt: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
});
switchBtnActive: {
backgroundColor: "#a1a1a1",
borderRadius: 50,
},
switchBtn: {
backgroundColor: "white",
borderRadius: 50,
},
switchTxt: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
});