ui
This commit is contained in:
@@ -1,9 +1,332 @@
|
||||
import { View, Text } from "react-native";
|
||||
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" },
|
||||
];
|
||||
|
||||
export default function HomeScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>Chào mừng đến Trang chủ!</Text>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user