add component RandomStoryList and new common data

components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx

@@ -1,40 +1,57 @@
+'use client';
 import avatar from '../../../public/icons/about/default_avatar.png';
 import studio from '../../../public/icons/about/Studio-N.png';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { BsChevronLeft, BsChevronRight } from 'react-icons/bs';
 import { Modal } from 'components/basecomponents/Modal';
+
 import { useTranslation } from 'react-i18next';
 
+type Feedback = {
+  id: number;
+  avatar: string;
+  author: string;
+  title: string;
+  text: string;
+};
+
 export const SliderFeedbacksSm = (): JSX.Element => {
+  const { t } = useTranslation();
   const [currentSlide, setCurrentSlide] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeFeedbackIndex, setActiveFeedbackIndex] = useState<number | null>(null);
-  const { t } = useTranslation();
 
-  const feedbacks = [
-    {
-      id: 1,
-      avatar: avatar,
-      author: 'M.Poláček',
-      title: t('feedbacks-section.id-1_title'),
-      text: t('feedbacks-section.id-1_text'),
-    },
-    {
-      id: 2,
-      avatar: studio,
-      author: 'Vít Svoboda v podcastu Studio N',
-      title: t('feedbacks-section.id-2_title'),
-      text: t('feedbacks-section.id-2_text'),
-    },
-    {
-      id: 3,
-      avatar: avatar,
-      author: 'Salome Engibaryan',
-      title: t('feedbacks-section.id-3_title'),
-      text: t('feedbacks-section.id-3_text'),
-    },
-  ];
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const feedback = [
+      {
+        id: 1,
+        avatar: avatar.src,
+        author: 'M.Poláček',
+        title: t('feedbacks-section.id-1_title'),
+        text: t('feedbacks-section.id-1_text'),
+      },
+      {
+        id: 2,
+        avatar: studio.src,
+        author: 'Vít Svoboda v podcastu Studio N',
+        title: t('feedbacks-section.id-2_title'),
+        text: t('feedbacks-section.id-2_text'),
+      },
+      {
+        id: 3,
+        avatar: avatar.src,
+        author: 'Salome Engibaryan',
+        title: t('feedbacks-section.id-3_title'),
+        text: t('feedbacks-section.id-3_text'),
+      },
+    ];
+
+    setFeedbacks(feedback);
+    setLoading(false);
+  }, [t]);
 
   const prevSlide = () => {
     const isFirstSlide = currentSlide === 0;
@@ -57,18 +74,22 @@ export const SliderFeedbacksSm = (): JSX.Element => {
   return (
     <div className="relative group">
       <div className=" max-w-[350px] m-auto shadow-[#F0F0F0] rounded-2xl">
-        <div
-          key={feedbacks[currentSlide].id}
-          className="mb-3 px-6 pt-6 pb-8 rounded-[16px] shadow-md bg-white max-w-[350px] hover:-translate-y-1 font-normal"
-        >
-          <Image src={feedbacks[currentSlide].avatar} alt="avatar" width={64} height={64} />
-          <h3 className="mt-4 text-base font-bold h-[56px]">{feedbacks[currentSlide].title}</h3>
-          <p className="mb-4 text-sm">{feedbacks[currentSlide].author}</p>
-          <p className="line-clamp-5 text-sm">{feedbacks[currentSlide].text}...</p>
-          <button className="text-primary-blue decor underline decoration-1 flex" onClick={() => openModalForFeedback(currentSlide)}>
-            Vice
-          </button>
-        </div>
+        {loading ? (
+          <p>Loading...</p>
+        ) : (
+          <div
+            key={feedbacks[currentSlide].id}
+            className="mb-3 px-6 pt-6 pb-8 rounded-[16px] shadow-md bg-white max-w-[350px] hover:-translate-y-1 font-normal"
+          >
+            <Image src={feedbacks[currentSlide].avatar} alt="avatar" width={64} height={64} />
+            <h3 className="mt-4 text-base font-bold h-[56px]">{feedbacks[currentSlide].title}</h3>
+            <p className="mb-4 mt-4 text-sm">{feedbacks[currentSlide].author}</p>
+            <p className="line-clamp-5 text-sm">{feedbacks[currentSlide].text}...</p>
+            <button className="text-primary-blue decor underline decoration-1 flex" onClick={() => openModalForFeedback(currentSlide)}>
+              Vice
+            </button>
+          </div>
+        )}
       </div>
       <Modal
         closeModal={() => {

components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx

@@ -1,40 +1,55 @@
+'use client';
 import avatar from '../../../public/icons/about/default_avatar.png';
 import studio from '../../../public/icons/about/Studio-N.png';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { BsChevronLeft, BsChevronRight } from 'react-icons/bs';
 import { Modal } from 'components/basecomponents/Modal';
 import { useTranslation } from 'react-i18next';
 
+type Feedback = {
+  id: number;
+  avatar: string;
+  author: string;
+  title: string;
+  text: string;
+};
+
 export const SliderFeedbacks = (): JSX.Element => {
   const [currentSlide, setCurrentSlide] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [activeFeedbackIndex, setActiveFeedbackIndex] = useState<number | null>(null);
   const { t } = useTranslation();
 
-  const feedbacks = [
-    {
-      id: 1,
-      avatar: avatar,
-      author: 'M.Poláček',
-      title: t('feedbacks-section.id-1_title'),
-      text: t('feedbacks-section.id-1_text'),
-    },
-    {
-      id: 2,
-      avatar: studio,
-      author: 'Vít Svoboda v podcastu Studio N',
-      title: t('feedbacks-section.id-2_title'),
-      text: t('feedbacks-section.id-2_text'),
-    },
-    {
-      id: 3,
-      avatar: avatar,
-      author: 'Salome Engibaryan',
-      title: t('feedbacks-section.id-3_title'),
-      text: t('feedbacks-section.id-3_text'),
-    },
-  ];
+  const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
+
+  useEffect(() => {
+    const feedback = [
+      {
+        id: 1,
+        avatar: avatar.src,
+        author: 'M.Poláček',
+        title: t('feedbacks-section.id-1_title'),
+        text: t('feedbacks-section.id-1_text'),
+      },
+      {
+        id: 2,
+        avatar: studio.src,
+        author: 'Vít Svoboda v podcastu Studio N',
+        title: t('feedbacks-section.id-2_title'),
+        text: t('feedbacks-section.id-2_text'),
+      },
+      {
+        id: 3,
+        avatar: avatar.src,
+        author: 'Salome Engibaryan',
+        title: t('feedbacks-section.id-3_title'),
+        text: t('feedbacks-section.id-3_text'),
+      },
+    ];
+
+    setFeedbacks(feedback);
+  }, [t]);
 
   const prevSlide = () => {
     setCurrentSlide((prevSlide) => (prevSlide === 0 ? feedbacks.length - 1 : prevSlide - 1));

components/basecomponents/Story/RandomStoryList.tsx

@@ -0,0 +1,58 @@
+'use client';
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import stories from '../../../data/stories';
+import { useLanguage } from 'utils/useLanguageHook';
+
+const maxAttempts = 3;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const randomStories: any[] = [];
+const storiesCount = stories.length;
+
+for (let i = 0; i < maxAttempts && randomStories.length < 3; i++) {
+  const randomIndex = Math.floor(Math.random() * storiesCount);
+  const randomStory = stories[randomIndex];
+  if (!randomStories.includes(randomStory)) {
+    randomStories.push(randomStory);
+  }
+}
+
+const RandomStoryList: React.FC = () => {
+  const { currentLanguage } = useLanguage();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [randomStoriesArray, setRandomStoriesArray] = useState<any[]>([]);
+
+  useEffect(() => {
+    setRandomStoriesArray(randomStories);
+  }, [randomStoriesArray]);
+
+  return (
+    <div className="w-full mx-auto py-10">
+      <ul className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 md:gap-6">
+        {randomStoriesArray.map((story) => {
+          return (
+            <li key={story.slug} className="bg-white shadow-m rounded-[32px] text-center">
+              <Image
+                // className={`w-[354px] h-[266px] overflow-hidden rounded-t-[32px]`}
+                className="rounded-t-[32px]"
+                src={`/kids/${story.slug}.jpg`}
+                alt={story.title[currentLanguage]}
+                width={354}
+                height={266}
+              />
+              <Link href={`/kids/stories/${story.slug}`}>
+                <p className="bg-white h-[88px] font-bold text-xl text-center px-4 pt-4 pb-6 text-primary-blue rounded-b-[32px] flex items-center justify-center">
+                  {story.title[currentLanguage]}
+                </p>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default RandomStoryList;

components/basecomponents/Story/StoriesList.tsx

@@ -37,7 +37,7 @@ const StoriesList = ({ stories }: StoriesListProps) => {
               priority={priority}
             />
           </div>
-          <p className="bg-[#FFFFFF] text-primary-blue text-center text-2xl rounded-b-2xl flex justify-center text-center h-[76px] sm:h-[100px] items-center">
+          <p className="bg-[#FFFFFF] text-primary-blue text-2xl rounded-b-2xl flex justify-center text-center h-[76px] sm:h-[100px] items-center">
             {story.title[currentLanguage]}
           </p>
         </Link>

pages/kids/stories/[story].tsx

@@ -12,10 +12,13 @@ import { Story } from '@types';
 import { getCountryVariant, Language } from '../../../utils/locales';
 import Custom404 from '../../404';
 import { StoryPhrase, getStoryData } from '../../../components/basecomponents/Story/storyStore';
+import { H2 } from 'components/Typography';
+import RandomStoryCards from 'components/basecomponents/Story/RandomStoryList';
 
 interface StoriesProps {
   story: Story | undefined;
   phrases: StoryPhrase[];
+  stories: Story[];
 }
 
 interface UrlParams extends ParsedUrlQuery {
@@ -68,6 +71,19 @@ const StoriesContainer = ({ story, phrases }: StoriesProps): ReactNode => {
           <div className="px-6 py-4 flex rounded-2xl overflow-hidden shadow-xl bg-white md:w-4/5 m-auto">
             <StoryReader titleCurrent={title_current} titleOther={title_other} id={story.slug} country={story.country} phrases={phrases} />
           </div>
+          {/* other story */}
+          <div className="block mt-16 m-auto mb-36 md:w-4/5">
+            <div className="text-center  md:flex md:items-center">
+              <H2>{t('kids_page.otherStories_title')}</H2>
+              <Link
+                href={`/kids/stories`}
+                className="w-44 h-10 flex items-center justify-center rounded-xl bg-primary-blue text-base text-white px-5 py-3 md:ml-auto mx-auto md:mx-0"
+              >
+                {t('kids_page.otherStories_btn_title')}
+              </Link>
+            </div>
+            <RandomStoryCards />
+          </div>
         </>
       ) : (
         <Custom404 />

public/locales/cs/common.json

@@ -78,7 +78,9 @@
     "ukrainianStories": "Ukrajinské lidové pohádky",
     "stories": "Pohádky",
     "homepage": "Hlavní stránka",
-    "downloadStory": "Pohádku si můžete <0>stáhnout jako PDF</0>."
+    "downloadStory": "Pohádku si můžete <0>stáhnout jako PDF</0>.",
+    "otherStories_title": "Další pohádky",
+    "otherStories_btn_title": "Zobrazit všechny"
   },
   "about_page": {
     "title": "<strong>Movapp.cz</strong> je projekt, který vznikl v rámci iniciativy <strong>Stojíme za Ukrajinou</strong> v komunitě expertních dobrovolníků <strong>Česko.Digital.</strong>",

public/locales/pl/common.json

@@ -66,7 +66,9 @@
   },
   "kids_page": {
     "downloadPDF": "Pobierz w PDF",
-    "downloadStory": ""
+    "downloadStory": "",
+    "otherStories_title": "Więcej bajek",
+    "otherStories_btn_title": "Pokaż wszystko"
   },
   "about_page": {
     "title": "<strong>Movapp.eu</strong> to projekt, który powstał w ramach inicjatywy <strong>Stojíme za Ukrajinou</strong> w społeczności ekspertów wolontariuszy <strong>Česko.Digital.</strong>",

public/locales/sk/common.json

@@ -79,7 +79,9 @@
     "ukrainianStories": "Ukrajinské ľudové rozprávky",
     "stories": "Rozprávky",
     "homepage": "Domovská stránka",
-    "downloadStory": "Rozprávku si môžete <0>stiahnuť aj ako PDF súbor</0>."
+    "downloadStory": "Rozprávku si môžete <0>stiahnuť aj ako PDF súbor</0>.",
+    "otherStories_title": "Ďalšie rozprávky",
+    "otherStories_btn_title": "Zobraziť všetky"
   },
   "about_page": {
     "title": "<strong>Movapp.cz</strong> je projekt, ktorý vznikol v rámci iniciatívy <strong>Stojíme za Ukrajinou</strong> v komunite expertných dobrovoľníkov <strong>Česko.Digital.</strong>",

public/locales/uk/common.json

@@ -97,7 +97,9 @@
     "ukrainianStories": "Українські народні казки",
     "stories": "Казки",
     "homepage": "Домашня сторінка",
-    "downloadStory": "Можете завантажити казку <0>у форматі PDF.</0>"
+    "downloadStory": "Можете завантажити казку <0>у форматі PDF.</0>",
+    "otherStories_title": "Більше казок",
+    "otherStories_btn_title": "Показати усі"
   },
   "about_page": {
     "title": "<strong>Movapp.eu</strong> – це проект, який створено в рамках ініціативи <strong>Stojime za Ukrajinou</strong> в спільноті експертів-волонтерів <strong>Cesko.Digital.</strong>",