mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 07:07:16 +00:00
94 lines
2.8 KiB
TypeScript
94 lines
2.8 KiB
TypeScript
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 [localState, setLocalState] = useState(isFamilyView);
|
|
|
|
const handleViewChange = useCallback((newValue: boolean) => {
|
|
setLocalState(newValue);
|
|
setTimeout(() => {
|
|
setIsFamilyView(newValue);
|
|
}, 150);
|
|
}, [setIsFamilyView]);
|
|
|
|
return (
|
|
<View
|
|
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
|
|
>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default CalendarViewSwitch;
|
|
|
|
const styles = StyleSheet.create({
|
|
switchBtnActive: {
|
|
backgroundColor: "#a1a1a1",
|
|
borderRadius: 50,
|
|
},
|
|
switchBtn: {
|
|
backgroundColor: "white",
|
|
borderRadius: 50,
|
|
},
|
|
switchTxt: {
|
|
fontSize: 16,
|
|
fontFamily: "Manrope_600SemiBold",
|
|
},
|
|
}); |