diff --git a/app/routes/wow.legacy-marketshare.tsx b/app/routes/wow.legacy-marketshare.tsx index cb3b42b4..f6b2e09c 100644 --- a/app/routes/wow.legacy-marketshare.tsx +++ b/app/routes/wow.legacy-marketshare.tsx @@ -32,6 +32,7 @@ import type { ColumnList } from '~/components/types' import { getOribosLink } from '~/components/utilities/getOribosLink' import { getSaddlebagWoWLink } from '~/components/utilities/getSaddlebagWoWLink' import DebouncedInput from '~/components/Common/DebouncedInput' +import CSVButton from '~/components/utilities/CSVButton' const inputMap: Record = { homeRealmId: 'Home Realm', @@ -317,6 +318,13 @@ const Results = ({ const chartData = getChartData(data, sortBy) const columnList = getColumnList(region, server) + + // Define the columns for the CSV + const csvColumns = columnList.map(({ columnId, header }) => ({ + title: header, + value: columnId + })) + return ( @@ -349,12 +357,17 @@ const Results = ({ </> </ContentContainer> - <div className="hidden sm:flex w-full justify-end"> + <div className="flex justify-between"> + <CSVButton + filename="legacy_marketshare.csv" + data={data} + columns={csvColumns} + /> <DebouncedInput onDebouncedChange={(value) => { setGlobalFilter(value) }} - className={'p-2 rounded-md'} + className={'hidden sm:block p-2 rounded-md'} placeholder={'Search...'} /> </div>