150 lines
3.6 KiB
TypeScript
150 lines
3.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
ScrollView,
|
|
Linking,
|
|
Dimensions,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import Collapsible from "react-native-collapsible";
|
|
import { NavigationProp } from "@react-navigation/native";
|
|
|
|
var winWidth = Dimensions.get("window").width; //full width
|
|
|
|
const accordionData = [
|
|
{
|
|
title: "Về chúng tôi",
|
|
links: [
|
|
{ title: "Độc quyền", route: "" },
|
|
{ title: "Mua online", route: "" },
|
|
{ title: "Bộ sưu tập", route: "" },
|
|
{ title: "Tin tức", route: "article" },
|
|
],
|
|
},
|
|
{
|
|
title: "Tuyển dụng",
|
|
links: [
|
|
{ title: "Liên hệ", route: "contact" },
|
|
{ title: "Điều khoản", route: "" },
|
|
{ title: "Chính sách bảo mật", route: "" },
|
|
{ title: "Trở thành đối tác", route: "" },
|
|
],
|
|
},
|
|
{
|
|
title: "Liên kết",
|
|
links: [{ title: "Hurasoft.com", route: "https://www.hurasoft.vn" }],
|
|
},
|
|
{
|
|
title: "Giới thiệu",
|
|
content: "Chào mừng bạn đến với ứng dụng của chúng tôi.",
|
|
},
|
|
];
|
|
|
|
type Props = {
|
|
navigation: NavigationProp<any>;
|
|
activeTab?: string;
|
|
};
|
|
|
|
const Footer: React.FC<Props> = ({ navigation, activeTab = "homepage" }) => {
|
|
const [activeIndex, setActiveIndex] = useState(null);
|
|
|
|
const toggleAccordion = (index: any) => {
|
|
setActiveIndex(index === activeIndex ? null : index);
|
|
};
|
|
|
|
const handleLinkPress = (route: string) => {
|
|
if (route.startsWith("http")) {
|
|
// Mở link ngoài nếu là URL
|
|
Linking.openURL(route);
|
|
} else {
|
|
navigation?.navigate(route);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.footer}>
|
|
<View style={styles.spacer} />
|
|
<ScrollView style={styles.accordionContainer}>
|
|
{accordionData.map((item, index) => (
|
|
<View key={index}>
|
|
<TouchableOpacity
|
|
style={styles.accordionHeader}
|
|
onPress={() => toggleAccordion(index)}
|
|
>
|
|
<Text style={styles.accordionTitle}>{item.title}</Text>
|
|
<Ionicons
|
|
name={activeIndex === index ? "chevron-up" : "chevron-down"}
|
|
size={20}
|
|
color="#333"
|
|
/>
|
|
</TouchableOpacity>
|
|
<Collapsible collapsed={activeIndex !== index}>
|
|
{item.links?.map((link, linkIndex) => (
|
|
<TouchableOpacity
|
|
key={linkIndex}
|
|
style={styles.linkItem}
|
|
onPress={() => handleLinkPress(link.route)}
|
|
>
|
|
<Text style={styles.linkText}>{link.title}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</Collapsible>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
footer: {
|
|
width: "100%",
|
|
marginTop: 20,
|
|
},
|
|
spacer: {
|
|
display: "flex",
|
|
minHeight: 10,
|
|
width: "100%",
|
|
backgroundColor: "#1c039b",
|
|
},
|
|
accordionContainer: {
|
|
paddingLeft: 10,
|
|
paddingTop: 16,
|
|
marginBottom: 60,
|
|
width: winWidth - 10,
|
|
},
|
|
accordionHeader: {
|
|
backgroundColor: "#f5f5f5",
|
|
padding: 14,
|
|
borderRadius: 8,
|
|
marginBottom: 8,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
accordionTitle: {
|
|
fontSize: 16,
|
|
color: "#333",
|
|
fontWeight: 700,
|
|
},
|
|
accordionContent: {
|
|
backgroundColor: "#fff",
|
|
padding: 12,
|
|
marginBottom: 10,
|
|
color: "#555",
|
|
},
|
|
linkItem: {
|
|
paddingVertical: 8,
|
|
paddingLeft: 20,
|
|
},
|
|
linkText: {
|
|
fontSize: 14,
|
|
fontWeight: 500,
|
|
},
|
|
});
|
|
|
|
export default Footer;
|