mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 19:39:40 +02:00
e7f5f942f3
Projects included: - maerchenzauber (NestJS backend + Expo mobile + SvelteKit web + Astro landing) - manacore (Expo mobile + SvelteKit web + Astro landing) - manadeck (NestJS backend + Expo mobile + SvelteKit web) - memoro (Expo mobile + SvelteKit web + Astro landing) This commit preserves the current state before monorepo restructuring. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import { useTheme } from '~/features/theme/ThemeProvider';
|
|
import colors from '~/tailwind.config.js';
|
|
|
|
/**
|
|
* Skeleton loader for WeekCard component
|
|
*/
|
|
const WeekCardSkeleton: React.FC = () => {
|
|
const { isDark, themeVariant } = useTheme();
|
|
|
|
const contentBackgroundColor = isDark
|
|
? (colors as any).theme?.extend?.colors?.dark?.[themeVariant]?.contentBackground
|
|
: (colors as any).theme?.extend?.colors?.[themeVariant]?.contentBackground;
|
|
const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
|
const skeletonColor = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: contentBackgroundColor,
|
|
borderRadius: 16,
|
|
borderWidth: 1.5,
|
|
borderColor: borderColor,
|
|
padding: 16,
|
|
marginBottom: 12,
|
|
}}>
|
|
{/* Header with week title and dates */}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 16,
|
|
}}>
|
|
{/* Week title skeleton */}
|
|
<View
|
|
style={{
|
|
height: 18,
|
|
width: '35%',
|
|
backgroundColor: skeletonColor,
|
|
borderRadius: 4,
|
|
}}
|
|
/>
|
|
|
|
{/* Date range skeleton */}
|
|
<View
|
|
style={{
|
|
height: 14,
|
|
width: '40%',
|
|
backgroundColor: skeletonColor,
|
|
borderRadius: 4,
|
|
}}
|
|
/>
|
|
</View>
|
|
|
|
{/* Stats grid */}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
}}>
|
|
{/* 4 stat columns */}
|
|
{[1, 2, 3, 4].map((index) => (
|
|
<View
|
|
key={index}
|
|
style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
marginHorizontal: 4,
|
|
}}>
|
|
{/* Stat value skeleton */}
|
|
<View
|
|
style={{
|
|
height: 20,
|
|
width: '80%',
|
|
backgroundColor: skeletonColor,
|
|
borderRadius: 4,
|
|
marginBottom: 4,
|
|
}}
|
|
/>
|
|
|
|
{/* Stat label skeleton */}
|
|
<View
|
|
style={{
|
|
height: 12,
|
|
width: '90%',
|
|
backgroundColor: skeletonColor,
|
|
borderRadius: 4,
|
|
}}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default WeekCardSkeleton;
|