332 lines
10 KiB
TypeScript
332 lines
10 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
Modal,
|
|
Image,
|
|
Animated,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { useAuth } from "../../hooks/useAuth";
|
|
|
|
// Side Menu Component
|
|
function SideMenu({ visible, onClose }) {
|
|
const navigation = useNavigation();
|
|
const slideAnim = React.useRef(new Animated.Value(visible ? 0 : -300)).current;
|
|
const { user } = useAuth();
|
|
|
|
React.useEffect(() => {
|
|
Animated.timing(slideAnim, {
|
|
toValue: visible ? 0 : -300,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
}, [visible, slideAnim]);
|
|
|
|
const menuItems = [
|
|
{ id: "home", label: "Homepage", icon: "home", screen: "home" },
|
|
{ id: "discover", label: "Discover", icon: "search", screen: "discover" },
|
|
{ id: "orders", label: "My Order", icon: "list", screen: "orders" },
|
|
{ id: "profile", label: "My profile", icon: "person", screen: "account" },
|
|
];
|
|
|
|
const otherItems = [
|
|
{ id: "setting", label: "Setting", icon: "settings", screen: "setting" },
|
|
{ id: "support", label: "Support", icon: "help-circle", screen: "support" },
|
|
{ id: "about", label: "About us", icon: "information-circle", screen: "about" },
|
|
];
|
|
|
|
const dropdownItems = [
|
|
{ id: "cart", label: "Giỏ hàng", icon: "cart", screen: "cart" },
|
|
{ id: "wishlist", label: "Yêu thích", icon: "heart", screen: "wishlist" },
|
|
{ id: "checkout", label: "Thanh toán", icon: "checkmark-circle", screen: "checkout" },
|
|
];
|
|
|
|
return (
|
|
<Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
|
|
<View style={{ flex: 1, flexDirection: "row" }}>
|
|
{/* Overlay */}
|
|
<TouchableOpacity
|
|
style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.3)" }}
|
|
onPress={onClose}
|
|
/>
|
|
|
|
{/* Animated Menu */}
|
|
<Animated.View
|
|
style={{
|
|
width: 280,
|
|
backgroundColor: "#fff",
|
|
transform: [{ translateX: slideAnim }],
|
|
paddingTop: 40,
|
|
paddingHorizontal: 16,
|
|
}}
|
|
>
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
{/* User Profile */}
|
|
<View style={{ flexDirection: "row", alignItems: "center", marginBottom: 32 }}>
|
|
<View
|
|
style={{
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 25,
|
|
backgroundColor: "#E8B4A0",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginRight: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="person" size={28} color="#fff" />
|
|
</View>
|
|
<View>
|
|
<Text style={{ fontSize: 14, fontWeight: "600", color: "#333" }}>
|
|
{user?.email?.split("@")[0] || "Guest"}
|
|
</Text>
|
|
<Text style={{ fontSize: 11, color: "#999" }}>
|
|
{user?.email || "guest@example.com"}
|
|
</Text>
|
|
|
|
</View>
|
|
</View>
|
|
|
|
{/* Main Menu */}
|
|
{menuItems.map((item) => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
|
|
onPress={() => {
|
|
navigation.navigate(item.screen);
|
|
onClose();
|
|
}}
|
|
>
|
|
<Ionicons name={item.icon} size={20} color="#6C5CE7" />
|
|
<Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
|
|
{item.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
|
|
{/* Other Section */}
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontWeight: "600",
|
|
color: "#999",
|
|
marginTop: 24,
|
|
marginBottom: 16,
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
OTHER
|
|
</Text>
|
|
|
|
{otherItems.map((item) => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
|
|
onPress={() => {
|
|
navigation.navigate(item.screen);
|
|
onClose();
|
|
}}
|
|
>
|
|
<Ionicons name={item.icon} size={20} color="#6C5CE7" />
|
|
<Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
|
|
{item.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
|
|
{/* Dropdown Items Section */}
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontWeight: "600",
|
|
color: "#999",
|
|
marginTop: 24,
|
|
marginBottom: 16,
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
QUICK ACCESS
|
|
</Text>
|
|
|
|
{dropdownItems.map((item) => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={{ flexDirection: "row", alignItems: "center", marginBottom: 20 }}
|
|
onPress={() => {
|
|
navigation.navigate(item.screen);
|
|
onClose();
|
|
}}
|
|
>
|
|
<Ionicons name={item.icon} size={20} color="#6C5CE7" />
|
|
<Text style={{ marginLeft: 16, fontSize: 14, color: "#333" }}>
|
|
{item.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
|
|
{/* Theme Toggle */}
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
marginTop: 32,
|
|
marginBottom: 40,
|
|
}}
|
|
>
|
|
<TouchableOpacity
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
backgroundColor: "#f5f5f5",
|
|
}}
|
|
>
|
|
<Ionicons name="sunny" size={16} color="#333" />
|
|
<Text style={{ marginLeft: 6, fontSize: 12, color: "#333" }}>Light</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
}}
|
|
>
|
|
<Ionicons name="moon" size={16} color="#999" />
|
|
<Text style={{ marginLeft: 6, fontSize: 12, color: "#999" }}>Dark</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</Animated.View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
// Product Card Component
|
|
function ProductCard({ product }) {
|
|
return (
|
|
<View style={{ flex: 1, margin: 8 }}>
|
|
<View
|
|
style={{
|
|
backgroundColor: "#f5f5f5",
|
|
borderRadius: 8,
|
|
height: 200,
|
|
marginBottom: 8,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Ionicons name="image" size={40} color="#ccc" />
|
|
</View>
|
|
<Text style={{ fontSize: 12, fontWeight: "600", color: "#333", marginBottom: 4 }}>
|
|
{product.name}
|
|
</Text>
|
|
<Text style={{ fontSize: 14, fontWeight: "700", color: "#6C5CE7" }}>
|
|
{product.price} đ
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
// Home Screen
|
|
export default function HomeScreen() {
|
|
const [sideMenuVisible, setSideMenuVisible] = useState(false);
|
|
|
|
const featureProducts = [
|
|
{ id: 1, name: "iphone 15 Pro Max 256GB", price: "29.990.000" },
|
|
{ id: 2, name: "Samsung Galaxy S24 Ultra", price: "27.990.000" },
|
|
{ id: 3, name: "Xiaomi 14 Ultra", price: "24.990.0000" },
|
|
];
|
|
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: "#fff", paddingTop: 20 }}>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#eee",
|
|
}}
|
|
>
|
|
<TouchableOpacity onPress={() => setSideMenuVisible(true)}>
|
|
<Ionicons name="menu" size={24} color="#333" />
|
|
</TouchableOpacity>
|
|
<Text style={{ fontSize: 18, fontWeight: "700", color: "#333" }}>
|
|
Gemstore
|
|
</Text>
|
|
<TouchableOpacity>
|
|
<Ionicons name="notifications" size={24} color="#333" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Main Content */}
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
{/* Banner */}
|
|
<View
|
|
style={{
|
|
height: 200,
|
|
backgroundColor: "#d4a574",
|
|
marginHorizontal: 16,
|
|
marginVertical: 16,
|
|
borderRadius: 12,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
|
|
Autumn
|
|
</Text>
|
|
<Text style={{ fontSize: 24, fontWeight: "700", color: "#fff" }}>
|
|
Collection
|
|
</Text>
|
|
<Text style={{ fontSize: 20, fontWeight: "600", color: "#fff", marginTop: 8 }}>
|
|
2022
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Feature Products */}
|
|
<View style={{ paddingHorizontal: 16, marginBottom: 24 }}>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 16, fontWeight: "700", color: "#333" }}>
|
|
Feature Products
|
|
</Text>
|
|
<TouchableOpacity>
|
|
<Text style={{ fontSize: 12, color: "#6C5CE7" }}>Show all</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
|
|
{featureProducts.map((product) => (
|
|
<ProductCard key={product.id} product={product} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* Side Menu */}
|
|
<SideMenu
|
|
visible={sideMenuVisible}
|
|
onClose={() => setSideMenuVisible(false)}
|
|
/>
|
|
</View>
|
|
);
|
|
} |