From 1fc90584f492b033bcd6579cf2536970e4d7d469 Mon Sep 17 00:00:00 2001
From: Baitinq <manuelpalenzuelamerino@gmail.com>
Date: Tue, 2 Jul 2024 11:52:34 +0200
Subject: Home: Start styling layout

---
 src/components/Sidebar/Sidebar.tsx       |  2 +-
 src/components/TimePicker/TimePicker.tsx | 11 +++++++++++
 src/pages/Home.tsx                       | 28 ++++++++++++++++++++++------
 3 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 src/components/TimePicker/TimePicker.tsx

(limited to 'src')

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 409636b..28ae9a2 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import SidebarButton from "./SidebarButton";
 export default function SideBar() {
   return (
     <div
-      className="relative flex h-full w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border p-4 text-gray-700 shadow-xl shadow-blue-gray-900/5 mr-5">
+      className="relative flex h-full w-full max-w-[20rem] flex-col rounded-xl bg-white bg-clip-border p-4 text-gray-700 shadow-xl shadow-blue-gray-900/5">
       <div className="p-4 mb-2">
         <h5 className="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
           <a href="/">fs-tracer</a>
diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
new file mode 100644
index 0000000..b20b1f6
--- /dev/null
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -0,0 +1,11 @@
+//import { DateRangePicker } from 'react-date-range';
+
+export default function TimePicker() {
+	//			<DateRangePicker />
+
+	return (
+		<>
+			<p>TODO</p>
+		</>
+	)
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 37cc7cc..32edf5d 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState, useCallback } from "react"
 import { useNavigate } from "react-router-dom"
 import SideBar from "../components/Sidebar/Sidebar"
 import LineGraph from "../components/Graphs/LineGraph"
+import TimePicker from "../components/TimePicker/TimePicker"
 
 export default function Home(props: any) {
   const navigate = useNavigate()
@@ -36,12 +37,27 @@ export default function Home(props: any) {
     <>
       <div className="flex h-screen">
         <SideBar />
-        <main className="flex-1 overflow-y-auto">
-          <div className="w-3/12">
-            <LineGraph />
-          </div>
-          <div className="w-3/12">
-            <LineGraph />
+        <main className="overflow-y-auto flex flex-col flex-1 mx-5">
+          <div className="flex flex-col w-full gap-7 flex-grow">
+            <div className="flex flex-row gap-7 flex-grow">
+              <div className="ml-auto">
+                <TimePicker />
+              </div>
+            </div>
+            <div className="flex flex-row gap-7 flex-grow">
+              <div className="w-1/2 block bg-white border border-gray-200 rounded-lg shadow">
+              </div>
+              <div className="w-1/2 ml-auto">
+                <LineGraph />
+              </div>
+            </div>
+            <div className="flex flex-row gap-7 mb-5 flex-grow">
+              <div className="w-1/2 mr-auto">
+                <LineGraph />
+              </div>
+              <div className="w-1/2 block bg-white-500 border border-gray-200 rounded-lg shadow">
+              </div>
+            </div>
           </div>
         </main>
       </div>
-- 
cgit 1.4.1