127 lines
3.2 KiB
TypeScript
127 lines
3.2 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import colors from "../../components/colors";
|
|
import GroupList from "./GroupList";
|
|
import RequestList from "./RequestList";
|
|
|
|
|
|
// ✅ Tab Layout
|
|
const GroupsTabs = () => {
|
|
const [activeTab, setActiveTab] = useState("MyGroups");
|
|
|
|
const renderContent = () => {
|
|
switch (activeTab) {
|
|
case "MyGroups":
|
|
return <GroupList />;
|
|
case "Requests":
|
|
return <RequestList />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
|
|
{/* Tabs */}
|
|
<View style={styles.tabs}>
|
|
{["MyGroups", "Requests"].map((tab) => (
|
|
<TouchableOpacity
|
|
key={tab}
|
|
style={[
|
|
styles.tabButton,
|
|
activeTab === tab && styles.activeTabButton,
|
|
]}
|
|
onPress={() => setActiveTab(tab)}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.tabText,
|
|
activeTab === tab && styles.activeTabText,
|
|
]}
|
|
>
|
|
{tab === "MyGroups" ? "My Groups" : tab}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* Content */}
|
|
{renderContent()}
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GroupsTabs;
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
tabs: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
marginVertical: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#ddd",
|
|
},
|
|
tabButton: { paddingVertical: 10, flex: 1, alignItems: "center" },
|
|
tabText: { fontSize: 16, color: colors.textLight },
|
|
activeTabButton: { borderBottomWidth: 2, borderBottomColor: colors.Home },
|
|
activeTabText: { color: colors.Home, fontWeight: "600" },
|
|
|
|
searchContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: colors.white,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 12,
|
|
marginVertical: 10,
|
|
height: 45,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 5,
|
|
elevation: 2,
|
|
},
|
|
searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },
|
|
|
|
groupCard: {
|
|
backgroundColor: colors.white,
|
|
padding: 14,
|
|
borderRadius: 14,
|
|
marginBottom: 12,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
},
|
|
groupLeft: { flexDirection: "row", alignItems: "center" },
|
|
groupAvatar: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 25,
|
|
backgroundColor: colors.Home + "33",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginRight: 12,
|
|
},
|
|
avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home },
|
|
groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
|
|
groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
|
|
groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
|
|
detailsBox: {
|
|
marginTop: 10,
|
|
padding: 10,
|
|
borderRadius: 8,
|
|
backgroundColor: "#f9f9f9",
|
|
},
|
|
detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
|
|
emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
|
|
centered: { flex: 1, justifyContent: "center", alignItems: "center" },
|
|
sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
|
|
});
|