make pengujian page

website/src/App.tsx

@@ -33,7 +33,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
 
   return (
     <div class="min-h-screen bg-gray-50 flex flex-col text-gray-700">
-      <nav class="sticky top-0 left-0 right-0 z-20 bg-white w-full flex items-center justify-between h-[70px] shadow-sm px-5">
+      <nav class="sticky top-0 left-0 right-0 z-20 bg-white w-full flex items-center justify-between h-[70px] shadow px-5">
         <div class="text-xl font-medium uppercase">
           <span class="text-primary">Ferm</span>onitor
         </div>
@@ -42,14 +42,14 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
         </A>
       </nav>
       <div class="grow relative">
-        <div class="absolute top-0 left-0 lg:block hidden w-72 bg-white shadow-sm h-full px-8">
+        <div class="absolute top-0 left-0 lg:block hidden w-72 bg-white shadow h-full px-8">
           <div class="mt-10">
             <For each={menus}>
               {(item) => (
                 <A
                   href={item.path}
                   class={
-                    "flex mb-3 items-center transition " +
+                    "flex mb-5 items-center transition " +
                     (location.pathname == item.path ? "text-primary" : "")
                   }
                 >

website/src/Router.tsx

@@ -1,5 +1,6 @@
 import { Route, Router } from "@solidjs/router";
 import Index from "./pages/Index";
+import Pengujian from "./pages/Pengujian";
 
 interface Props {
   root: any;
@@ -9,6 +10,7 @@ export default function (props: Props) {
   return (
     <Router root={props.root}>
       <Route path="/" component={Index}></Route>
+      <Route path="/pengujian" component={Pengujian}></Route>
     </Router>
   );
 }

website/src/components/Table.tsx

@@ -0,0 +1,55 @@
+import { For, JSX, splitProps } from "solid-js";
+
+interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  headers: any[];
+  items?: any[];
+}
+
+export default function (props: TableProps) {
+  const [localProps, otherProps] = splitProps(props, ["headers", "items"]);
+
+  return (
+    <div class="overflow-x-auto">
+      <table class={"border-collapse w-full " + otherProps.class}>
+        <thead>
+          <tr>
+            <For each={props.headers}>
+              {(item) => (
+                <th class="text-left font-semibold border-t border-b border-gray-200 p-3">
+                  {item}
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <For
+            each={props.items}
+            fallback={
+              <tr>
+                <td
+                  class="p-3.5 text-center border-t border-b border-gray-200"
+                  colspan={props.headers.length}
+                >
+                  data tidak tersedia
+                </td>
+              </tr>
+            }
+          >
+            {(items) => (
+              <tr>
+                <For each={items}>
+                  {(item) => (
+                    <td class="text-left border-t border-b border-gray-200 p-3.5">
+                      {item}
+                    </td>
+                  )}
+                </For>
+              </tr>
+            )}
+          </For>
+        </tbody>
+      </table>
+    </div>
+  );
+}

website/src/pages/Pengujian.tsx

@@ -0,0 +1,25 @@
+import Table from "../components/Table";
+
+export default function () {
+  return (
+    <div class="space-y-5">
+      <div class="bg-white rounded shadow p-5">
+        Keterangan : Kondisi tape dalam keadaan kurang baik. Perubahan kadar
+        gas, suhu, dan kelembaban tidak signifikan. kemungkinan fermentasi
+        gagal.
+      </div>
+      <div class="bg-white rounded shadow p-5">
+        <Table
+          class="my-5"
+          headers={["Tanggal", "Jam", "Kadar Gas", "Suhu", "Kelembaban"]}
+          items={[
+            ["23 Maret 2024", "08:00", "20%", "35 C", "50%"],
+            ["23 Maret 2024", "14:00", "23%", "35 C", "60%"],
+            ["23 Maret 2024", "20:00", "23%", "35 C", "65%"],
+            ["24 Maret 2024", "02:00", "23%", "35 C", "65%"],
+          ]}
+        ></Table>
+      </div>
+    </div>
+  );
+}