add a commit to Add comment requesting help to implement "Download as…

… .csv" button (#459)

* add a commit to @coderabbitai

* add csv button

* perfect @coderabbitai that worked

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<string, string> = {
   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 (
     <PageWrapper>
       <Title title={pageTitle} />
@@ -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>