video page

1 files changed, 55 insertions, 0 deletions

diff --git a/src/pages/video.jsx b/src/pages/video.jsx
new file mode 100644
index 00000000..c7248da1
--- /dev/null
+++ b/src/pages/video.jsx
@@ -0,0 +1,55 @@
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import useVideo from '@/lib/video/hooks/useVideo'
+import { useRouter } from 'next/router'
+
+export default function Video() {
+  const router = useRouter()
+  const limit = 16
+
+  const { page = 1 } = router.query
+  const { video } = useVideo({ limit, offset: limit * (page - 1) })
+
+  const pageCount = Math.ceil(video?.data?.videoTotal / limit)
+
+  return (
+    <BasicLayout>
+      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+        <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kanal Video Indoteknik</h1>
+        <div className='grid grid-cols-1 md:grid-cols-4 gap-6'>
+          {video.data?.videos?.map((video) => (
+            <div className='shadow bg-white rounded' key={video.id}>
+              <iframe
+                src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`}
+                title='YouTube video player'
+                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                allowFullScreen={true}
+                width='100%'
+                height={200}
+                className='rounded'
+              />
+              <div className='p-3'>
+                <a
+                  href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+                  className='text-red_r-11 mb-2 block'
+                >
+                  {video.channelName}
+                </a>
+                <a href={video.url} className='font-medium leading-6'>
+                  {video.name}
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <Pagination
+          currentPage={parseInt(page)}
+          pageCount={pageCount}
+          url={`/video`}
+          className='mt-10'
+        />
+      </div>
+    </BasicLayout>
+  )
+}