feat: modernized web application

nextjs/src/components/GuideVideoList.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import YouTube from 'react-youtube';
+
+import type { IGuideItem } from '@/models/IGuideItem';
+import style from '@/styles/web.module.scss';
+
+type Props = {
+  items: IGuideItem[];
+};
+
+const opts = {
+  height: '195',
+  width: '320',
+};
+
+export function GuideVideoList({ items }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className={style.guideBody}>
+      <h2>{t('guide')}</h2>
+      <hr />
+      <br />
+      {items.map((el) => (
+        <div
+          key={`guideItemsLoop-${el.id}`}
+          className={style.characterBlock}
+          style={{
+            animationDelay: `${el.id * 0.2}s`,
+          }}
+        >
+          <h4>{el.title}</h4>
+          <hr />
+          <div>{el.description}</div>
+          <div className={style.centerVideo}>
+            <YouTube videoId={el.youtube_id} opts={opts} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}