products

app/(tabs)/account.tsx

@@ -1,9 +1,80 @@
-import { View, Text } from "react-native";
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function AccountScreen() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  const handleLogout = async () => {
+    Alert.alert("Đăng xuất", "Bạn có chắc muốn đăng xuất?", [
+      {
+        text: "Hủy",
+        style: "cancel",
+      },
+      {
+        text: "Đăng xuất",
+        style: "destructive",
+        onPress: async () => {
+          await AsyncStorage.removeItem("authToken");
+          router.replace("/"); // quay về màn hình đăng nhập
+        },
+      },
+    ]);
+  };
 
-export default function HomeScreen() {
   return (
-    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-      <Text>Chào mừng đến Tài khoản!</Text>
+    <View style={styles.container}>
+      {/* 🔘 Nút đăng xuất góc trên phải */}
+      <TouchableOpacity
+        style={[styles.logoutBtn, { top: insets.top + 10 }]} // đảm bảo không bị che bởi status bar
+        onPress={handleLogout}
+        activeOpacity={0.8}
+      >
+        <Text style={styles.logoutText}>Đăng xuất</Text>
+      </TouchableOpacity>
+
+      {/* Nội dung giữa màn hình */}
+      <View style={styles.centerContent}>
+        <Text style={styles.title}>Xin chào, User 👋</Text>
+      </View>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  centerContent: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "600",
+    marginBottom: 20,
+  },
+  logoutBtn: {
+    position: "absolute",
+    right: 16, // sát mép phải
+    backgroundColor: "#f44336",
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    zIndex: 999,
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.5,
+  },
+  logoutText: {
+    color: "#fff",
+    fontWeight: "700",
+    fontSize: 14,
+  },
+});