From ee5e054d94f317e53fdefb34319cb7cd27a31c18 Mon Sep 17 00:00:00 2001
From: Azalea Gui <me@hydev.org>
Date: Thu, 9 Feb 2023 18:39:31 -0500
Subject: [PATCH] [+] Display files

---
 src/App.tsx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/App.tsx

diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..65e6990
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,30 @@
+import { Component, createResource, createSignal, For, lazy, Show } from 'solid-js';
+
+const host = "https://daisy-ddns.hydev.org/data/api/OS"
+
+const fetchApi = async () => await (await fetch(host)).json()
+export default function App() {
+  const [api] = createResource(fetchApi)
+
+  return (
+    <div class="p-10 bg-dark-800 text-rose-300 mh-full">
+      <div class="max-w-screen-md m-auto">
+        <p class="text-4xl text-rose-400 text-center py-10">File Listing</p>
+        {api.loading && "Loading..."}
+        <div class="flex flex-col gap-1">
+          <For each={api()}>{(f, i) => 
+            <span class="w-full flex gap-4 transition-all duration-300 bg-dark-800 hover:bg-dark-300 hover:duration-0 rounded-xl p-2 items-center">
+              <span class="flex-1 font-bold">{f.name}</span>
+              <Show when={f.size !== undefined}>
+                <span class="text-right basis-30">{f.size}</span>
+              </Show>
+              <span class="text-right basis-30 select-none">
+                {f.mtime}
+              </span>
+            </span>
+          }</For>
+        </div>
+      </div>
+    </div>
+  );
+}