97 lines
5.0 KiB
TypeScript
97 lines
5.0 KiB
TypeScript
'use client';
|
|
import IconPlayCircle from '@/components/icon/icon-play-circle';
|
|
import IconX from '@/components/icon/icon-x';
|
|
import { Transition, Dialog, DialogPanel, TransitionChild } from '@headlessui/react';
|
|
import React, { Fragment, useState } from 'react';
|
|
|
|
const ComponentsPagesKnowledgeBaseVideoTutorial = () => {
|
|
const [modal, setModal] = useState(false);
|
|
const items = [
|
|
{
|
|
src: '/assets/images/knowledge/image-5.jpg',
|
|
title: 'Excessive sugar is harmful',
|
|
},
|
|
{
|
|
src: '/assets/images/knowledge/image-6.jpg',
|
|
title: 'Creative Photography',
|
|
},
|
|
{
|
|
src: '/assets/images/knowledge/image-7.jpg',
|
|
title: 'Plan your next trip',
|
|
},
|
|
{
|
|
src: '/assets/images/knowledge/image-8.jpg',
|
|
title: 'My latest Vlog',
|
|
},
|
|
];
|
|
return (
|
|
<>
|
|
<div className="mt-10 lg:mt-16">
|
|
<h3 className="mb-6 text-xl font-bold md:text-3xl">Popular Video Tutorial</h3>
|
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
|
|
{items.map((item: any, i) => {
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="space-y-5 rounded-md border border-white-light bg-white p-5 shadow-[0px_0px_2px_0px_rgba(145,158,171,0.20),0px_12px_24px_-4px_rgba(145,158,171,0.12)] dark:border-[#1B2E4B] dark:bg-black"
|
|
>
|
|
<div className="group relative h-[340px] overflow-hidden rounded-md">
|
|
<img src={item.src} alt="video tutorial" className="h-full w-full cursor-pointer object-cover" onClick={() => setModal(true)} />
|
|
<button
|
|
type="button"
|
|
className="absolute left-1/2 top-1/2 grid h-[62px] w-[62px] -translate-x-1/2 -translate-y-1/2 place-content-center rounded-full text-white duration-300 group-hover:scale-110"
|
|
onClick={() => setModal(true)}
|
|
>
|
|
<IconPlayCircle className="h-[62px] w-[62px]" fill={true} />
|
|
</button>
|
|
<div className="absolute bottom-0 left-0 w-full bg-white/30 px-5 py-[22px] text-center text-xl text-white backdrop-blur-[5px]">Excessive sugar is harmful</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
;
|
|
</div>
|
|
<Transition appear show={modal} as={Fragment}>
|
|
<Dialog as="div" open={modal} onClose={() => setModal(false)}>
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0" />
|
|
</TransitionChild>
|
|
<div className="fixed inset-0 z-[999] overflow-y-auto bg-[black]/60">
|
|
<div className="flex min-h-screen items-start justify-center px-4">
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<DialogPanel className="my-8 w-full max-w-3xl overflow-hidden">
|
|
<div className="text-right">
|
|
<button onClick={() => setModal(false)} type="button" className="text-white-dark !outline-none hover:text-dark">
|
|
<IconX />
|
|
</button>
|
|
</div>
|
|
<iframe title="youtube-video" src="https://www.youtube.com/embed/tgbNymZ7vqY" className="h-[250px] w-full md:h-[550px]"></iframe>
|
|
</DialogPanel>
|
|
</TransitionChild>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ComponentsPagesKnowledgeBaseVideoTutorial;
|