diff options
| author | Baitinq <manuelpalenzuelamerino@gmail.com> | 2024-07-04 22:08:09 +0200 |
|---|---|---|
| committer | Baitinq <manuelpalenzuelamerino@gmail.com> | 2024-07-04 22:14:50 +0200 |
| commit | c2ef41c771d5a22a7487afece0a1eb6343b2e929 (patch) | |
| tree | 39e988ff12f7fbf20e2f3ae9a7a5da9576f48d8b /src | |
| parent | Components: LineGraph: Fetch data from DB (diff) | |
| download | fs-tracer-frontend-c2ef41c771d5a22a7487afece0a1eb6343b2e929.tar.gz fs-tracer-frontend-c2ef41c771d5a22a7487afece0a1eb6343b2e929.tar.bz2 fs-tracer-frontend-c2ef41c771d5a22a7487afece0a1eb6343b2e929.zip | |
Components: TimePicker: Add basic timepicker
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/TimePicker/TimePicker.tsx | 15 | ||||
| -rw-r--r-- | src/pages/Home.tsx | 2 |
2 files changed, 13 insertions, 4 deletions
diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx index b20b1f6..174db31 100644 --- a/src/components/TimePicker/TimePicker.tsx +++ b/src/components/TimePicker/TimePicker.tsx @@ -1,11 +1,20 @@ -//import { DateRangePicker } from 'react-date-range'; +import { DateRangePicker, Provider, defaultTheme } from '@adobe/react-spectrum' +import { useState } from 'react'; +import { today, getLocalTimeZone } from '@internationalized/date'; + export default function TimePicker() { - // <DateRangePicker /> + const endTimeframe = today(getLocalTimeZone()); + const [value, setValue] = useState({ + start: endTimeframe.subtract({ days: 7 }), + end: endTimeframe + }); return ( <> - <p>TODO</p> + <Provider theme={defaultTheme}> + <DateRangePicker aria-label="timeframe" value={value} onChange={setValue} /> + </Provider> </> ) } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 8c3e23c..193b033 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -40,7 +40,7 @@ export default function Home(props: any) { <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"> + <div className="ml-auto mt-2"> <TimePicker /> </div> </div> |