blob: 7d1f8372e6c607075e113433de8de27eeb7aeaee (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import Seo from '@/core/components/Seo'
import Pagination from '@/core/components/elements/Pagination/Pagination'
import Spinner from '@/core/components/elements/Spinner/Spinner'
import BasicLayout from '@/core/components/layouts/BasicLayout'
import useVideo from '@/lib/video/hooks/useVideo'
import { useRouter } from 'next/router'
import { LazyLoadComponent } from 'react-lazy-load-image-component'
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>
<Seo title='Kanal Video Indoteknik.com' />
{video.isLoading && (
<div className='flex justify-center my-6'>
<Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
</div>
)}
{video.isFetched && (
<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}>
<LazyLoadComponent>
<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'
/>
</LazyLoadComponent>
<div className='p-3'>
<a
href='https://www.youtube.com/@indoteknikcom'
className='text-danger-500 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-4 md:mt-10'
/>
</div>
)}
</BasicLayout>
)
}
|
