Update app.py

app.py

@@ -96,426 +96,12 @@ const styles = StyleSheet.create({
 });
 
 export default ListView;
-"""
-    },
-    {
-        "name": "Toggle Switch",
-        "emoji": "🔛",
-        "code": """
-import React, { useState } from 'react';
-import { Switch, View, Text, StyleSheet } from 'react-native';
-
-interface ToggleSwitchProps {
-  label: string;
-}
-
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ label }) => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
-
-  return (
-    <View style={styles.container}>
-      <Text>{label}</Text>
-      <Switch
-        trackColor={{ false: "#767577", true: "#81b0ff" }}
-        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
-        onValueChange={toggleSwitch}
-        value={isEnabled}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: 10,
-  },
-});
-
-export default ToggleSwitch;
-"""
-    },
-    {
-        "name": "Card Component",
-        "emoji": "🃏",
-        "code": """
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-interface CardProps {
-  title: string;
-  content: string;
-}
-
-const Card: React.FC<CardProps> = ({ title, content }) => (
-  <View style={styles.card}>
-    <Text style={styles.title}>{title}</Text>
-    <Text style={styles.content}>{content}</Text>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: 'white',
-    borderRadius: 8,
-    padding: 16,
-    margin: 8,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    marginBottom: 8,
-  },
-  content: {
-    fontSize: 14,
-  },
-});
-
-export default Card;
-"""
-    },
-    {
-        "name": "Modal Dialog",
-        "emoji": "💬",
-        "code": """
-import React, { useState } from 'react';
-import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
-
-interface ModalDialogProps {
-  title: string;
-  content: string;
-}
-
-const ModalDialog: React.FC<ModalDialogProps> = ({ title, content }) => {
-  const [modalVisible, setModalVisible] = useState(false);
-
-  return (
-    <View>
-      <Modal
-        animationType="slide"
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => setModalVisible(!modalVisible)}
-      >
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <Text style={styles.modalText}>{title}</Text>
-            <Text>{content}</Text>
-            <Pressable
-              style={[styles.button, styles.buttonClose]}
-              onPress={() => setModalVisible(!modalVisible)}
-            >
-              <Text style={styles.textStyle}>Close</Text>
-            </Pressable>
-          </View>
-        </View>
-      </Modal>
-      <Pressable
-        style={[styles.button, styles.buttonOpen]}
-        onPress={() => setModalVisible(true)}
-      >
-        <Text style={styles.textStyle}>Show Modal</Text>
-      </Pressable>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    marginTop: 22
-  },
-  modalView: {
-    margin: 20,
-    backgroundColor: "white",
-    borderRadius: 20,
-    padding: 35,
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2
-  },
-  buttonOpen: {
-    backgroundColor: "#F194FF",
-  },
-  buttonClose: {
-    backgroundColor: "#2196F3",
-  },
-  textStyle: {
-    color: "white",
-    fontWeight: "bold",
-    textAlign: "center"
-  },
-  modalText: {
-    marginBottom: 15,
-    textAlign: "center"
-  }
-});
-
-export default ModalDialog;
-"""
-    },
-    {
-        "name": "Navigation Menu",
-        "emoji": "🧭",
-        "code": """
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
-interface MenuItem {
-  label: string;
-  onPress: () => void;
-}
-
-interface NavigationMenuProps {
-  items: MenuItem[];
-}
-
-const NavigationMenu: React.FC<NavigationMenuProps> = ({ items }) => (
-  <View style={styles.container}>
-    {items.map((item, index) => (
-      <TouchableOpacity key={index} style={styles.menuItem} onPress={item.onPress}>
-        <Text style={styles.menuText}>{item.label}</Text>
-      </TouchableOpacity>
-    ))}
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    backgroundColor: '#f0f0f0',
-    height: 60,
-  },
-  menuItem: {
-    padding: 10,
-  },
-  menuText: {
-    fontSize: 16,
-  },
-});
-
-export default NavigationMenu;
-"""
-    },
-    {
-        "name": "Image Carousel",
-        "emoji": "🖼️",
-        "code": """
-import React, { useState } from 'react';
-import { View, Image, StyleSheet, Dimensions } from 'react-native';
-import Carousel from 'react-native-snap-carousel';
-
-interface CarouselItem {
-  id: string;
-  imageUrl: string;
-}
-
-interface ImageCarouselProps {
-  data: CarouselItem[];
-}
-
-const ImageCarousel: React.FC<ImageCarouselProps> = ({ data }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const windowWidth = Dimensions.get('window').width;
-
-  const renderItem = ({ item }: { item: CarouselItem }) => (
-    <View style={styles.slide}>
-      <Image
-        source={{ uri: item.imageUrl }}
-        style={styles.image}
-      />
-    </View>
-  );
-
-  return (
-    <Carousel
-      data={data}
-      renderItem={renderItem}
-      sliderWidth={windowWidth}
-      itemWidth={windowWidth - 60}
-      onSnapToItem={index => setActiveIndex(index)}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  slide: {
-    width: '100%',
-    height: 200,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-    borderRadius: 8,
-  },
-});
-
-export default ImageCarousel;
-"""
-    },
-    {
-        "name": "Form Validation",
-        "emoji": "✅",
-        "code": """
-import React, { useState } from 'react';
-import { View, TextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
-
-interface FormData {
-  email: string;
-  password: string;
-}
-
-const FormValidation: React.FC = () => {
-  const [formData, setFormData] = useState<FormData>({ email: '', password: '' });
-  const [errors, setErrors] = useState<Partial<FormData>>({});
-
-  const validateForm = (): boolean => {
-    let newErrors: Partial<FormData> = {};
-    if (!formData.email) newErrors.email = 'Email is required';
-    if (!formData.password) newErrors.password = 'Password is required';
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = () => {
-    if (validateForm()) {
-      console.log('Form submitted:', formData);
-    } else {
-      console.log('Form has errors');
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      <TextInput
-        style={styles.input}
-        placeholder="Email"
-        value={formData.email}
-        onChangeText={(text) => setFormData({ ...formData, email: text })}
-      />
-      {errors.email && <Text style={styles.errorText}>{errors.email}</Text>}
-      <TextInput
-        style={styles.input}
-        placeholder="Password"
-        secureTextEntry
-        value={formData.password}
-        onChangeText={(text) => setFormData({ ...formData, password: text })}
-      />
-      {errors.password && <Text style={styles.errorText}>{errors.password}</Text>}
-      <TouchableOpacity style={styles.button} onPress={handleSubmit}>
-        <Text style={styles.buttonText}>Submit</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  input: {
-    height: 40,
-    borderColor: 'gray',
-    borderWidth: 1,
-    marginBottom: 10,
-    paddingHorizontal: 10,
-  },
-  errorText: {
-    color: 'red',
-    marginBottom: 10,
-  },
-  button: {
-    backgroundColor: 'blue',
-    padding: 10,
-    borderRadius: 5,
-  },
-  buttonText: {
-    color: 'white',
-    textAlign: 'center',
-  },
-});
-
-export default FormValidation;
-"""
-    },
-    {
-        "name": "Custom Hook",
-        "emoji": "🎣",
-        "code": """
-import { useState, useEffect } from 'react';
-
-interface UseFetchResult<T> {
-  data: T | null;
-  loading: boolean;
-  error: Error | null;
-}
-
-function useFetch<T>(url: string): UseFetchResult<T> {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const result = await response.json();
-        setData(result);
-      } catch (e) {
-        setError(e instanceof Error ? e : new Error('An unknown error occurred'));
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [url]);
-
-  return { data, loading, error };
-}
-
-export default useFetch;
-
-// Usage example:
-// const { data, loading, error } = useFetch<YourDataType>('https://api.example.com/data');
 """
     },
 ]
 
 def main():
-    st.title("React and TypeScript Mobile UI Generator 📱")
+    st.title("React Native and TypeScript Mobile UI Generator 📱")
     
     st.sidebar.header("UI Components 🧩")
     selected_component = st.sidebar.selectbox(
@@ -533,6 +119,25 @@ def main():
     st.warning("This is a placeholder for the component preview. In a full implementation, this would render a visual representation of the component.")
     
     st.subheader("Customization Options 🛠️")
-    st.info("Here you can add customization options for the selected component. For example, color pickers, sliders for sizes, text inputs for labels, etc.")
     
-    if st.button("Generate Component
+    # Allow customization options
+    if "Basic Button" in selected_component:
+        button_label = st.text_input("Button Label", "Click Me")
+        if st.button(f"Generate {button_label}"):
+            st.success(f'Generated button with label "{button_label}"')
+    
+    elif "Text Input" in selected_component:
+        placeholder = st.text_input("Placeholder", "Enter text...")
+        if st.button("Generate Text Input"):
+            st.success(f'Generated Text Input with placeholder "{placeholder}"')
+    
+    elif "List View" in selected_component:
+        num_items = st.slider("Number of List Items", 1, 10, 5)
+        list_items = [f"Item {i}" for i in range(1, num_items + 1)]
+        if st.button("Generate List View"):
+            st.success(f"Generated List View with {num_items} items: {', '.join(list_items)}")
+    
+    st.info("This is a basic implementation. Add more customization options as needed.")
+
+if __name__ == "__main__":
+    main()