From 1498382776ca3f55e96e9fb99a95f742f6e848e8 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Fri, 25 Aug 2023 00:08:06 +0330
Subject: [PATCH] refactor: use PostsGrid for rendering related episodes

---
 .../Footer/Episode.RelatedEpisodes.tsx        | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx b/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
index 901a312..d73769f 100644
--- a/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
+++ b/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
@@ -1,9 +1,8 @@
+import { LPE } from '@/types/lpe.types'
 import { Button, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { useState } from 'react'
-import { LPE } from '@/types/lpe.types'
-import { PostCard } from '@/components/PostCard'
-import { Grid, GridItem } from '@/components/Grid/Grid'
+import { PostsGrid } from '../../PostsGrid'
 
 type props = {
   podcastSlug: string
@@ -24,18 +23,25 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
   return (
     <Container>
       <Typography>More Episodes</Typography>
-      <EpisodeCards>
-        {relatedEpisodes.slice(0, showIndex).map((episode, idx: number) => (
-          <PostCardContainer className="w-8" key={'related-episode' + idx}>
-            <PostCard
-              size="xsmall"
-              displayPodcastShow={false}
-              contentType={LPE.PostTypes.Podcast}
-              data={{ ...PostCard.toData(episode), tags: [] }}
-            />
-          </PostCardContainer>
-        ))}
-      </EpisodeCards>
+      <PostsGrid
+        displayPodcastShow={false}
+        posts={relatedEpisodes.slice(0, showIndex)}
+        pattern={[{ cols: 2, size: 'xsmall' }]}
+        breakpoints={[
+          {
+            breakpoint: 'xs',
+            pattern: [{ cols: 1, size: 'small' }],
+          },
+          {
+            breakpoint: 'sm',
+            pattern: [{ cols: 1, size: 'small' }],
+          },
+          {
+            breakpoint: 'md',
+            pattern: [{ cols: 2, size: 'small' }],
+          },
+        ]}
+      />
       {relatedEpisodes?.length > 4 && (
         <ShowButton onClick={toggleShowMore}>
           {showMore ? 'Show less' : 'Show more'}
@@ -53,17 +59,9 @@ const Container = styled.div`
   flex-direction: column;
 `
 
-const EpisodeCards = styled(Grid)`
-  gap: 0 16px;
-`
-
 const ShowButton = styled(Button)`
   height: 40px;
   margin-top: 24px;
 `
 
-const PostCardContainer = styled(GridItem)`
-  padding-top: 24px;
-`
-
 export default RelatedEpisodes