update 19/7
This commit is contained in:
BIN
assets/images/lienkien-ram.png
Normal file
BIN
assets/images/lienkien-ram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
255
src/components/buildpc/CreateBuildpc.tsx
Normal file
255
src/components/buildpc/CreateBuildpc.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
ScrollView,
|
||||||
|
TouchableOpacity,
|
||||||
|
Image,
|
||||||
|
StyleSheet,
|
||||||
|
Dimensions,
|
||||||
|
TextInput,
|
||||||
|
} from "react-native";
|
||||||
|
import PopupBuildpc from "@components/buildpc/PopupBuildpc"; // Bạn cần tự tạo modal này trong React Native
|
||||||
|
import Feather from "@expo/vector-icons/Feather";
|
||||||
|
import AntDesign from "@expo/vector-icons/AntDesign";
|
||||||
|
const { width } = Dimensions.get("window");
|
||||||
|
|
||||||
|
export function CreateBuildpc() {
|
||||||
|
const [showPopup, setShowPopup] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ScrollView style={styles.container}>
|
||||||
|
{/* Item CPU */}
|
||||||
|
<View style={styles.itemRow}>
|
||||||
|
<Text style={styles.componentTitle}>CPU</Text>
|
||||||
|
<View style={styles.productInfo}>
|
||||||
|
<View style={styles.productLeft}>
|
||||||
|
<View style={styles.infolinhkien}>
|
||||||
|
<Image
|
||||||
|
source={require("../../../assets/images/lienkien-ram.png")}
|
||||||
|
style={styles.productImage}
|
||||||
|
resizeMode="contain"
|
||||||
|
/>
|
||||||
|
<Text style={styles.productName}>
|
||||||
|
AMD Ryzen 7 9800x3D 4.7 GHz 8-Core Processor
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.boxQlt}>
|
||||||
|
<Text>Số lượng</Text>
|
||||||
|
<TextInput
|
||||||
|
value="111"
|
||||||
|
style={styles.inputQl}
|
||||||
|
keyboardType="numeric"
|
||||||
|
placeholder="Nhập số"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ marginRight: 10, fontSize: 13 }}>Giá bán:</Text>
|
||||||
|
<Text style={styles.oldPrice}>4.700.000 Vnđ</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ marginRight: 10, fontSize: 13 }}>Khuyến mãi:</Text>
|
||||||
|
<Text style={styles.discount}>20%</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ marginRight: 10, fontSize: 13 }}>Thành tiền:</Text>
|
||||||
|
<Text style={styles.totalPrice}>4.000.000đ</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.supplierSection}>
|
||||||
|
<Text style={{ marginRight: 10, fontSize: 13 }}>
|
||||||
|
Nhà cung cấp
|
||||||
|
</Text>
|
||||||
|
<Image
|
||||||
|
source={require("../../../assets/images/logo-hacom.png")}
|
||||||
|
style={styles.supplierLogo}
|
||||||
|
resizeMode="contain"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View style={styles.buttonGroup}>
|
||||||
|
<TouchableOpacity style={styles.buyButton}>
|
||||||
|
<Feather name="edit" size={24} color="#1877f2" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.removeButton}>
|
||||||
|
<AntDesign name="delete" size={24} color="#ff0000" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{/* Thêm lựa chọn CPU */}
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.addButton}
|
||||||
|
onPress={() => setShowPopup(true)}
|
||||||
|
>
|
||||||
|
<Text style={styles.addButtonText}>+ Chọn thêm CPU</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
{/* Tổng tiền */}
|
||||||
|
<View style={styles.totalSection}>
|
||||||
|
<Text style={styles.totalText}>Tổng tiền 2 sản phẩm: 8.000.000đ</Text>
|
||||||
|
<View style={styles.totalButtons}>
|
||||||
|
<TouchableOpacity style={styles.printButton}>
|
||||||
|
<Text>🖨️ In đơn hàng</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.checkoutButton}>
|
||||||
|
<Text style={styles.checkoutText}>Mua hàng tại Hacom</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
{/* Popup */}
|
||||||
|
{showPopup && (
|
||||||
|
<PopupBuildpc visible={showPopup} onClose={() => setShowPopup(false)} />
|
||||||
|
)}
|
||||||
|
</ScrollView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CreateBuildpc;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
},
|
||||||
|
componentTitle: {
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 15,
|
||||||
|
marginBottom: 5,
|
||||||
|
},
|
||||||
|
itemRow: {
|
||||||
|
paddingVertical: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderColor: "#ccc",
|
||||||
|
},
|
||||||
|
|
||||||
|
productInfo: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
productLeft: {
|
||||||
|
width: width - 100,
|
||||||
|
},
|
||||||
|
infolinhkien: {
|
||||||
|
flexDirection: "row",
|
||||||
|
},
|
||||||
|
productImage: {
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
marginRight: 10,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#ccc",
|
||||||
|
},
|
||||||
|
productName: {
|
||||||
|
flexShrink: 1,
|
||||||
|
},
|
||||||
|
inputQl: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#e3e3e3",
|
||||||
|
fontSize: 13,
|
||||||
|
width: 64,
|
||||||
|
height: 30,
|
||||||
|
marginLeft: 10,
|
||||||
|
paddingVertical: 0,
|
||||||
|
paddingHorizontal: 6,
|
||||||
|
borderRadius: 4,
|
||||||
|
paddingLeft: 10,
|
||||||
|
paddingRight: 10,
|
||||||
|
lineHeight: 20,
|
||||||
|
includeFontPadding: false,
|
||||||
|
},
|
||||||
|
boxQlt: {
|
||||||
|
marginBottom: 15,
|
||||||
|
marginTop: 10,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
height: 30,
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
oldPrice: {},
|
||||||
|
discount: {},
|
||||||
|
totalPrice: {
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
supplierSection: {
|
||||||
|
alignItems: "center",
|
||||||
|
flexDirection: "row",
|
||||||
|
},
|
||||||
|
supplierLogo: {
|
||||||
|
width: 60,
|
||||||
|
height: 30,
|
||||||
|
marginBottom: 6,
|
||||||
|
},
|
||||||
|
buttonGroup: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
buyButton: {
|
||||||
|
marginRight: 6,
|
||||||
|
},
|
||||||
|
removeButton: {
|
||||||
|
paddingVertical: 2,
|
||||||
|
},
|
||||||
|
addButton: {
|
||||||
|
marginTop: 12,
|
||||||
|
backgroundColor: "#d4d4d4",
|
||||||
|
borderRadius: 4,
|
||||||
|
paddingVertical: 6,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
addButtonText: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
totalSection: {
|
||||||
|
marginTop: 24,
|
||||||
|
},
|
||||||
|
totalText: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "#dc2626",
|
||||||
|
textAlign: "right",
|
||||||
|
},
|
||||||
|
totalButtons: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
marginTop: 12,
|
||||||
|
},
|
||||||
|
printButton: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#b3b3b3",
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 8,
|
||||||
|
marginRight: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
checkoutButton: {
|
||||||
|
backgroundColor: "#5b21b6",
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
checkoutText: {
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
});
|
||||||
98
src/components/buildpc/PopupBuildpc.tsx
Normal file
98
src/components/buildpc/PopupBuildpc.tsx
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Modal,
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
} from "react-native";
|
||||||
|
import { Ionicons } from "@expo/vector-icons"; // hoặc react-native-vector-icons
|
||||||
|
|
||||||
|
interface PopupBuildpcProps {
|
||||||
|
visible: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PopupBuildpc({ visible, onClose }: PopupBuildpcProps) {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
animationType="fade"
|
||||||
|
transparent={true}
|
||||||
|
visible={visible}
|
||||||
|
onRequestClose={onClose}
|
||||||
|
>
|
||||||
|
<View style={styles.overlay}>
|
||||||
|
<View style={styles.modalContent}>
|
||||||
|
{/* Close button */}
|
||||||
|
<TouchableOpacity style={styles.closeBtn} onPress={onClose}>
|
||||||
|
<Ionicons name="close" size={24} color="#000" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<Text style={styles.title}>Chọn linh kiện thay thế</Text>
|
||||||
|
|
||||||
|
{/* List of products (giả lập) */}
|
||||||
|
<ScrollView>
|
||||||
|
{[1, 2, 3].map((item) => (
|
||||||
|
<View key={item} style={styles.item}>
|
||||||
|
<Text style={styles.itemText}>Linh kiện {item}</Text>
|
||||||
|
<TouchableOpacity style={styles.selectButton}>
|
||||||
|
<Text style={styles.selectButtonText}>Chọn</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
overlay: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: "rgba(0,0,0,0.4)",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
modalContent: {
|
||||||
|
width: "90%",
|
||||||
|
maxHeight: "80%",
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 20,
|
||||||
|
position: "relative",
|
||||||
|
},
|
||||||
|
closeBtn: {
|
||||||
|
position: "absolute",
|
||||||
|
right: 16,
|
||||||
|
top: 16,
|
||||||
|
zIndex: 10,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: "bold",
|
||||||
|
marginBottom: 16,
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
paddingVertical: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderColor: "#e5e7eb",
|
||||||
|
},
|
||||||
|
itemText: {
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
selectButton: {
|
||||||
|
backgroundColor: "#2563eb",
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 6,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
selectButtonText: {
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -6,6 +6,7 @@ import HomeScreen from "../screens/HomeScreen";
|
|||||||
import ProductListBig from "../screens/product/ProductListBig";
|
import ProductListBig from "../screens/product/ProductListBig";
|
||||||
import ProductList from "../screens/product/ProductList";
|
import ProductList from "../screens/product/ProductList";
|
||||||
import ProductDetail from "../screens/product/ProductDetail";
|
import ProductDetail from "../screens/product/ProductDetail";
|
||||||
|
import Buildpc from "../screens/buildpc/Buildpc";
|
||||||
|
|
||||||
const Stack = createStackNavigator();
|
const Stack = createStackNavigator();
|
||||||
|
|
||||||
@@ -19,6 +20,7 @@ const AppNavigator: React.FC = () => {
|
|||||||
<Stack.Screen name="productlist" component={ProductListBig} />
|
<Stack.Screen name="productlist" component={ProductListBig} />
|
||||||
<Stack.Screen name="productlistmain" component={ProductList} />
|
<Stack.Screen name="productlistmain" component={ProductList} />
|
||||||
<Stack.Screen name="productdetail" component={ProductDetail} />
|
<Stack.Screen name="productdetail" component={ProductDetail} />
|
||||||
|
<Stack.Screen name="buildpc" component={Buildpc} />
|
||||||
</Stack.Navigator>
|
</Stack.Navigator>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -28,9 +28,9 @@ import Footer from "../components/footer/Footer";
|
|||||||
var winWidth = Dimensions.get("window").width; //full width
|
var winWidth = Dimensions.get("window").width; //full width
|
||||||
var winHeight = Dimensions.get("window").height; //full height
|
var winHeight = Dimensions.get("window").height; //full height
|
||||||
const ratio = winWidth / 930;
|
const ratio = winWidth / 930;
|
||||||
|
|
||||||
const HomeScreen: React.FC = () => {
|
const HomeScreen: React.FC = () => {
|
||||||
const navigation = useNavigation<NavigationProp<any>>();
|
const navigation = useNavigation<NavigationProp<any>>();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppLayout activeTab="homepage">
|
<AppLayout activeTab="homepage">
|
||||||
<ScrollView>
|
<ScrollView>
|
||||||
@@ -111,9 +111,13 @@ const SliderHome = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const BoxMenuHome = () => {
|
const BoxMenuHome = () => {
|
||||||
|
const navigation = useNavigation<NavigationProp<any>>();
|
||||||
return (
|
return (
|
||||||
<View style={styles.boxMenuHome}>
|
<View style={styles.boxMenuHome}>
|
||||||
<TouchableOpacity style={styles.MenuItem}>
|
<TouchableOpacity
|
||||||
|
style={styles.MenuItem}
|
||||||
|
onPress={() => navigation.navigate("buildpc" as never)}
|
||||||
|
>
|
||||||
<View style={styles.boxIconMenu}>
|
<View style={styles.boxIconMenu}>
|
||||||
<Image
|
<Image
|
||||||
source={require("../../assets/images/icon_buildpc.png")}
|
source={require("../../assets/images/icon_buildpc.png")}
|
||||||
|
|||||||
192
src/screens/buildpc/Buildpc.tsx
Normal file
192
src/screens/buildpc/Buildpc.tsx
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
TextInput,
|
||||||
|
TouchableOpacity,
|
||||||
|
ScrollView,
|
||||||
|
StyleSheet,
|
||||||
|
Dimensions,
|
||||||
|
} from "react-native";
|
||||||
|
import AppLayout from "@layouts/AppLayout";
|
||||||
|
import { Ionicons } from "@expo/vector-icons"; // hoặc icon_2025 nếu bạn có icon font riêng
|
||||||
|
import CreateBuildpc from "@components/buildpc/CreateBuildpc"; // component con bạn tự tạo
|
||||||
|
const { width } = Dimensions.get("window");
|
||||||
|
import Octicons from "@expo/vector-icons/Octicons";
|
||||||
|
|
||||||
|
export default function Buildpc() {
|
||||||
|
return (
|
||||||
|
<AppLayout activeTab="buildpc">
|
||||||
|
<ScrollView style={styles.container}>
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<View style={styles.breadcrumb}>
|
||||||
|
<View style={styles.breadcrumbItem}>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<Ionicons
|
||||||
|
name="home"
|
||||||
|
size={16}
|
||||||
|
color="#637381"
|
||||||
|
style={styles.icon}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.angle}>›</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.breadcrumbItem}>
|
||||||
|
<Text style={styles.text}>Tạo máy tính riêng của bạn</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Buttons Bắt đầu/So sánh */}
|
||||||
|
<View style={styles.buttonWrapper}>
|
||||||
|
<TouchableOpacity style={styles.primaryButton}>
|
||||||
|
<Text style={styles.primaryButtonText}>Bắt đầu tạo</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity style={styles.secondaryButton}>
|
||||||
|
<Text style={styles.secondaryButtonText}>
|
||||||
|
So sánh giá tại các cửa hàng
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Action Bar */}
|
||||||
|
<View style={styles.actionBar}>
|
||||||
|
{/* Share link */}
|
||||||
|
<View style={styles.inputBox}>
|
||||||
|
<Octicons
|
||||||
|
name="copy"
|
||||||
|
size={18}
|
||||||
|
color="black"
|
||||||
|
style={styles.iconAction}
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
value="https://bestpc.vn/restricted.php"
|
||||||
|
style={styles.input}
|
||||||
|
editable={false}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Đặt tên */}
|
||||||
|
<View style={styles.inputBox}>
|
||||||
|
<Text style={{ marginLeft: 10 }}>Đặt tên:</Text>
|
||||||
|
<TextInput placeholder="Nhập tên" style={styles.input} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<View style={styles.buttonGroup}>
|
||||||
|
<ActionButton icon="copy-outline" label="Copy" />
|
||||||
|
<ActionButton icon="download-outline" label="Tải xuống" />
|
||||||
|
<ActionButton icon="refresh-outline" label="Làm mới" />
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Buildpc Content */}
|
||||||
|
<CreateBuildpc />
|
||||||
|
</ScrollView>
|
||||||
|
</AppLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ActionButton({ icon, label }: { icon: string; label: string }) {
|
||||||
|
return (
|
||||||
|
<TouchableOpacity style={styles.actionButton}>
|
||||||
|
<Ionicons name={icon as any} size={16} color="#000" />
|
||||||
|
<Text style={{ marginLeft: 5 }}>{label}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
paddingBottom: 100,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
},
|
||||||
|
breadcrumb: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
paddingVertical: 12,
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
breadcrumbItem: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
marginRight: 8,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: "#000",
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
marginRight: 5,
|
||||||
|
},
|
||||||
|
angle: {
|
||||||
|
marginLeft: 12,
|
||||||
|
color: "#888",
|
||||||
|
},
|
||||||
|
actionBar: {
|
||||||
|
marginTop: 12,
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
inputBox: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
borderColor: "#ccc",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 8,
|
||||||
|
height: 48,
|
||||||
|
flex: 1,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
width: width - 20,
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
flex: 1,
|
||||||
|
height: "100%",
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
},
|
||||||
|
iconAction: {
|
||||||
|
marginRight: 6,
|
||||||
|
color: "#888",
|
||||||
|
},
|
||||||
|
buttonGroup: {
|
||||||
|
flexDirection: "row",
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
actionButton: {
|
||||||
|
flex: 1,
|
||||||
|
height: 35,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#ccc",
|
||||||
|
borderRadius: 8,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
marginHorizontal: 2,
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
},
|
||||||
|
buttonWrapper: {
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 10,
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
primaryButton: {
|
||||||
|
backgroundColor: "#5B21B6",
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
primaryButtonText: {
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: "bold",
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
secondaryButton: {
|
||||||
|
backgroundColor: "#F5F5F5",
|
||||||
|
padding: 10,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
secondaryButtonText: {
|
||||||
|
color: "#666",
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user