tieptk/bestpc_mobile
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Tieptk
2025-07-18 16:04:59 +07:00
parent 69f872f1c4
commit 3fa4622feb
67 changed files with 6361 additions and 48680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/footer/Footer.tsx
View File

@@ -1,101 +1,148 @@
import * as React from "react";
import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native";
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";
type FooterItemProps = {
label: string;
icon: string;
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 FooterItem = ({ label, icon }: FooterItemProps) => (
<TouchableOpacity style={styles.footerItem}>
<Text style={styles.footerItemText}>{label}</Text>
<Image
source={{ uri: icon }}
style={styles.footerItemIcon}
resizeMode="contain"
/>
</TouchableOpacity>
);
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);
}
};
const Footer = () => {
return (
<View style={styles.container}>
<View style={styles.footer}>
<View style={styles.spacer} />
<View style={styles.content}>
<FooterItem
label="Về chúng tôi"
icon="https://cdn.builder.io/api/v1/image/assets/TEMP/0f5cda0be55412240422e2274330e3f6e64023d3?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
/>
<FooterItem
label="Tuyển dụng"
icon="https://cdn.builder.io/api/v1/image/assets/TEMP/0f5cda0be55412240422e2274330e3f6e64023d3?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
/>
<FooterItem
label="Liên kết"
icon="https://cdn.builder.io/api/v1/image/assets/TEMP/0f5cda0be55412240422e2274330e3f6e64023d3?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
/>
<FooterItem
label="Giới thiệu"
icon="https://cdn.builder.io/api/v1/image/assets/TEMP/5263024b89e68e21be091071a684ede939b2cbf7?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756"
/>
<Image
source={{
uri: "https://cdn.builder.io/api/v1/image/assets/TEMP/e7727a56c76a2e7c02cd1646e68e8b20cefb30e1?placeholderIfAbsent=true&apiKey=1fa9f06a1e81406d92148011750a3756",
}}
style={styles.logo}
resizeMode="contain"
/>
</View>
<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({
container: {
alignSelf: "stretch",
marginTop: 28,
footer: {
width: "100%",
paddingBottom: 21,
marginTop: 20,
},
spacer: {
display: "flex",
minHeight: 10,
width: "100%",
backgroundColor: "#1c039b",
},
content: {
marginTop: 17,
width: "100%",
accordionContainer: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 16,
marginBottom: 60,
width: winWidth - 10,
},
footerItem: {
borderRadius: 4,
display: "flex",
paddingLeft: 9,
paddingRight: 9,
paddingTop: 6,
paddingBottom: 13,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
accordionHeader: {
backgroundColor: "#f5f5f5",
padding: 14,
borderRadius: 8,
marginBottom: 8,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
footerItemText: {
color: "#444",
fontFamily: "Shopee Display, -apple-system, Roboto, Helvetica, sans-serif",
fontSize: 13,
fontWeight: "700",
accordionTitle: {
fontSize: 16,
color: "#333",
fontWeight: 700,
},
footerItemIcon: {
width: 11,
height: 6,
marginTop: 7,
accordionContent: {
backgroundColor: "#fff",
padding: 12,
marginBottom: 10,
color: "#555",
},
logo: {
width: 95,
height: 40,
marginTop: 17,
marginLeft: 10,
linkItem: {
paddingVertical: 8,
paddingLeft: 20,
},
linkText: {
fontSize: 14,
fontWeight: 500,
},
});