Dennis Hundertmark
89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
import { View, StyleSheet, Dimensions } from "react-native";
|
|
import React from "react";
|
|
import { createShimmerPlaceholder } from "react-native-shimmer-placeholder";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
|
|
const Placeholder = createShimmerPlaceholder(LinearGradient);
|
|
|
|
const { width } = Dimensions.get("window");
|
|
const CARD_WIDTH = width * 0.43;
|
|
|
|
const ProductShimmer = () => {
|
|
return (
|
|
<View style={styles.card}>
|
|
{/* Image placeholder */}
|
|
<Placeholder
|
|
style={styles.image}
|
|
shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
|
|
/>
|
|
|
|
{/* Content container */}
|
|
<View style={styles.content}>
|
|
{/* Title placeholder */}
|
|
<Placeholder
|
|
style={styles.title}
|
|
shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
|
|
/>
|
|
|
|
{/* Rating container placeholder */}
|
|
<View style={styles.ratingContainer}>
|
|
<Placeholder
|
|
style={styles.rating}
|
|
shimmerColors={["#ebebeb", "#ddd", "#ebebeb"]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export const ProductShimmerGrid = () => {
|
|
return (
|
|
<View style={styles.container}>
|
|
{[...Array(6)].map((_, index) => (
|
|
<ProductShimmer key={index} />
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
gap: 8,
|
|
justifyContent: "center",
|
|
},
|
|
card: {
|
|
width: CARD_WIDTH,
|
|
backgroundColor: "white",
|
|
borderRadius: 12,
|
|
margin: 8,
|
|
boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
height: CARD_WIDTH, // Square image
|
|
borderTopLeftRadius: 12,
|
|
borderTopRightRadius: 12,
|
|
},
|
|
content: {
|
|
padding: 12,
|
|
gap: 8,
|
|
},
|
|
title: {
|
|
height: 20,
|
|
width: "85%",
|
|
borderRadius: 4,
|
|
},
|
|
ratingContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
rating: {
|
|
height: 16,
|
|
width: "30%",
|
|
borderRadius: 4,
|
|
},
|
|
});
|