feat: show vertical stats on small screen devices

src/pages/Connections.tsx

@@ -10,7 +10,7 @@ import byteSize from 'byte-size'
 import { isIPv6 } from 'is-ip'
 import { For, createSignal } from 'solid-js'
 import { secret, wsEndpointURL } from '~/signals'
-import type { Connection } from '../types'
+import type { Connection } from '~/types'
 
 export const Connections = () => {
   const [search, setSearch] = createSignal('')

src/pages/Overview.tsx

@@ -3,7 +3,14 @@ import { createReconnectingWS } from '@solid-primitives/websocket'
 import { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
 import { SolidApexCharts } from 'solid-apexcharts'
-import { createEffect, createMemo, createSignal } from 'solid-js'
+import {
+  JSX,
+  ParentComponent,
+  children,
+  createEffect,
+  createMemo,
+  createSignal,
+} from 'solid-js'
 import { secret, wsEndpointURL } from '~/signals'
 import type { Connection } from '~/types'
 
@@ -34,6 +41,15 @@ const defaultChartOptions: ApexOptions = {
   },
 }
 
+const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
+  <div class="stat">
+    <div class="stat-title text-secondary-content">{props.label}</div>
+    <div class="stat-value text-primary-content">
+      {children(() => props.children)()}
+    </div>
+  </div>
+)
+
 export const Overview = () => {
   const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
     [],
@@ -134,45 +150,30 @@ export const Overview = () => {
 
   return (
     <div class="flex flex-col gap-4">
-      <div class="stats w-full bg-primary shadow">
-        <div class="stat">
-          <div class="stat-title text-secondary-content">Upload</div>
-          <div class="stat-value text-primary-content">
+      <div class="stats stats-vertical w-full bg-primary shadow sm:stats-horizontal">
+        <TrafficWidget label="Upload">
           {byteSize(traffic()?.up || 0).toString()}/s
-          </div>
-        </div>
-        <div class="stat">
-          <div class="stat-title text-secondary-content">Download</div>
-          <div class="stat-value text-primary-content">
+        </TrafficWidget>
+
+        <TrafficWidget label="Download">
           {byteSize(traffic()?.down || 0).toString()}/s
-          </div>
-        </div>
-        <div class="stat">
-          <div class="stat-title text-secondary-content">Upload Total</div>
-          <div class="stat-value text-primary-content">
+        </TrafficWidget>
+
+        <TrafficWidget label="Upload Total">
           {byteSize(connection()?.uploadTotal || 0).toString()}
-          </div>
-        </div>
-        <div class="stat">
-          <div class="stat-title text-secondary-content">Download Total</div>
-          <div class="stat-value text-primary-content">
+        </TrafficWidget>
+
+        <TrafficWidget label="Download Total">
           {byteSize(connection()?.downloadTotal || 0).toString()}
-          </div>
-        </div>
-        <div class="stat">
-          <div class="stat-title text-secondary-content">
-            Active Connections
-          </div>
-          <div class="stat-value text-primary-content">
+        </TrafficWidget>
+
+        <TrafficWidget label="Active Connections">
           {connection()?.connections.length || 0}
-          </div>
-        </div>
-        <div class="stat">
-          <div class="stat-title text-secondary-content">Memory Usage</div>
-          <div class="stat-value text-primary-content">
+        </TrafficWidget>
+
+        <TrafficWidget label="Memory Usage">
           {byteSize(memory() || 0).toString()}
-          </div>
-        </div>
+        </TrafficWidget>
       </div>
 
       <div class="mx-auto grid w-full max-w-screen-lg grid-cols-1 gap-4">

src/pages/Proxies.tsx

@@ -1,6 +1,6 @@
 import { For, createSignal, onMount } from 'solid-js'
 import { useRequest } from '~/signals'
-import { Proxy, ProxyProvider } from '~/types'
+import type { Proxy, ProxyProvider } from '~/types'
 
 export const Proxies = () => {
   const request = useRequest()