88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import {FlatList, Text, View, ColorValue, ListRenderItemInfo} from "react-native";
|
|
// @ts-ignore
|
|
import SwipeableFlatList from 'react-native-swipeable-list';
|
|
|
|
export default function Index() {
|
|
return (
|
|
<View style={{
|
|
backgroundColor: "#FFFFFF",
|
|
}}>
|
|
<ComputerList computers={[
|
|
{
|
|
name: "Test PC",
|
|
emoji: "💻",
|
|
background_color: '#D9D9D9',
|
|
mac_address: "00:1A:2B:3C:4D:5E",
|
|
},
|
|
{
|
|
name: "Another PC in the basement",
|
|
emoji: "💻",
|
|
background_color: '#D9D9D9',
|
|
mac_address: "00:1A:2B:3C:4D:5E",
|
|
}
|
|
]}/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function ComputerList(computers: { computers: Computer[] }) {
|
|
return (
|
|
<View>
|
|
<FlatList style={{
|
|
borderRadius: 25,
|
|
}} data={computers.computers} renderItem={({item}: ListRenderItemInfo<Computer>) =>
|
|
<View style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
paddingHorizontal: 15,
|
|
paddingVertical: 15,
|
|
gap: 60,
|
|
backgroundColor: '#FFFFFF'
|
|
}}>
|
|
<View style={{
|
|
width: 65,
|
|
height: 65,
|
|
borderRadius: 100,
|
|
backgroundColor: item.background_color,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}>
|
|
<Text style={{
|
|
fontSize: 28
|
|
}}>{item.emoji}</Text>
|
|
</View>
|
|
<View style={{
|
|
flexDirection: "column",
|
|
gap: 0,
|
|
padding: 0,
|
|
justifyContent: "center",
|
|
}}>
|
|
<Text style={{
|
|
fontSize: 18,
|
|
justifyContent: "flex-start",
|
|
}}>{item.name}</Text>
|
|
<Text style={{
|
|
fontSize: 12,
|
|
justifyContent: "flex-start",
|
|
color: '#979797'
|
|
}}>{item.mac_address}</Text>
|
|
</View>
|
|
</View>
|
|
}/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
type Server = {
|
|
name: string,
|
|
domain: string,
|
|
computers: Computer[],
|
|
}
|
|
|
|
type Computer = {
|
|
name: string,
|
|
emoji: string,
|
|
background_color: ColorValue,
|
|
mac_address: string,
|
|
}
|