v1.0.0
This commit is contained in:
@@ -1,433 +1,356 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
FlatList,
|
||||
TouchableOpacity,
|
||||
StyleSheet,
|
||||
Alert,
|
||||
ActivityIndicator,
|
||||
Modal,
|
||||
TextInput,
|
||||
ScrollView,
|
||||
} from 'react-native';
|
||||
import { useRouter } from 'expo-router';
|
||||
import api from '../src/services/api';
|
||||
import { NetworkScanResult } from '../src/types';
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useColorScheme } from "../hooks/use-color-scheme";
|
||||
import api from "../src/services/api";
|
||||
import { NetworkScanResult } from "../src/types";
|
||||
import { SymbolView } from "expo-symbols";
|
||||
import * as Burnt from "burnt";
|
||||
|
||||
export default function ScanDevicesScreen() {
|
||||
const router = useRouter();
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [devices, setDevices] = useState<NetworkScanResult[]>([]);
|
||||
const [selectedDevice, setSelectedDevice] = useState<NetworkScanResult | null>(null);
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
mac: '',
|
||||
ip: '',
|
||||
netmask: '255.255.255.0',
|
||||
broadcast: '',
|
||||
secureOnPassword: '',
|
||||
port: '9',
|
||||
});
|
||||
const router = useRouter();
|
||||
const colorScheme = useColorScheme() ?? "light";
|
||||
const isDark = colorScheme === "dark";
|
||||
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
||||
const cardBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(255, 255, 255, 0.8)";
|
||||
const primary = isDark ? "#0A84FF" : "#007AFF";
|
||||
const primaryPressed = isDark ? "#004BB5" : "#0051CC";
|
||||
const textColor = isDark ? "#fff" : "#333";
|
||||
const subText = isDark ? "#c6c6c8" : "#666";
|
||||
|
||||
const handleScan = async () => {
|
||||
setScanning(true);
|
||||
try {
|
||||
const results = await api.scanNetwork();
|
||||
setDevices(results);
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to scan network');
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [devices, setDevices] = useState<NetworkScanResult[]>([]);
|
||||
|
||||
const handleAddFromScan = (device: NetworkScanResult) => {
|
||||
const deviceName = device.name || device.hostname || `Device ${device.ip || device.ip_address}`;
|
||||
const deviceIP = device.ip || device.ip_address || '';
|
||||
const deviceMAC = device.mac || device.mac_address || '';
|
||||
const deviceVendor = device.mac_vendor || '';
|
||||
|
||||
setFormData({
|
||||
name: deviceName,
|
||||
mac: deviceMAC,
|
||||
ip: deviceIP,
|
||||
netmask: '255.255.255.0',
|
||||
broadcast: '',
|
||||
secureOnPassword: '',
|
||||
port: '9',
|
||||
});
|
||||
setSelectedDevice(device);
|
||||
setShowAddModal(true);
|
||||
};
|
||||
const handleScan = async () => {
|
||||
setScanning(true);
|
||||
try {
|
||||
const results = await api.scanNetwork();
|
||||
setDevices(results);
|
||||
} catch (error: any) {
|
||||
Alert.alert("Error", error.message || "Failed to scan network");
|
||||
} finally {
|
||||
setScanning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveDevice = async () => {
|
||||
if (!formData.name || !formData.mac || !formData.ip) {
|
||||
Alert.alert('Error', 'Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
const handleAddFromScan = async (device: NetworkScanResult) => {
|
||||
const deviceName =
|
||||
device.name ||
|
||||
device.hostname ||
|
||||
`Device ${device.ip || device.ip_address}`;
|
||||
const deviceIP = device.ip || device.ip_address || "";
|
||||
const deviceMAC = device.mac || device.mac_address || "";
|
||||
|
||||
try {
|
||||
await api.createDevice({
|
||||
name: formData.name,
|
||||
mac: formData.mac,
|
||||
ip: formData.ip,
|
||||
netmask: formData.netmask,
|
||||
broadcast: formData.broadcast,
|
||||
secureOnPassword: formData.secureOnPassword,
|
||||
port: parseInt(formData.port) || 9,
|
||||
groups: [],
|
||||
status: 'offline',
|
||||
});
|
||||
Alert.alert('Success', 'Device added successfully');
|
||||
setShowAddModal(false);
|
||||
router.back();
|
||||
} catch (error: any) {
|
||||
Alert.alert('Error', error.message || 'Failed to add device');
|
||||
}
|
||||
};
|
||||
try {
|
||||
await api.createDevice({
|
||||
name: deviceName,
|
||||
mac: deviceMAC,
|
||||
ip: deviceIP,
|
||||
netmask: "255.255.255.0",
|
||||
broadcast: "",
|
||||
secureOnPassword: "",
|
||||
port: 9,
|
||||
groups: [],
|
||||
status: "offline",
|
||||
});
|
||||
Burnt.toast({
|
||||
title: "Success",
|
||||
preset: "done",
|
||||
message: `Added ${deviceName} successfully`,
|
||||
});
|
||||
router.back();
|
||||
} catch (error: any) {
|
||||
Burnt.toast({
|
||||
title: "Error",
|
||||
preset: "error",
|
||||
message: error.message || "Failed to add device",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const renderDevice = ({ item }: { item: NetworkScanResult }) => {
|
||||
const displayName = item.name || item.hostname || 'Unknown Device';
|
||||
const displayIP = item.ip || item.ip_address || '';
|
||||
const displayMAC = item.mac || item.mac_address || '';
|
||||
const displayVendor = item.mac_vendor || '';
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={styles.deviceCard}
|
||||
onPress={() => handleAddFromScan(item)}
|
||||
>
|
||||
<View style={styles.deviceInfo}>
|
||||
<Text style={styles.deviceName} numberOfLines={1}>{displayName}</Text>
|
||||
<Text style={styles.deviceDetail}>{displayIP}</Text>
|
||||
<Text style={styles.deviceDetail}>{displayMAC}</Text>
|
||||
{displayVendor && displayVendor !== 'Unknown' && (
|
||||
<Text style={styles.vendorText}>{displayVendor}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.addButton}>
|
||||
<Text style={styles.addButtonText}>+</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
const renderDevice = ({ item }: { item: NetworkScanResult }) => {
|
||||
const displayName = item.name || item.hostname || "Unknown Device";
|
||||
const displayIP = item.ip || item.ip_address || "";
|
||||
const displayMAC = item.mac || item.mac_address || "";
|
||||
const displayVendor = item.mac_vendor || "";
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerText}>Network Scan</Text>
|
||||
<Text style={styles.headerSubtext}>
|
||||
Discover devices on your local network
|
||||
</Text>
|
||||
</View>
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.deviceCard,
|
||||
{
|
||||
backgroundColor: cardBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.deviceInfo}>
|
||||
<Text
|
||||
style={[styles.deviceName, { color: textColor }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
<Text style={[styles.deviceDetail, { color: subText }]}>
|
||||
{displayIP}
|
||||
</Text>
|
||||
<Text style={[styles.deviceDetail, { color: subText }]}>
|
||||
{displayMAC}
|
||||
</Text>
|
||||
{displayVendor && displayVendor !== "Unknown" && (
|
||||
<Text style={[styles.vendorText, { color: subText }]}>
|
||||
{displayVendor}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => handleAddFromScan(item)}>
|
||||
<SymbolView
|
||||
name="plus.circle.fill"
|
||||
size={20}
|
||||
type="hierarchical"
|
||||
style={styles.addButton}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.scanButton, scanning && styles.scanButtonDisabled]}
|
||||
onPress={handleScan}
|
||||
disabled={scanning}
|
||||
>
|
||||
{scanning ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.scanButtonText}>Scan Network</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: bgColor }]}>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.headerText, { color: textColor }]}>
|
||||
Add Devices
|
||||
</Text>
|
||||
<Text style={[styles.headerSubtext, { color: subText }]}>
|
||||
Discover devices on your local network
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.infoText}>
|
||||
Note: This requires the server to have nmap installed and may take several minutes.
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.scanButton,
|
||||
{
|
||||
backgroundColor: scanning ? primaryPressed : primary,
|
||||
},
|
||||
]}
|
||||
onPress={handleScan}
|
||||
disabled={scanning}
|
||||
>
|
||||
{scanning ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<Text style={[styles.scanButtonText, { color: "#fff" }]}>
|
||||
Scan Network
|
||||
</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{devices.length > 0 && (
|
||||
<View style={styles.resultsContainer}>
|
||||
<Text style={styles.resultsHeader}>Discovered Devices ({devices.length})</Text>
|
||||
<FlatList
|
||||
data={devices}
|
||||
renderItem={renderDevice}
|
||||
keyExtractor={(item, index) => `${item.ip || item.ip_address || index}-${index}`}
|
||||
contentContainerStyle={styles.list}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
<Text style={[styles.infoText, { color: subText }]}>
|
||||
Note: This requires the server to have nmap installed and may take
|
||||
several minutes.
|
||||
</Text>
|
||||
|
||||
{devices.length === 0 && !scanning && (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={styles.emptyText}>Tap "Scan Network" to discover devices</Text>
|
||||
</View>
|
||||
)}
|
||||
{devices.length > 0 && (
|
||||
<View style={styles.resultsContainer}>
|
||||
<Text style={[styles.resultsHeader, { color: textColor }]}>
|
||||
Discovered Devices ({devices.length})
|
||||
</Text>
|
||||
<FlatList
|
||||
data={devices}
|
||||
renderItem={renderDevice}
|
||||
keyExtractor={(item, index) =>
|
||||
`${item.ip || item.ip_address || index}-${index}`
|
||||
}
|
||||
contentContainerStyle={styles.list}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
visible={showAddModal}
|
||||
animationType="slide"
|
||||
transparent
|
||||
onRequestClose={() => setShowAddModal(false)}
|
||||
>
|
||||
<View>
|
||||
<View style={styles.modalContent}>
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={styles.modalTitle}>Add Device</Text>
|
||||
<TouchableOpacity onPress={() => setShowAddModal(false)}>
|
||||
<Text style={styles.closeButton}>✕</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.modalBody}>
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Device Name *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.name}
|
||||
onChangeText={(text) => setFormData({ ...formData, name: text })}
|
||||
placeholder="Device name"
|
||||
/>
|
||||
{selectedDevice?.mac_vendor && (
|
||||
<Text style={styles.hint}>
|
||||
Vendor: {selectedDevice.mac_vendor}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>MAC Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.mac}
|
||||
onChangeText={(text) => setFormData({ ...formData, mac: text })}
|
||||
placeholder="00:11:22:33:44:55"
|
||||
autoCapitalize="characters"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>IP Address *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.ip}
|
||||
onChangeText={(text) => setFormData({ ...formData, ip: text })}
|
||||
placeholder="192.168.1.100"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Netmask</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.netmask}
|
||||
onChangeText={(text) => setFormData({ ...formData, netmask: text })}
|
||||
placeholder="255.255.255.0"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Broadcast Address</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.broadcast}
|
||||
onChangeText={(text) => setFormData({ ...formData, broadcast: text })}
|
||||
placeholder="192.168.1.255"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.formGroup}>
|
||||
<Text style={styles.label}>Port</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={formData.port}
|
||||
onChangeText={(text) => setFormData({ ...formData, port: text })}
|
||||
placeholder="9"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.saveButton}
|
||||
onPress={handleSaveDevice}
|
||||
>
|
||||
<Text style={styles.saveButtonText}>Add Device</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
{devices.length === 0 && !scanning && (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Text style={styles.emptyText}>
|
||||
Tap "Scan Network" to discover devices
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
headerText: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerSubtext: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
},
|
||||
scanButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
marginBottom: 15,
|
||||
},
|
||||
scanButtonDisabled: {
|
||||
backgroundColor: '#ccc',
|
||||
},
|
||||
scanButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
resultsContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
resultsHeader: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 15,
|
||||
},
|
||||
list: {
|
||||
gap: 10,
|
||||
},
|
||||
deviceCard: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
borderRadius: 16,
|
||||
padding: 15,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
deviceInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
deviceName: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginBottom: 4,
|
||||
},
|
||||
deviceDetail: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
marginBottom: 2,
|
||||
},
|
||||
vendorText: {
|
||||
fontSize: 12,
|
||||
color: '#999',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
addButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
backgroundColor: 'rgba(76, 175, 80, 0.9)',
|
||||
borderRadius: 22,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
addButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
color: '#999',
|
||||
textAlign: 'center',
|
||||
},
|
||||
modalBlur: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
maxHeight: '90%',
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
},
|
||||
closeButton: {
|
||||
fontSize: 24,
|
||||
color: '#999',
|
||||
padding: 8,
|
||||
},
|
||||
modalBody: {
|
||||
padding: 20,
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#333',
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
marginTop: 4,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: '#4CAF50',
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f5f5",
|
||||
padding: 20,
|
||||
},
|
||||
header: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
headerText: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerSubtext: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
},
|
||||
scanButton: {
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginBottom: 15,
|
||||
},
|
||||
scanButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
infoText: {
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
textAlign: "center",
|
||||
marginBottom: 20,
|
||||
},
|
||||
resultsContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
resultsHeader: {
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 15,
|
||||
},
|
||||
list: {
|
||||
gap: 10,
|
||||
},
|
||||
deviceCard: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
borderRadius: 16,
|
||||
padding: 15,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
deviceInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
deviceName: {
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: 4,
|
||||
},
|
||||
deviceDetail: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
marginBottom: 2,
|
||||
},
|
||||
vendorText: {
|
||||
fontSize: 12,
|
||||
color: "#999",
|
||||
fontStyle: "italic",
|
||||
},
|
||||
addButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
addButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 16,
|
||||
color: "#999",
|
||||
textAlign: "center",
|
||||
},
|
||||
modalBlur: {
|
||||
flex: 1,
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
modalContent: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.95)",
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
maxHeight: "90%",
|
||||
},
|
||||
modalHeader: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
},
|
||||
closeButton: {
|
||||
fontSize: 24,
|
||||
color: "#999",
|
||||
padding: 8,
|
||||
},
|
||||
modalBody: {
|
||||
padding: 20,
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: "#333",
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(0, 0, 0, 0.1)",
|
||||
borderRadius: 12,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
},
|
||||
hint: {
|
||||
fontSize: 12,
|
||||
color: "#666",
|
||||
marginTop: 4,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: "#4CAF50",
|
||||
borderRadius: 12,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
saveButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user