|
import streamlit as st |
|
import random |
|
from typing import List, Dict |
|
|
|
|
|
samples: List[Dict[str, str]] = [ |
|
{ |
|
"name": "Basic Button", |
|
"emoji": "π", |
|
"code": """ |
|
import React from 'react'; |
|
import { Button } from 'react-native'; |
|
|
|
interface ButtonProps { |
|
title: string; |
|
onPress: () => void; |
|
} |
|
|
|
const BasicButton: React.FC<ButtonProps> = ({ title, onPress }) => ( |
|
<Button title={title} onPress={onPress} /> |
|
); |
|
|
|
export default BasicButton; |
|
""" |
|
}, |
|
{ |
|
"name": "Text Input", |
|
"emoji": "π", |
|
"code": """ |
|
import React, { useState } from 'react'; |
|
import { TextInput, StyleSheet } from 'react-native'; |
|
|
|
interface TextInputProps { |
|
placeholder: string; |
|
} |
|
|
|
const CustomTextInput: React.FC<TextInputProps> = ({ placeholder }) => { |
|
const [text, setText] = useState(''); |
|
|
|
return ( |
|
<TextInput |
|
style={styles.input} |
|
onChangeText={setText} |
|
value={text} |
|
placeholder={placeholder} |
|
/> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
input: { |
|
height: 40, |
|
borderColor: 'gray', |
|
borderWidth: 1, |
|
padding: 10, |
|
}, |
|
}); |
|
|
|
export default CustomTextInput; |
|
""" |
|
}, |
|
{ |
|
"name": "List View", |
|
"emoji": "π", |
|
"code": """ |
|
import React from 'react'; |
|
import { FlatList, Text, View, StyleSheet } from 'react-native'; |
|
|
|
interface Item { |
|
id: string; |
|
title: string; |
|
} |
|
|
|
interface ListViewProps { |
|
data: Item[]; |
|
} |
|
|
|
const ListView: React.FC<ListViewProps> = ({ data }) => ( |
|
<FlatList |
|
data={data} |
|
renderItem={({ item }) => ( |
|
<View style={styles.item}> |
|
<Text>{item.title}</Text> |
|
</View> |
|
)} |
|
keyExtractor={item => item.id} |
|
/> |
|
); |
|
|
|
const styles = StyleSheet.create({ |
|
item: { |
|
padding: 20, |
|
borderBottomWidth: 1, |
|
borderBottomColor: '#ccc', |
|
}, |
|
}); |
|
|
|
export default ListView; |
|
""" |
|
}, |
|
] |
|
|
|
def main(): |
|
st.title("React Native and TypeScript Mobile UI Generator π±") |
|
|
|
st.sidebar.header("UI Components π§©") |
|
selected_component = st.sidebar.selectbox( |
|
"Choose a component:", |
|
[f"{sample['emoji']} {sample['name']}" for sample in samples] |
|
) |
|
|
|
selected_index = [f"{sample['emoji']} {sample['name']}" for sample in samples].index(selected_component) |
|
|
|
st.header(f"{samples[selected_index]['emoji']} {samples[selected_index]['name']}") |
|
|
|
st.code(samples[selected_index]['code'], language='typescript') |
|
|
|
st.subheader("Component Preview π") |
|
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 π οΈ") |
|
|
|
|
|
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() |
|
|