47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
import YouTube from 'react-youtube';
|
|
|
|
import { centerVideo, characterBlock, guideBody } from '@/lib/siteContentClasses';
|
|
import type { IGuideItem } from '@/models/IGuideItem';
|
|
|
|
type Props = {
|
|
items: IGuideItem[];
|
|
};
|
|
|
|
const opts = {
|
|
height: '195',
|
|
width: '320',
|
|
};
|
|
|
|
export function GuideVideoList({ items }: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className={guideBody}>
|
|
<h2 className="text-xl sm:text-2xl">{t('guide')}</h2>
|
|
<hr />
|
|
<br />
|
|
{items.map((el) => (
|
|
<div
|
|
key={`guideItemsLoop-${el.id}`}
|
|
className={characterBlock}
|
|
style={{
|
|
animationDelay: `${el.id * 0.2}s`,
|
|
}}
|
|
>
|
|
<h4>{el.title}</h4>
|
|
<hr />
|
|
<div>{el.description}</div>
|
|
<div className={centerVideo}>
|
|
<div className="mx-auto w-full max-w-[360px] overflow-x-auto">
|
|
<YouTube videoId={el.youtube_id} opts={opts} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|