Initial commit: expo-popcore-app

components/ui/notifications/StartGeneratingNotification.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { ViewStyle, Pressable, StyleSheet, View, Text, Platform } from 'react-native'
+import { Image } from 'expo-image'
+import { BlurView } from 'expo-blur'
+import { RightArrowIcon } from '@/components/icon'
+export interface NotificationProps {
+    /**
+     * 未读数量
+     */
+    count?: number
+    /**
+     * 是否显示通知
+     */
+    visible?: boolean
+    /**
+     * 点击事件
+     */
+    onPress?: () => void
+    /**
+     * 自定义样式
+     */
+    style?: ViewStyle
+    /**
+     * 最大显示数量，超过显示 99+
+     */
+    maxCount?: number
+    /**
+     * 通知标题
+     */
+    title?: string
+    /**
+     * 通知内容
+     */
+    message?: string
+}
+
+/**
+ * 通知组件
+ * 基于 Figma 设计实现的通知横幅组件
+ * 尺寸: 359x60
+ */
+const Notification: React.FC<NotificationProps> = ({
+    count = 0,
+    visible = true,
+    onPress,
+    style,
+    title,
+    message,
+}) => {
+    const shouldShow = visible && count > 0
+
+    if (!shouldShow) {
+        return null
+    }
+
+    return (
+        <Pressable
+            onPress={onPress}
+            style={[styles.container, style]}
+            disabled={!onPress}
+        >
+            <BlurView
+                intensity={Platform.OS === 'ios' ? 50 : 50}
+                tint={Platform.OS === 'ios' ? 'dark' : 'default'}
+                style={styles.notificationBanner}
+            >
+                <View style={styles.notificationBannerIcon}>
+                    <Image
+                        source={require('@/assets/images/generate.png')}
+                        style={styles.iconImage}
+                        contentFit="contain"
+                    />
+                </View>
+                <View style={styles.contentWrapper}>
+                    {title && (
+                        <Text style={styles.title}>
+                            {title}
+                        </Text>
+                    )}
+                    {message && (
+                        <Text style={styles.message} numberOfLines={1}>
+                            {message}
+                        </Text>
+                    )}
+                </View>
+                <View style={styles.badgeContainer}>
+                    <RightArrowIcon/>
+                </View>
+            </BlurView>
+        </Pressable>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    notificationBanner: {
+        height: 60,
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderRadius: 12,
+        backgroundColor: Platform.OS === 'ios' ? '#FFFFFF1A' : '#FFFFFF1A',
+        overflow: 'hidden',
+        paddingHorizontal: 16,
+    },
+    notificationBannerIcon: {
+        width: 32,
+        height: 32,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    iconImage: {
+        width: 32,
+        height: 32,
+    },
+    contentWrapper: {
+        flex: 1,
+    },
+    title: {
+        marginBottom: 2,
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#F5F5F5',
+    },
+    message: {
+        fontSize: 12,
+        color: '#CCCCCC',
+    },
+    badgeContainer: {
+        marginLeft: 12,
+        minWidth: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+})
+
+export default Notification
+