Initial design of computer list

2025-04-16 22:14:31 -04:00
parent 874d7d6b86
commit c9f5c41ed3
35 changed files with 205 additions and 36 deletions
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -0,0 +1,87 @@
+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,
+}