Chakka Bhai

// Show Post
import React from 'react';
import { View, Text, StyleSheet, FlatList, Dimensions } from 'react-native';

interface ShowPostProps {
  data: PhotoCardData[];
}

interface PhotoCardData {
  distance: string;
  timePosted: string;
  description: string;
}

const ShowPost: React.FC<ShowPostProps> = ({ data }) => {
  const renderPost = ({ item }: { item: PhotoCardData }) => (
    <View style={styles.postContainer}>
      <View style={styles.infoRow}>
        <Text style={styles.label}>Distance:</Text>
        <Text style={styles.value}>{item.distance || 'N/A'}</Text>
      </View>
      <View style={styles.infoRow}>
        <Text style={styles.label}>Time Posted:</Text>
        <Text style={styles.value}>{item.timePosted || 'N/A'}</Text>
      </View>
      <View style={styles.descriptionContainer}>
        <Text style={styles.descriptionLabel}>Description:</Text>
        <Text style={styles.descriptionText}>
          {item.description || 'No description'}
        </Text>
      </View>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderPost}
      keyExtractor={(item, index) => index.toString()}
      contentContainerStyle={styles.container}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    alignItems: 'center',
    minHeight: Dimensions.get('window').height,
  },

  postContainer: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    width: '90%',
    maxWidth: 600,
    marginBottom: 20,
  },

  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },

  label: {
    fontSize: 14,
    color: '#666',
    fontWeight: 'bold',
  },

  value: {
    fontSize: 14,
    color: '#333',
  },

  descriptionContainer: {
    marginTop: 15,
    backgroundColor: '#f0f0f0',
    padding: 15,
    borderRadius: 4,
  },

  descriptionLabel: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
    fontWeight: 'bold',
  },

  descriptionText: {
    fontSize: 14,
    color: '#333',
  },
});

export default ShowPost;

// Create Post

import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  TextInputProps,
  ViewStyle,
  StyleProp,
  Dimensions,
  ScrollView,
} from 'react-native';

interface PhotoCardProps {
  initialDistance?: string;
  initialTimePosted?: string;
  initialDescription?: string;
  style?: StyleProp<ViewStyle>;
  onSave?: (data: PhotoCardData) => void;
}

interface PhotoCardData {
  distance: string;
  timePosted: string;
  description: string;
}

interface StyledInputProps extends TextInputProps {
  label: string;
}

const StyledInput: React.FC<StyledInputProps> = ({ label, ...props }) => (
  <View style={styles.inputWrapper}>
    <Text style={styles.inputLabel}>{label}</Text>
    <TextInput
      style={styles.input}
      placeholderTextColor="#999"
      {...props}
    />
  </View>
);

