diff options
| author | Pinapelz <yukais@pinapelz.com> | 2024-10-05 15:53:24 -0700 |
|---|---|---|
| committer | Pinapelz <yukais@pinapelz.com> | 2024-10-05 15:53:24 -0700 |
| commit | 14005a85f9d5ba575467e6012ef1d41bd0dda13d (patch) | |
| tree | 3c308dc06dc73e9895ec4d97c9d7c09553e74601 | |
| parent | 820bf2dff25db077370a4fca5b639267e2dbdc97 (diff) | |
add description field to dividers
| -rw-r--r-- | src/components/CompactTable/CompactTable.tsx | 2 | ||||
| -rw-r--r-- | src/components/Divider/Divider.tsx | 25 | ||||
| -rw-r--r-- | src/pages/stats/[slug].tsx | 9 |
3 files changed, 21 insertions, 15 deletions
diff --git a/src/components/CompactTable/CompactTable.tsx b/src/components/CompactTable/CompactTable.tsx index 804fa28..656fa1e 100644 --- a/src/components/CompactTable/CompactTable.tsx +++ b/src/components/CompactTable/CompactTable.tsx @@ -9,7 +9,7 @@ interface CompactTableProps { const CompactTable: React.FC<CompactTableProps> = ({ tableData }) => { return ( - <div className="max-w-full mx-auto bg-gray-100 shadow-md rounded-lg overflow-hidden"> + <div className="max-w-full mx-auto bg-gray-100 shadow-md overflow-hidden"> <div className="flex gap-x-4"> <div className="w-1/2 px-4 py-5"> <h2 className="text-lg font-semibold text-gray-900">Dates</h2> diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index ef6b30b..a19f4a9 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -1,14 +1,21 @@ interface DividerProps { - text: string; + text: string; + description?: string; } const Divider = (props: DividerProps) => { - return ( - <div className="flex flex-row items-center justify-center bg-black h-24 max-w-full px-72"> - <div className="px-2 text-white text-4xl font-extrabold"> - {props.text} - </div> - </div> - ); + return ( + <div className="flex flex-col items-center justify-center bg-black h-24 mx-24 rounded-xl px-72"> + <div className="px-2 mt-2 text-white text-4xl font-extrabold"> + {props.text} + </div> + {props.description && ( + <div className="px-2 my-2 text-white text-lg font-medium"> + {props.description} + </div> + )} + </div> + ); }; -export default Divider; + +export default Divider;
\ No newline at end of file diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx index 685d01b..c2427c0 100644 --- a/src/pages/stats/[slug].tsx +++ b/src/pages/stats/[slug].tsx @@ -108,7 +108,7 @@ function Page({ /> </div> <div className="hidden sm:block"> - <Divider text="Individual Data" /> + <Divider text="Individual Data" description="All verified collected datapoints by PhaseTracker. Numbers before data collection started not shown" /> <div className="px-48 mb-10 mt-10"> <div className="mb-12"> <DataChart @@ -125,17 +125,16 @@ function Page({ graphTitle="7 Day Historical" /> </div> - <Divider text="Milestones" /> - <div className="mb-12"> + </div> + <Divider text="Milestones" description="Approximations are shown for milestones before data collection started" /> + <div className="mb-12 mx-24"> <CompactTable tableData={{ dates: milestoneData.dates, milestones: milestoneData.milestones, }} /> - <p className="mt-2 font-semibold">For intervals which we did not record any data, the closest recorded datapoint is chosen</p> </div> - </div> </div> <Footer /> </> |