feat: add toggle functionality for advertisement view and integrate button for switching

app/pages/dashboard-advertisements/index.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import { PlusIcon } from '~/components/icons/plus'
+import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { BANNER } from '~/data/contents'
@@ -19,6 +20,7 @@ export const AdvertisementsPage = ({
 }: BannerUploadProperties) => {
   const [banner, setBanner] = useState<File | null>()
   const [link, setLink] = useState<string>('')
+  const [listAdvertisement, setListAdvertisement] = useState(true)
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] || undefined
@@ -72,9 +74,14 @@ export const AdvertisementsPage = ({
     },
   }
 
+  const switchView = () => {
+    setListAdvertisement(!listAdvertisement)
+  }
+
   return (
     <div className="relative">
       <TitleDashboard title="Advertisement" />
+      {listAdvertisement && (
         <div className="flex gap-5">
           <div className="w-[400px] rounded-xl bg-gray-50 py-6">
             <Field className="mb-6">
@@ -125,13 +132,24 @@ export const AdvertisementsPage = ({
               </div>
             </div>
           )}
+          <Button
+            size="lg"
+            className="mt-6 ml-auto flex-none rounded"
+            onClick={switchView}
+          >
+            List Advertisement
+          </Button>
         </div>
+      )}
+
+      {!listAdvertisement && (
         <UiTable
           data={dataBanner}
           columns={dataColumns}
           slots={dataSlot}
           title="Daftar Banner"
         />
+      )}
     </div>
   )
 }