const PhotoCard: React.FC<PhotoCardProps> = ({
  initialDistance = '',
  initialTimePosted = '',
  initialDescription = '',
  style,
  onSave
}) => {
  const [distance, setDistance] = useState(initialDistance);
  const [timePosted, setTimePosted] = useState(initialTimePosted);
  const [description, setDescription] = useState(initialDescription);

  const handleAddData = () => {
    onSave?.({
      distance,
      timePosted,
      description
    });
    console.log("Data added:", { distance, timePosted, description });
  };

  return (
    <ScrollView contentContainerStyle={styles.scrollContainer}>
      <View style={[styles.container, style]}>
        <TouchableOpacity
          style={styles.photoPlaceholder}
          onPress={() => console.log('Photo upload functionality here')}
        >
          <Text style={styles.photoText}>PHOTO</Text>
          <Text style={styles.uploadText}>Tap to upload</Text>
        </TouchableOpacity>

        <View style={styles.infoContainer}>
          <View style={styles.headerRow}>
            <StyledInput
              label="Distance"
              value={distance}
              onChangeText={(text) => setDistance(text)}
              placeholder="Enter distance"
              keyboardType="default"
            />
            <StyledInput
              label="Time put up"
              value={timePosted}
              onChangeText={(text) => setTimePosted(text)}
              placeholder="Enter time"
            />
          </View>

          <View style={styles.descriptionContainer}>
            <TextInput
              style={styles.descriptionInput}
              value={description}
              onChangeText={(text) => setDescription(text)}
              placeholder="Enter description"
              placeholderTextColor="#fff8"
              multiline
            />
          </View>

          <TouchableOpacity
            style={styles.addButton}
            onPress={handleAddData}
          >
            <Text style={styles.addButtonText}>Add Data</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollContainer: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: Dimensions.get('window').height,
  },

  container: {
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    width: '90%',
    maxWidth: 600,
    padding: 15,
  },

  photoPlaceholder: {
    backgroundColor: '#f0f0f0',
    height: 150,
    justifyContent: 'center',
    alignItems: 'center',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    marginBottom: 15,
  },

  photoText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#000',
  },

  uploadText: {
    fontSize: 12,
    color: '#666',
    marginTop: 4,
  },

  infoContainer: {
    padding: 15,
  },

  headerRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 15,
  },

  inputWrapper: {
    flex: 1,
    marginRight: 10,
  },

  inputLabel: {
    fontSize: 12,
    color: '#666',
    marginBottom: 4,
  },

  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 4,
    padding: 8,
    fontSize: 14,
    backgroundColor: '#fff',
  },

  descriptionContainer: {
    backgroundColor: '#4a90e2',
    marginTop: 10,
    padding: 10,
    borderRadius: 4,
    minHeight: 60,
  },

  descriptionInput: {
    color: '#fff',
    fontSize: 14,
    minHeight: 40,
  },

  addButton: {
    marginTop: 20,
    padding: 12,
    backgroundColor: '#4a90e2',
    borderRadius: 4,
    alignItems: 'center',
  },

  addButtonText: {
    color: '#fff',
    fontWeight: '600',
  },
});

export default PhotoCard;


// Chat Page

import React, { useState } from 'react';
import { View, FlatList, TextInput, TouchableOpacity, Text, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

interface Message {
  id: string;
  text: string;
  sender: 'user' | 'bot';
}

const ChatPage: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');

  const sendMessage = () => {
    if (input.trim().length > 0) {
      const newMessage: Message = {
        id: `${Date.now()}`,
        text: input,
        sender: 'user',
      };
      setMessages((prevMessages) => [...prevMessages, newMessage]);
      setInput('');
    }
  };

  const renderMessage = ({ item }: { item: Message }) => (
    <View
      style={[
        styles.messageContainer,
        item.sender === 'user' ? styles.userMessage : styles.botMessage,
      ]}
    >
      <Text style={styles.messageText}>{item.text}</Text>
    </View>
  );

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <FlatList
        data={messages}
        renderItem={renderMessage}
        keyExtractor={(item) => item.id}
        style={styles.chatContainer}
      />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={input}
          onChangeText={setInput}
          placeholder="Type a message"
        />
        <TouchableOpacity onPress={sendMessage} style={styles.sendButton}>
          <Icon name="send" size={24} color="#fff" />
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  chatContainer: {
    flex: 1,
    padding: 10,
  },
  messageContainer: {
    padding: 10,
    borderRadius: 20,
    marginVertical: 5,
    maxWidth: '75%',
  },
  userMessage: {
    alignSelf: 'flex-end',
    backgroundColor: '#007bff',
  },
  botMessage: {
    alignSelf: 'flex-start',
    backgroundColor: '#e5e5ea',
  },
  messageText: {
    color: '#fff',
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    borderTopWidth: 1,
    borderColor: '#ddd',
    backgroundColor: '#fff',
  },
  input: {
    flex: 1,
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 20,
    backgroundColor: '#f5f5f5',
  },
  sendButton: {
    marginLeft: 10,
    padding: 10,
    borderRadius: 20,
    backgroundColor: '#007bff',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ChatPage;