feat: project init

src/app/_layout.tsx

@@ -3,18 +3,26 @@ import { Slot } from "expo-router";
 import { QueryClientProvider } from "react-query";
 import queryClient from "@/lib/queryClient";
 import { View } from "react-native";
-import { cn } from "@/lib/utils";
+import { cn, tw } from "@/lib/utils";
+import { useDeviceContext } from "twrnc";
 import { StatusBar } from "expo-status-bar";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const RootLayout = () => {
   const insets = useSafeAreaInsets();
+  useDeviceContext(tw);
 
   return (
     <QueryClientProvider client={queryClient}>
       <StatusBar style="auto" />
-      <View style={cn("flex-1 bg-white", { paddingTop: insets.top })}>
-        <Slot />
+      <View style={cn("flex-1 bg-[#f2f7fb]")}>
+        <View
+          style={cn("flex-1 mx-auto w-full max-w-xl", {
+            paddingTop: insets.top,
+          })}
+        >
+          <Slot />
+        </View>
       </View>
     </QueryClientProvider>
   );

src/app/_sections/Performance.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { AnimatedCircularProgress } from "react-native-circular-progress";
+import { InferResponseType } from "hono/client";
+import api from "@/lib/api";
+import Text from "@ui/Text";
+import { HStack, VStack } from "@ui/Stack";
+import Box from "@ui/Box";
+import ProcessList from "./ProcessList";
+import Divider from "@ui/Divider";
+import Button from "@ui/Button";
+import { Ionicons } from "@ui/Icons";
+
+type Props = {
+  data: InferResponseType<typeof api.system.$get>;
+};
+
+const Performance = ({ data: system }: Props) => {
+  const [showProcess, setShowProcess] = useState(false);
+
+  return (
+    <>
+      <Text className="text-lg font-medium mt-8">Performance</Text>
+
+      <Box className="px-4 py-6 mt-2 bg-white border border-gray-100 rounded-lg relative">
+        <HStack className="justify-evenly">
+          <VStack className="items-center">
+            <AnimatedCircularProgress
+              size={120}
+              width={15}
+              backgroundWidth={5}
+              fill={system?.perf.cpu.load || 0}
+              tintColor="#6366F1"
+              backgroundColor="#3d5875"
+              arcSweepAngle={240}
+              rotation={240}
+              lineCap="round"
+            >
+              {() => (
+                <Text>
+                  <Text className="text-2xl mr-0.5">
+                    {Math.round(system?.perf.cpu.load || 0)}
+                  </Text>
+                  %
+                </Text>
+              )}
+            </AnimatedCircularProgress>
+            <Text className="-mt-8 text-lg">CPU</Text>
+            {system ? (
+              <Text className="text-xs">
+                {`${system.perf.cpu.speed.toFixed(1)} GHz / ${
+                  system.perf.cpu.temp
+                }°C`}
+              </Text>
+            ) : null}
+          </VStack>
+          <VStack className="items-center">
+            <AnimatedCircularProgress
+              size={120}
+              width={15}
+              backgroundWidth={5}
+              fill={system?.perf.mem.percent || 0}
+              tintColor="#6366F1"
+              backgroundColor="#3d5875"
+              arcSweepAngle={240}
+              rotation={240}
+              lineCap="round"
+            >
+              {() => (
+                <Text>
+                  <Text className="text-2xl mr-0.5">
+                    {Math.round(system?.perf.mem.percent || 0)}
+                  </Text>
+                  %
+                </Text>
+              )}
+            </AnimatedCircularProgress>
+            <Text className="-mt-8 text-lg">Mem</Text>
+            <Text className="text-xs">{system?.perf.mem.used}</Text>
+          </VStack>
+        </HStack>
+
+        <Button
+          icon={
+            <Ionicons
+              name="chevron-forward"
+              style={{
+                transform: showProcess ? [{ rotate: "90deg" }] : undefined,
+              }}
+            />
+          }
+          className="absolute right-0 top-1"
+          variant="ghost"
+          onPress={() => setShowProcess(!showProcess)}
+        />
+
+        {showProcess && <ProcessList />}
+      </Box>
+    </>
+  );
+};
+
+export default Performance;

src/app/_sections/ProcessList.tsx

@@ -0,0 +1,54 @@
+import api from "@/lib/api";
+import Box from "@ui/Box";
+import Button from "@ui/Button";
+import { HStack, VStack } from "@ui/Stack";
+import Text from "@ui/Text";
+import React, { useState } from "react";
+import { useQuery } from "react-query";
+
+const ProcessList = () => {
+  const [sort, setSort] = useState<string>("mem");
+
+  const { data } = useQuery({
+    queryKey: ["process", sort],
+    queryFn: async () => {
+      return api.process
+        .$get({ query: { sort, limit: 5 } })
+        .then((r) => r.json());
+    },
+    select: (i) => i.list,
+    refetchInterval: 1000,
+  });
+
+  return (
+    <Box className="mt-4">
+      <HStack className="gap-2 flex-wrap">
+        <Button
+          label="Mem"
+          variant={sort === "mem" ? "default" : "outline"}
+          size="sm"
+          onPress={() => setSort("mem")}
+        />
+        <Button
+          label="CPU"
+          variant={sort === "cpu" ? "default" : "outline"}
+          size="sm"
+          onPress={() => setSort("cpu")}
+        />
+      </HStack>
+
+      <VStack className="gap-2 mt-3">
+        {data?.map((item, idx) => (
+          <HStack key={idx} className="pb-2 border-b border-gray-200">
+            <Text className="flex-1" numberOfLines={1}>
+              {item.cmd}
+            </Text>
+            <Text>{sort === "mem" ? item.memUsage : item.cpuPercent}</Text>
+          </HStack>
+        ))}
+      </VStack>
+    </Box>
+  );
+};
+
+export default ProcessList;

src/app/_sections/Storage.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { InferResponseType } from "hono/client";
+import api from "@/lib/api";
+import Text from "@ui/Text";
+import Box from "@ui/Box";
+import DriveIcon from "@/assets/icons/harddrive.svg";
+import { HStack, VStack } from "@ui/Stack";
+
+type Props = {
+  data: InferResponseType<typeof api.system.$get>;
+};
+
+const Storage = ({ data }: Props) => {
+  return (
+    <>
+      <Text className="text-lg font-medium mt-8">Storage</Text>
+      <HStack className="px-1 py-4 mt-2 bg-white border border-gray-100 rounded-lg gap-3 flex-wrap">
+        {data?.storage.map((item) => (
+          <Box key={item.mount} className="flex-1 basis-full sm:basis-[40%]">
+            <HStack className="flex items-center justify-center gap-2">
+              <DriveIcon style={{ width: 72, height: 72 }} />
+              <VStack className="flex-1 gap-1">
+                <Text className="text-primary font-bold">{item.mount}</Text>
+                <Text>{`Total: ${item.total}`}</Text>
+                <Text>{`Free: ${item.free}`}</Text>
+              </VStack>
+            </HStack>
+
+            <Box className="rounded-full h-2 mx-4 bg-gray-200 overflow-hidden">
+              <Box
+                className={[
+                  "rounded-full h-2",
+                  item.percent > 90
+                    ? "bg-red-500"
+                    : item.percent > 75
+                    ? "bg-yellow-500"
+                    : "bg-primary-400",
+                ]}
+                style={{ width: `${item.percent}%` }}
+              ></Box>
+            </Box>
+          </Box>
+        ))}
+      </HStack>
+    </>
+  );
+};
+
+export default Storage;

src/app/_sections/Summary.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Box from "@ui/Box";
+import Text from "@ui/Text";
+import dayjs from "dayjs";
+import { InferResponseType } from "hono/client";
+import api from "@/lib/api";
+
+type Props = {
+  data: InferResponseType<typeof api.system.$get>;
+};
+
+const Summary = ({ data }: Props) => {
+  return (
+    <Box className="px-4 py-6 mt-4 bg-white border border-gray-100 rounded-lg">
+      <Text className="text-5xl">{dayjs(data?.date).format("HH:mm")}</Text>
+      <Text className="mt-2">
+        {dayjs(data?.date).format("dddd, DD MMM YYYY")}
+      </Text>
+      <Text className="flex-1">{`Uptime: ${data?.uptime || "-"}`}</Text>
+    </Box>
+  );
+};
+
+export default Summary;

src/app/index.tsx

@@ -1,26 +1,31 @@
-import { Text } from "react-native";
 import React from "react";
+import api from "@/lib/api";
+import { useQuery } from "react-query";
+import Text from "@ui/Text";
+import Performance from "./_sections/Performance";
+import Summary from "./_sections/Summary";
+import Storage from "./_sections/Storage";
+import { ScrollView } from "react-native";
 import { cn } from "@/lib/utils";
-import useAPI from "@/hooks/useAPI";
-import { Ionicons } from "@ui/Icons";
-import { VStack } from "@ui/Stack";
-import Button from "@ui/Button";
 
 const App = () => {
-  const { data } = useAPI("/posts/1");
+  const { data: system } = useQuery({
+    queryKey: ["system"],
+    queryFn: () => api.system.$get().then((r) => r.json()),
+    refetchInterval: 1000,
+  });
 
   return (
-    <VStack className="gap-3 p-4">
-      <Text style={cn("text-2xl font-medium")}>App</Text>
-      <Text style={cn("w-full")}>{data?.body}</Text>
+    <ScrollView
+      contentContainerStyle={cn("px-4 py-8 md:py-16")}
+      showsVerticalScrollIndicator={false}
+    >
+      <Text className="text-2xl font-medium">Home Lab</Text>
 
-      <Button label="Click me" />
-      <Button label="Click me" variant="secondary" />
-      <Button label="Click me" variant="ghost" />
-      <Button label="Click me" variant="outline" />
-      <Button label="Click me" variant="destructive" />
-      <Button icon={<Ionicons name="trash" />} size="icon" />
-    </VStack>
+      <Summary data={system} />
+      <Performance data={system} />
+      <Storage data={system} />
+    </ScrollView>
   );
 };