make dashboard page

website/src/App.tsx

@@ -42,7 +42,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
         </A>
       </nav>
       <div class="grow relative">
-        <div class="absolute top-0 left-0 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-sm h-full px-8">
           <div class="mt-10">
             <For each={menus}>
               {(item) => (
@@ -60,7 +60,7 @@ export default function (props: JSX.HTMLAttributes<HTMLDivElement>) {
             </For>
           </div>
         </div>
-        <div class="p-5 lg:ml-72">{props.children}</div>
+        <div class="p-5 lg:ml-72 transition">{props.children}</div>
       </div>
     </div>
   );

website/src/Router.tsx

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

website/src/icons/BeakerIcon.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
+      />
+    </svg>
+  );
+}

website/src/icons/EyeDropperIcon.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m15 11.25 1.5 1.5.75-.75V8.758l2.276-.61a3 3 0 1 0-3.675-3.675l-.61 2.277H12l-.75.75 1.5 1.5M15 11.25l-8.47 8.47c-.34.34-.8.53-1.28.53s-.94.19-1.28.53l-.97.97-.75-.75.97-.97c.34-.34.53-.8.53-1.28s.19-.94.53-1.28L12.75 9M15 11.25 12.75 9"
+      />
+    </svg>
+  );
+}

website/src/pages/About.tsx

@@ -1,7 +0,0 @@
-export default function () {
-    return (
-        <div>
-            About page
-        </div>
-    );
-}

website/src/pages/Index.tsx

@@ -1,7 +1,28 @@
+import BeakerIcon from "../icons/BeakerIcon";
+import EyeDropperIcon from "../icons/EyeDropperIcon";
+
 export default function () {
-    return (
+  return (
-        <div>
+    <div class="space-y-5">
-            Hello World!
+      <div class="flex flex-wrap gap-5">
+        <div class="bg-pink-500 lg:w-1/2 w-full h-52 rounded shadow text-white flex items-center justify-center">
+          <div class="uppercase text-3xl">belum matang</div>
         </div>
-    );
+        <div class="grid grid-cols-2 grow gap-5 ">
-}
+          <div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">
+            <EyeDropperIcon class="w-12 h-12 inline-block" />
+            <div class="text-3xl mt-5">30 °C</div>
+          </div>
+          <div class="bg-white rounded shadow min-h-24 flex flex-col items-center justify-center py-8">
+            <BeakerIcon class="w-12 h-12 inline-block" />
+            <div class="text-3xl mt-5">70 %</div>
+          </div>
+        </div>
+      </div>
+      <div class="bg-white rounded shadow p-5">
+        <div class="text-xl">Grafik Kadar Gas</div>
+        <div class="h-[300px]"></div>
+      </div>
+    </div>
+  );
+}