Initial commit: expo-popcore-app

components/skeleton/SearchTemplateSkeleton.tsx

@@ -0,0 +1,89 @@
+import { View, StyleSheet } from 'react-native'
+import { Skeleton } from './skeleton'
+
+export function SearchTemplateSkeleton() {
+    return (
+        <View style={styles.container}>
+            {/* 搜索历史骨架 */}
+            <View style={styles.historySection}>
+                <View style={styles.historyHeader}>
+                    <Skeleton width={80} height={18} borderRadius={4} />
+                    <Skeleton width={20} height={20} borderRadius={4} />
+                </View>
+                <View style={styles.historyTags}>
+                    {[1, 2, 3, 4].map((item) => (
+                        <Skeleton
+                            key={item}
+                            width={80}
+                            height={29}
+                            borderRadius={100}
+                            style={styles.historyTag}
+                        />
+                    ))}
+                </View>
+            </View>
+
+            {/* 探索更多骨架 */}
+            <View style={styles.exploreSection}>
+                <View style={styles.exploreHeader}>
+                    <Skeleton width={80} height={18} borderRadius={4} />
+                    <Skeleton width={60} height={18} borderRadius={4} />
+                </View>
+                <View style={styles.exploreTags}>
+                    {[1, 2, 3, 4, 5, 6].map((item) => (
+                        <Skeleton
+                            key={item}
+                            width="48%"
+                            height={20}
+                            borderRadius={4}
+                            style={styles.exploreTag}
+                        />
+                    ))}
+                </View>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#090A0B',
+        paddingHorizontal: 12,
+    },
+    historySection: {
+        paddingBottom: 32,
+    },
+    historyHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    historyTags: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 4,
+        marginTop: 16,
+    },
+    historyTag: {
+        marginBottom: 0,
+    },
+    exploreSection: {
+        marginTop: 0,
+    },
+    exploreHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    exploreTags: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    exploreTag: {
+        marginBottom: 0,
+    },
+})
+