refresh button, calendar margins

components/shared/RefreshButton.tsx

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import { TouchableOpacity, Animated, Easing } from 'react-native';
+import { Feather } from '@expo/vector-icons'; 
+
+interface RefreshButtonProps {
+  onRefresh: () => Promise<void>;
+  isSyncing: boolean;
+  size?: number;
+  color?: string;
+}
+
+const RefreshButton = ({ 
+  onRefresh, 
+  isSyncing,
+  size = 24, 
+  color = "#83807F" 
+}: RefreshButtonProps) => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const rotationLoop = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (isSyncing) {
+      startContinuousRotation();
+    } else {
+      stopRotation();
+    }
+  }, [isSyncing]);
+
+  const startContinuousRotation = () => {
+    rotateAnim.setValue(0);
+    rotationLoop.current = Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    rotationLoop.current.start();
+  };
+
+  const stopRotation = () => {
+    rotationLoop.current?.stop();
+    rotateAnim.setValue(0);
+  };
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const handlePress = async () => {
+    if (!isSyncing) {
+      await onRefresh();
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress} disabled={isSyncing}>
+      <Animated.View style={{ transform: [{ rotate }] }}>
+        <Feather name="refresh-cw" size={size} color={color} />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+export default RefreshButton;