Initial commit

Generated by create-expo-app 3.2.0.
2025-03-10 19:49:23 +01:00
commit b24544f115
30 changed files with 17173 additions and 0 deletions
@@ -0,0 +1,88 @@
+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,
+  },
+});