feat: distribute ads (#31)

* feat: distribute ads

* feat: implement list ads

* chore: enable sort icon

---------

Co-authored-by: Toan Ho <[email protected]>

Author: 2 people

components/pages/dashboard/ads/AdsForm.tsx

@@ -228,6 +228,7 @@ export function AdsForm() {
                     size: 'sm',
                     className: 'md:px-3.5 md:py-2',
                   })}
+                  onClick={back}
                 >
                   Back
                 </button>
@@ -238,6 +239,7 @@ export function AdsForm() {
                       size: 'sm',
                       className: 'md:px-3.5 md:py-2',
                     })}
+                    onClick={back}
                   >
                     Cancel
                   </button>

components/pages/dashboard/ads/ListAds.tsx

@@ -0,0 +1,117 @@
+import { Switch } from '~components/Dashboard/Switch'
+import { Icon } from '@iconify/react'
+import { button } from '~components/Dashboard/Button'
+import { Table } from '~components/Dashboard/Table'
+
+type Ads = {
+  adName: string
+  budget: 'Free' | 'Premium'
+  schedule: 'Ongoing' | 'End'
+  publish: boolean
+}
+
+export default function ListAds() {
+  const mockData: Ads[] = [
+    {
+      adName: 'Ad name',
+      budget: 'Free',
+      schedule: 'Ongoing',
+      publish: true,
+    },
+    {
+      adName: 'Ad name',
+      budget: 'Free',
+      schedule: 'End',
+      publish: true,
+    },
+    {
+      adName: 'Ad name',
+      budget: 'Premium',
+      schedule: 'Ongoing',
+      publish: false,
+    },
+  ]
+
+  return (
+    <>
+      <div className="overflow-auto">
+        <Table
+          data={mockData}
+          columns={[
+            {
+              Header: 'Name',
+              accessor: 'adName',
+              width: 300,
+              tdClassName: 'font-bold pl-4', // add padding left for first col
+              Cell: ({ cell: { value } }: any) => {
+                return <div>{value}</div>
+              },
+            },
+            {
+              Header: 'Budget',
+              accessor: 'budget',
+              Cell: ({ cell: { value }, row: { original } }: any) => {
+                return (
+                  <span
+                    className={!original.publish ? 'text-dashboard-gray-8' : ''}
+                  >
+                    {value}
+                  </span>
+                )
+              },
+            },
+            {
+              Header: 'Schedule',
+              accessor: 'schedule',
+              defaultCanSort: true,
+              Cell: ({ cell: { value }, row: { original } }: any) => {
+                return (
+                  <span
+                    className={!original.publish ? 'text-dashboard-gray-8' : ''}
+                  >
+                    {value}
+                  </span>
+                )
+              },
+            },
+            {
+              Header: 'Publish',
+              accessor: 'publish',
+              thClassName: 'text-right',
+              tdClassName: 'justify-end gap-2 pr-4', // add padding right for last col
+              Cell: ({ cell: { value } }: any) => (
+                <>
+                  <div className="flex gap-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition">
+                    <button
+                      type="button"
+                      className={button({
+                        appearance: 'tertiary',
+                        size: 'icon',
+                      })}
+                    >
+                      <Icon className="w-4 h-4" icon="mingcute:pencil-fill" />
+                    </button>
+                    <button
+                      type="button"
+                      className={button({
+                        appearance: 'tertiary',
+                        size: 'icon',
+                      })}
+                    >
+                      <Icon className="w-4 h-4" icon="mingcute:delete-fill" />
+                    </button>
+                  </div>
+                  <Switch checked={value} />
+                </>
+              ),
+            },
+          ]}
+          tableClassName="!overflow-visible"
+          theadClassName="mb-2 text-xs font-bold uppercase thead text-dashboard-gray-2"
+          tdClassName="flex items-center"
+          trBodyClassName="py-4 bg-[#FFFFFF] rounded-lg border border-[#FFFFFF] hover:shadow hover:border-dashboard-gray-1 text-sm mb-2 transition group"
+        />
+      </div>
+    </>
+  )
+}

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "proxy-ssl": "local-ssl-proxy --config proxy-config.json",
     "dev:https": "(trap 'kill 0' SIGINT; yarn proxy-ssl & next dev -p 3001)",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "type-check": "tsc",

pages/dashboard/[server_id]/ads/index.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router'
 import React from 'react'
 import { button } from '~components/Dashboard/Button'
 import DashboardLayout from '~components/Dashboard/Layout'
+import ListAds from '~components/pages/dashboard/ads/ListAds'
 
 const Ads = () => {
   const { query } = useRouter()
@@ -27,7 +28,7 @@ const Ads = () => {
         </Link>
       }
     >
-      ads page
+      <ListAds />
     </DashboardLayout>
   )
 }