Skip to content

Commit 7224e2f

Browse files
shanuvrshanuvr
committed
feat(ui): styled basic skeloton for all screen
1 parent eda710c commit 7224e2f

7 files changed

Lines changed: 325 additions & 13 deletions

File tree

‎frontend/app/(tabs)/_layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ export default function TabLayout() {
5353
),
5454
}}
5555
/>
56+
<Tabs.Screen name='events/create' options={{href:null}}/>
5657
</Tabs>
58+
5759
);
5860
}

‎frontend/app/(tabs)/events/create.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import CreateEventScreen from "@/screens/events/CreateEventScreen";
2+
export default function CreactEvent(){
3+
return<CreateEventScreen/>
4+
}

‎frontend/screens/events/CreateEventScreen.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { View, Text, Pressable, StyleSheet } from 'react-native';
2+
import { useRouter } from 'expo-router';
3+
4+
export default function CreateEventScreen() {
5+
const router = useRouter();
6+
7+
return (
8+
<View style={styles.container}>
9+
<View style={styles.header}>
10+
<Pressable onPress={() => router.back()}>
11+
<Text style={styles.backText}>Back</Text>
12+
</Pressable>
13+
14+
<Text style={styles.title}>Create Event</Text>
15+
16+
<View style={{ width: 40 }} />
17+
</View>
18+
19+
<View style={styles.content}>
20+
<Text style={styles.placeholder}>
21+
Event creation form will go here.
22+
</Text>
23+
</View>
24+
</View>
25+
);
26+
}
27+
const styles = StyleSheet.create({
28+
container: {
29+
flex: 1,
30+
backgroundColor: '#fff',
31+
},
32+
header: {
33+
height: 56,
34+
paddingHorizontal: 16,
35+
flexDirection: 'row',
36+
alignItems: 'center',
37+
justifyContent: 'space-between',
38+
borderBottomWidth: 0.5,
39+
borderBottomColor: '#e5e7eb',
40+
},
41+
backText: {
42+
color: '#22c55e',
43+
fontSize: 16,
44+
},
45+
title: {
46+
fontSize: 16,
47+
fontWeight: '600',
48+
},
49+
content: {
50+
flex: 1,
51+
padding: 16,
52+
},
53+
placeholder: {
54+
color: '#6b7280',
55+
fontSize: 14,
56+
},
57+
});

‎frontend/screens/events/EventsScreen.tsx‎

