Features/methpura/newstatuspage

app/(tabs)/leaderboard.tsx

@@ -1,15 +1,68 @@
 import AppHeader from "@/components/AppHeader";
-import React from "react";
-import { Text, View } from "react-native";
+import StatusInput from "@/components/status/StatusInput";
+import StatusMessage from "@/components/status/StatusMessage";
+import React, { useState } from "react";
+import { View, ScrollView, Text, StyleSheet } from "react-native";
+import { FAB } from "react-native-paper";
 
 export default function LeaderBoard() {
+  const [messages, setMessages] = useState<Array<{ text: string; isUser: boolean }>>([]);
+
+  // Function to handle sending messages
+  const handleSend = (text: string) => {
+    setMessages([...messages, { text, isUser: true }]);
+    // Simulate a system response
+    setTimeout(() => {
+      setMessages((prev) => [...prev, { text: 'Thank you for your message!', isUser: false }]);
+    }, 1000);
+  };
+
   return (
     <>
       <AppHeader title="Status" />
-      <View className="w-full flex justify-center items-center h-full bg-white">
-        <Text className="text-3xl font-pblack"> textInComponent </Text>
-        <Text>LeaderBoard</Text>
+      <View style={styles.container}>
+        <Text style={styles.title}>Recent Updates</Text>
+        <ScrollView style={styles.messagesContainer}>
+          {messages.map((msg, index) => (
+            <StatusMessage key={index} text={msg.text} isUser={msg.isUser} />
+          ))}
+        </ScrollView>
+        <StatusInput onSend={handleSend} />
       </View>
+      <FAB
+        icon="refresh"
+        size="medium"
+        mode="elevated"
+        style={styles.fab}
+        onPress={() => setMessages([])} // Clear messages or refresh data
+      />
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#f0f2f5",
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: "#000",
+    marginBottom: 16,
+  },
+  messagesContainer: {
+    flex: 1,
+    marginBottom: 16,
+  },
+  fab: {
+    position: "absolute",
+    margin: 16,
+    right: 0,
+    bottom: 80,
+    backgroundColor: "#1877f2", // Facebook blue
+  },
+});
+
+

components/status/StatusInput.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+ // Install this package
+
+const StatusInput = ({ onSend }: { onSend: (text: string) => void }) => {
+    const [message, setMessage] = useState('');
+
+    const handleSend = () => {
+        if (message.trim()) {
+            onSend(message);
+            setMessage('');
+        }
+    };
+
+    return (
+        <View style={styles.inputContainer}>
+            <TextInput
+                style={styles.input}
+                placeholder="Type a message..."
+                value={message}
+                onChangeText={setMessage}
+            />
+            <TouchableOpacity onPress={handleSend}>
+                <Icon name="send" size={24} color="#1877f2" />
+            </TouchableOpacity>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 8,
+        backgroundColor: '#fff',
+        borderTopWidth: 1,
+        borderTopColor: '#e0e0e0',
+    },
+    input: {
+        flex: 1,
+        padding: 8,
+        borderRadius: 20,
+        backgroundColor: '#f0f2f5',
+        marginRight: 8,
+    },
+});
+
+export default StatusInput;

components/status/StatusMessage.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+type MessageProps = {
+    text: string;
+    isUser: boolean; // To differentiate between user and system messages
+};
+
+const StatusMessage = ({ text, isUser }: MessageProps) => {
+    return (
+        <View style={[styles.messageContainer, isUser ? styles.userMessage : styles.systemMessage]}>
+            <Text style={styles.messageText}>{text}</Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    messageContainer: {
+        maxWidth: '80%',
+        padding: 12,
+        borderRadius: 12,
+        marginVertical: 4,
+    },
+    userMessage: {
+        alignSelf: 'flex-end',
+        backgroundColor: '#1877f2', // Facebook blue
+    },
+    systemMessage: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#e4e6eb', // Light gray
+    },
+    messageText: {
+        fontSize: 16,
+        color: '#000',
+    },
+});
+
+export default StatusMessage;