New stories layout

components/basecomponents/Story/StoriesList.tsx

@@ -1,7 +1,6 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useTranslation } from 'react-i18next';
-
+import { useTranslation } from 'next-i18next';
 import { CountryVariant, getCountryVariant } from 'utils/locales';
 
 /** Components */
@@ -24,73 +23,66 @@ const StoriesList = ({ stories }: StoriesListProps) => {
   // We support only stories if there is title translated to current language
   const filteredStories = stories.filter((story) => story.title[countryVariant]);
 
-  // We want to have list of Ukrainian stories, then other stories
-  const storiesUA = filteredStories.filter((story) => story.country === 'UA');
-  const storiesCEE = filteredStories.filter((story) => story.country === 'CZ');
-
-  const renderStoryPanel = (story: Story) => (
-    <div className="h-42 m-auto my-8 flex bg-slate-50 rounded-2xl sm:w-3/5 xl:w-2/5 xxl:w-1/3" key={story.slug}>
-      <div className="relative w-[105px] lg:h-[200px] lg:w-[300px]">
-        <Image src={`/kids/${story.slug}.jpg`} fill className="rounded-l-2xl" alt={story.title[currentLanguage]} />
-      </div>
-      <div className="flex items-center xl:ml-6 w-full">
-        <div className="w-3/5">
-          <p className="my-4 mx-4 md:mx-8 text-sm lg:text-xl ">{story.title[currentLanguage]}</p>
-          <div className="flex items-center mb-2">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-5 w-5 mx-2 md:ml-8 text-sm lg:text-xl"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <span className="text-sm lg:text-xl">{story.duration}</span>
+  const RenderStoryPanel = ({ story, priority }: { story: Story; priority?: boolean }) => {
+    return (
+      <div className="max-w-[342px] sm:max-w-none h-[376px] mb-[32px] sm:w-[400px] sm:h-[400px] sm:mb-[48px] group">
+        <Link href={`/kids/stories/${story.slug}`}>
+          <div className="rounded-t-2xl relative h-[300px] overflow-hidden">
+            <Image
+              src={`/kids/${story.slug}.jpg`}
+              width={400}
+              height={300}
+              className="w-full h-full object-cover rounded-t-2xl group-hover:scale-110 transition duration-200"
+              alt={story.title[currentLanguage]}
+              priority={priority}
+            />
           </div>
-        </div>
-
-        <Link
-          href={`/kids/stories/${story.slug}`}
-          className="w-2/5 bg-primary-blue rounded-2xl text-white text-[10px] sm:text-[12px] lg:text-base p-2 w-3/5 text-center mr-4"
-        >
-          {t('kids_page.playStory')}
+          <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">
+            {story.title[currentLanguage]}
+          </p>
         </Link>
       </div>
-    </div>
-  );
+    );
+  };
 
-  const renderStoriesSection = (language: string, stories: Story[], titleKey: string) => {
+  const RenderStoriesSection = ({
+    language,
+    stories,
+    titleKey,
+  }: {
+    language: string;
+    stories: Story[];
+    titleKey: 'kids_page.czechStories' | 'kids_page.ukrainianStories';
+  }) => {
     // Filter stories that have a title in the current language
     const localizedStories = stories.filter((story: Story) => story.title[language]);
 
     return (
       <>
         {currentPlatform === Platform.KIOSK ? (
           <div className="flex flex-col">
-            <h2 className={`text-primary-blue text-center ${currentPlatform === Platform.KIOSK ? 'text-20' : ''}`}>
-              {t(titleKey, { defaultValue: 'stories' })}
-            </h2>
+            <h2 className={'text-primary-blue text-center text-20'}>{t(titleKey)}</h2>
             <div className="grid grid-cols-3">
               {localizedStories.map((story) => (
                 <StoryCard story={story} key={story.slug} currentLanguage={currentLanguage} />
               ))}
             </div>
           </div>
         ) : (
-          <>
-            <h2 className={`text-primary-blue text-center`}>{t(titleKey, { defaultValue: 'stories' })}</h2>
-            {localizedStories.map((story) => renderStoryPanel(story))}
-          </>
+          <div className="grid grid-cols-1 min-[900px]:grid-cols-2 xl:grid-cols-3 justify-items-center">
+            {localizedStories.map((story) => {
+              // If the story is the first one, we need to prirotize it, since its image has to be preloaded
+              return <RenderStoryPanel key={story.slug} story={story} priority={localizedStories[0] === story} />;
+            })}
+          </div>
         )}
       </>
     );
   };
   return (
-    <div className="flex flex-col">
-      {storiesCEE.length > 0 && renderStoriesSection('cs', storiesCEE, 'kids_page.czechStories')}
-      {storiesUA.length > 0 && renderStoriesSection('uk', storiesUA, 'kids_page.ukrainianStories')}
+    <div className="flex flex-col max-w-[1296px] m-auto">
+      <p className={'text-[30px] sm:text-[38px] text-primary-blue text-center mb-[32px] sm:mb-[43px]'}>{t('header.forkids_stories')}</p>
+      {filteredStories.length > 0 && <RenderStoriesSection language="cs" stories={filteredStories} titleKey="kids_page.czechStories" />}
     </div>
   );
 };