Lines changed: 63 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,68 @@
1-
import { View, Text } from 'react-native';
1+
import { View, Text, Pressable, StyleSheet } from 'react-native';
2+
import { useRouter } from 'expo-router';
3+
4+
export default function EventsScreen() {
5+
const router = useRouter();
26

3-
export default function EventScreen() {
47
return (
5-
<View>
6-
<Text>Events Screen</Text>
8+
<View style={styles.container}>
9+
10+
<View style={styles.header}>
11+
<Text style={styles.title}>Events</Text>
12+
13+
<Pressable
14+
onPress={() => router.push('/(tabs)/events/create')}
15+
>
16+
<Text style={styles.createText}>Create</Text>
17+
</Pressable>
18+
</View>
19+
20+
<View style={styles.section}>
21+
<Text style={styles.sectionTitle}>My Events</Text>
22+
<Text style={styles.placeholder}>You haven’t created any events yet.</Text>
23+
</View>
24+
25+
<View style={styles.section}>
26+
<Text style={styles.sectionTitle}>Joined Events</Text>
27+
<Text style={styles.placeholder}>
28+
Events you join will appear here.
29+
</Text>
30+
</View>
731
</View>
832
);
933
}
34+
const styles = StyleSheet.create({
35+
container: {
36+
flex: 1,
37+
padding: 16,
38+
backgroundColor: '#fff',
39+
},
40+
header: {
41+
flexDirection: 'row',
42+
justifyContent: 'space-between',
43+
alignItems: 'center',
44+
marginBottom: 24,
45+
},
46+
title: {
47+
fontSize: 22,
48+
fontWeight: '600',
49+
},
50+
createText: {
51+
fontSize: 16,
52+
color: '#22c55e',
53+
fontWeight: '500',
54+
},
55+
section: {
56+
marginBottom: 24,
57+
},
58+
sectionTitle: {
59+
fontSize: 16,
60+
fontWeight: '600',
61+
marginBottom: 8,
62+
},
63+
placeholder: {
64+
fontSize: 14,
65+
color: '#6b7280',
66+
},
67+
});
68+

‎frontend/screens/home/HomeScreen.tsx‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,60 @@
1-
import { Text, View } from 'react-native';
1+
import { View, Text, StyleSheet, Pressable } from 'react-native';
22

33
export default function HomeScreen() {
44
return (
5-
<View>
6-
<Text>this is home page</Text>
5+
<View style={styles.container}>
6+
7+
<View style={styles.header}>
8+
<Text style={styles.title}>Home</Text>
9+
</View>
10+
<View style={styles.section}>
11+
<Text style={styles.sectionTitle}>New Events</Text>
12+
<Text style={styles.placeholder}>New events will appear here.</Text>
13+
</View>
14+
15+
<View style={styles.section}>
16+
<Text style={styles.sectionTitle}>Popular Events</Text>
17+
<Text style={styles.placeholder}>Popular events will appear here.</Text>
18+
</View>
19+
720
</View>
821
);
922
}
23+
const styles = StyleSheet.create({
24+
container: {
25+
flex: 1,
26+
padding: 16,
27+
backgroundColor: '#fff',
28+
},
29+
header: {
30+
marginBottom: 16,
31+
},
32+
title: {
33+
fontSize: 22,
34+
fontWeight: '600',
35+
},
36+
searchBox: {
37+
height: 44,
38+
borderRadius: 8,
39+
backgroundColor: '#f3f4f6',
40+
justifyContent: 'center',
41+
paddingHorizontal: 12,
42+
marginBottom: 24,
43+
},
44+
searchText: {
45+
color: '#6b7280',
46+
fontSize: 14,
47+
},
48+
section: {
49+
marginBottom: 24,
50+
},
51+
sectionTitle: {
52+
fontSize: 16,
53+
fontWeight: '600',
54+
marginBottom: 8,
55+
},
56+
placeholder: {
57+
fontSize: 14,
58+
color: '#6b7280',
59+
},
60+
});

‎frontend/screens/profile/ProfileScreen.tsx‎

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,86 @@
1-
import { View, Text } from 'react-native';
1+
import { View, Text, StyleSheet, Pressable } from 'react-native';
22

33
export default function ProfileScreen() {
44
return (
5-
<View>
6-
<Text>profile Screen</Text>
5+
<View style={styles.container}>
6+
7+
{/* Header */}
8+
<View style={styles.header}>
9+
<Text style={styles.title}>Profile</Text>
10+
</View>
11+
12+
{/* User info */}
13+
<View style={styles.userCard}>
14+
<View style={styles.avatar} />
15+
<View>
16+
<Text style={styles.name}>Your Name</Text>
17+
<Text style={styles.subText}>+91 XXXXX XXXXX</Text>
18+
</View>
19+
</View>
20+
21+
{/* Actions */}
22+
<View style={styles.section}>
23+
<Pressable style={styles.row}>
24+
<Text style={styles.rowText}>Edit Profile</Text>
25+
</Pressable>
26+
27+
<Pressable style={styles.row}>
28+
<Text style={styles.rowText}>Settings</Text>
29+
</Pressable>
30+
31+
<Pressable style={styles.row}>
32+
<Text style={styles.rowText}>Help & Support</Text>
33+
</Pressable>
34+
</View>
35+
736
</View>
837
);
938
}
39+
const styles = StyleSheet.create({
40+
container: {
41+
flex: 1,
42+
padding: 16,
43+
backgroundColor: '#fff',
44+
},
45+
header: {
46+
marginBottom: 24,
47+
},
48+
title: {
49+
fontSize: 22,
50+
fontWeight: '600',
51+
},
52+
userCard: {
53+
flexDirection: 'row',
54+
alignItems: 'center',
55+
marginBottom: 32,
56+
},
57+
avatar: {
58+
width: 56,
59+
height: 56,
60+
borderRadius: 28,
61+
backgroundColor: '#e5e7eb',
62+
marginRight: 16,
63+
},
64+
name: {
65+
fontSize: 16,
66+
fontWeight: '600',
67+
},
68+
subText: {
69+
fontSize: 14,
70+
color: '#6b7280',
71+
marginTop: 2,
72+
},
73+
section: {
74+
borderTopWidth: 0.5,
75+
borderTopColor: '#e5e7eb',
76+
},
77+
row: {
78+
paddingVertical: 16,
79+
borderBottomWidth: 0.5,
80+
borderBottomColor: '#e5e7eb',
81+
},
82+
rowText: {
83+
fontSize: 15,
84+
},
85+
});
86+

‎frontend/screens/search/SearchScreen.tsx‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,71 @@
1-
import { View, Text } from 'react-native';
1+
import { View, Text, StyleSheet, TextInput } from 'react-native';
22

33
export default function SearchScreen() {
44
return (
5-
<View>
6-
<Text>Search Screen</Text>
5+
<View style={styles.container}>
6+
7+
<View style={styles.header}>
8+
<Text style={styles.title}>Search</Text>
9+
</View>
10+
11+
<View style={styles.searchBox}>
12+
<TextInput
13+
placeholder="Search events, people, places…"
14+
placeholderTextColor="#6b7280"
15+
style={styles.input}
16+
/>
17+
</View>
18+
19+
<View style={styles.section}>
20+
<Text style={styles.sectionTitle}>Recent Searches</Text>
21+
<Text style={styles.placeholder}>No recent searches</Text>
22+
</View>
23+
24+
<View style={styles.section}>
25+
<Text style={styles.sectionTitle}>Results</Text>
26+
<Text style={styles.placeholder}>
27+
Start typing to see results.
28+
</Text>
29+
</View>
30+
731
</View>
832
);
933
}
34+
const styles = StyleSheet.create({
35+
container: {
36+
flex: 1,
37+
padding: 16,
38+
backgroundColor: '#fff',
39+
},
40+
header: {
41+
marginBottom: 16,
42+
},
43+
title: {
44+
fontSize: 22,
45+
fontWeight: '600',
46+
},
47+
searchBox: {
48+
height: 44,
49+
borderRadius: 8,
50+
backgroundColor: '#f3f4f6',
51+
justifyContent: 'center',
52+
paddingHorizontal: 12,
53+
marginBottom: 24,
54+
},
55+
input: {
56+
fontSize: 14,
57+
color: '#111827',
58+
},
59+
section: {
60+
marginBottom: 24,
61+
},
62+
sectionTitle: {
63+
fontSize: 16,
64+
fontWeight: '600',
65+
marginBottom: 8,
66+
},
67+
placeholder: {
68+
fontSize: 14,
69+
color: '#6b7280',
70+
},
71+
});

0 commit comments

Comments
 (0)