diff options
| -rw-r--r-- | jb-ui/src/pages/Preview.tsx | 23 |
1 files changed, 11 insertions, 12 deletions
diff --git a/jb-ui/src/pages/Preview.tsx b/jb-ui/src/pages/Preview.tsx index 9506664..153b4bb 100644 --- a/jb-ui/src/pages/Preview.tsx +++ b/jb-ui/src/pages/Preview.tsx @@ -48,19 +48,16 @@ interface FrequencyButtonsProps { onChange: (frequency: LeaderboardFrequency) => void; } +const frequency_map = [ + { label: 'Day', value: LeaderboardFrequency.Daily }, + { label: 'Week', value: LeaderboardFrequency.Weekly }, + { label: 'Month', value: LeaderboardFrequency.Monthly }, +]; const ThreeButtonToggle = ({ selected, onChange }: FrequencyButtonsProps) => { - const buttons = [ - { label: 'Day', value: LeaderboardFrequency.Daily }, - { label: 'Week', value: LeaderboardFrequency.Weekly }, - { label: 'Month', value: LeaderboardFrequency.Monthly }, - ]; - - // rounded-l - return ( <div className="inline-flex rounded shadow-sm" role="group"> - {buttons.map((button, idx) => ( + {frequency_map.map((button, idx) => ( <button type="button" key={button.value} @@ -70,7 +67,7 @@ const ThreeButtonToggle = ({ selected, onChange }: FrequencyButtonsProps) => { "border-t border-b border-gray-200", "hover:cursor-pointer hover:bg-zinc-200 hover:text-zinc-950", idx === 0 && "rounded-l", - idx === buttons.length - 1 && "rounded-r", + idx === frequency_map.length - 1 && "rounded-r", selected === button.value ? 'text-zinc-50 bg-zinc-400' : 'text-zinc-950 bg-zinc-50', @@ -136,6 +133,8 @@ export const Leaderboards = () => { dateRange = `${start} – ${end}`; } + const freq_label = frequency_map.find(f => f.value === frequency)?.label.toLocaleLowerCase() + return ( <div className="my-2 mx-4 py-0"> <div className="w-full flex items-center justify-between my-1"> @@ -166,7 +165,7 @@ export const Leaderboards = () => { md:grid-cols-2"> <table className="border-collapse text-emerald-950 text-[8px] md:text-sm"> <caption className="caption-top text-xs font-semibold"> - Most earned in the past week. + Most earned in the past {freq_label}. </caption> <thead> <tr className=" @@ -200,7 +199,7 @@ export const Leaderboards = () => { <table className="border-collapse border border-gray-400 text-emerald-950 text-[8px] md:text-sm"> <caption className="caption-top text-xs font-semibold"> - Top completes in the past week. + Top completes in the past {freq_label}. </caption> <thead> <tr className=" |