105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
|
|
export function ContentSkeleton() {
|
|
const colorScheme = useColorScheme();
|
|
const palette = colorScheme === 'dark' ? darkPalette : lightPalette;
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: palette.background }]}>
|
|
<View style={styles.skeletonGrid}>
|
|
<View style={styles.column}>
|
|
{[...Array(4)].map((_, i) => (
|
|
<SkeletonItem key={`left-${i}`} palette={palette} />
|
|
))}
|
|
</View>
|
|
<View style={styles.column}>
|
|
{[...Array(4)].map((_, i) => (
|
|
<SkeletonItem key={`right-${i}`} palette={palette} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function SkeletonItem({ palette }: { palette: any }) {
|
|
return (
|
|
<View style={[styles.skeletonItem, { backgroundColor: palette.skeletonBackground }]}>
|
|
<View
|
|
style={[
|
|
styles.skeletonImage,
|
|
{
|
|
backgroundColor: palette.skeletonHighlight,
|
|
},
|
|
]}
|
|
/>
|
|
<View style={styles.skeletonContent}>
|
|
<View
|
|
style={[
|
|
styles.skeletonLine,
|
|
{
|
|
backgroundColor: palette.skeletonHighlight,
|
|
width: '80%',
|
|
},
|
|
]}
|
|
/>
|
|
<View
|
|
style={[
|
|
styles.skeletonLine,
|
|
{
|
|
backgroundColor: palette.skeletonHighlight,
|
|
width: '60%',
|
|
marginTop: 8,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const darkPalette = {
|
|
background: '#050505',
|
|
skeletonBackground: '#0D0E12',
|
|
skeletonHighlight: '#1A1B20',
|
|
};
|
|
|
|
const lightPalette = {
|
|
background: '#F7F8FB',
|
|
skeletonBackground: '#FFFFFF',
|
|
skeletonHighlight: '#F0F2F8',
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
skeletonGrid: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 12,
|
|
paddingTop: 8,
|
|
},
|
|
column: {
|
|
flex: 1,
|
|
paddingHorizontal: 6,
|
|
},
|
|
skeletonItem: {
|
|
borderRadius: 16,
|
|
marginBottom: 12,
|
|
overflow: 'hidden',
|
|
},
|
|
skeletonImage: {
|
|
width: '100%',
|
|
aspectRatio: 1,
|
|
},
|
|
skeletonContent: {
|
|
padding: 12,
|
|
},
|
|
skeletonLine: {
|
|
height: 12,
|
|
borderRadius: 4,
|
|
},
|
|
});
|