thêm chức năng Sos và thêm glustack-ui

components/AlarmList.tsx

@@ -0,0 +1,76 @@
+import dayjs from "dayjs";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
+
+type AlarmItem = {
+  name: string;
+  t: number;
+  level: number;
+  id: string;
+};
+
+type AlarmProp = {
+  alarmsData: AlarmItem[];
+  onPress?: (alarm: AlarmItem) => void;
+};
+
+const AlarmList = ({ alarmsData, onPress }: AlarmProp) => {
+  const sortedAlarmsData = [...alarmsData].sort((a, b) => b.level - a.level);
+  return (
+    <FlatList
+      data={sortedAlarmsData}
+      renderItem={({ item }) => (
+        <TouchableOpacity
+          onPress={() => onPress?.(item)}
+          className="flex flex-row gap-5 p-3 justify-start items-baseline w-full"
+        >
+          <View
+            className={`flex-none h-3 w-3 rounded-full ${getBackgroundColorByLevel(
+              item.level
+            )}`}
+          ></View>
+          <View className="flex">
+            <Text className={`grow text-lg ${getTextColorByLevel(item.level)}`}>
+              {item.name}
+            </Text>
+            <Text className="grow text-md text-gray-400">
+              {formatTimestamp(item.t)}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      )}
+      keyExtractor={(item) => item.id}
+    />
+  );
+};
+
+const getBackgroundColorByLevel = (level: number) => {
+  switch (level) {
+    case 1:
+      return "bg-yellow-500";
+    case 2:
+      return "bg-orange-500";
+    case 3:
+      return "bg-red-500";
+    default:
+      return "bg-gray-500";
+  }
+};
+
+const getTextColorByLevel = (level: number) => {
+  switch (level) {
+    case 1:
+      return "text-yellow-600";
+    case 2:
+      return "text-orange-600";
+    case 3:
+      return "text-red-600";
+    default:
+      return "text-gray-600";
+  }
+};
+
+const formatTimestamp = (timestamp: number) => {
+  return dayjs.unix(timestamp).format("DD/MM/YYYY HH:mm:ss");
+};
+
+export default AlarmList;