izzaalfiansyah
/
TKK_E32211868
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make dashboard page

This commit is contained in:
Muhammad Izza Alfiansyah 2024-04-09 14:23:17 +07:00
parent f2e4e8b845
commit 66b527bdf2
6 changed files with 70 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/App.tsx
View File

@ -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>
);

2
website/src/Router.tsx
View File

@ -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>
);
}

21
website/src/icons/BeakerIcon.tsx Normal file
View File

@ -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>
);
}

21
website/src/icons/EyeDropperIcon.tsx Normal file
View File

@ -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>
);
}

7
website/src/pages/About.tsx
View File

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

25
website/src/pages/Index.tsx
View File

@ -1,7 +1,28 @@
import BeakerIcon from "../icons/BeakerIcon";
import EyeDropperIcon from "../icons/EyeDropperIcon";
export default function () {
return (
<div>
Hello World!
<div class="space-y-5">
<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>
);
}