diff options
| author | Baitinq <manuelpalenzuelamerino@gmail.com> | 2024-07-02 11:52:34 +0200 |
|---|---|---|
| committer | Baitinq <manuelpalenzuelamerino@gmail.com> | 2024-07-02 11:52:34 +0200 |
| commit | 1fc90584f492b033bcd6579cf2536970e4d7d469 (patch) | |
| tree | ec3a7c7a5b5988fc374354ccd9a3a4e0ecf50e29 | |
| parent | Pages: Add Recents page (diff) | |
| download | fs-tracer-frontend-1fc90584f492b033bcd6579cf2536970e4d7d469.tar.gz fs-tracer-frontend-1fc90584f492b033bcd6579cf2536970e4d7d469.tar.bz2 fs-tracer-frontend-1fc90584f492b033bcd6579cf2536970e4d7d469.zip | |
Home: Start styling layout
| -rw-r--r-- | src/components/Sidebar/Sidebar.tsx | 2 | ||||
| -rw-r--r-- | src/components/TimePicker/TimePicker.tsx | 11 | ||||
| -rw-r--r-- | src/pages/Home.tsx | 28 |
3 files changed, 34 insertions, 7 deletions
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> |