[#142] podcasts details

src/components/Podcasts/Podcasts.Lists.tsx

@@ -18,7 +18,7 @@ export default function PodcastsLists({ shows }: Props) {
           const isEven = idx % 2 === 0
           return (
             <ShowCardContainer key={show.id} className="w-8">
-              <ShowCard isEven={isEven}>
+              <ShowCard isEven={isEven} href={`/podcasts/${show.slug}`}>
                 <div>
                   <Top>
                     <ShowInfoContainer>
@@ -72,7 +72,7 @@ const PodcastListsContainer = styled(Grid)`
 
 const ShowCardContainer = styled(GridItem)``
 
-const ShowCard = styled.div<{ isEven: boolean }>`
+const ShowCard = styled(Link)<{ isEven: boolean }>`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -80,6 +80,7 @@ const ShowCard = styled.div<{ isEven: boolean }>`
   border: 1px solid rgb(var(--lsd-text-primary));
   box-sizing: border-box;
   height: 516px;
+  text-decoration: none;
   background-color: ${(props) =>
     props.isEven
       ? 'rgb(var(--lsd-surface-secondary))'
@@ -90,6 +91,8 @@ const ShowCard = styled.div<{ isEven: boolean }>`
   }
 `
 
+const ShowCardLinkContainer = styled(Link)``
+
 const ShowInfoContainer = styled.div`
   display: flex;
   gap: 16px;

src/containers/PodcastsContainer.tsx

@@ -15,6 +15,20 @@ interface Props {
 const PodcastsContainer = (props: Props) => {
   const { shows, highlightedEpisodes, latestEpisodes } = props
 
+  const requiredHighlightPostsCount = 2
+  const gapCount = requiredHighlightPostsCount - highlightedEpisodes.length
+
+  // Spread the existing highlighted episodes and fill the rest with the latest episodes
+  const highlightPosts = [
+    ...highlightedEpisodes,
+    ...latestEpisodes.slice(0, gapCount),
+  ]
+
+  // Now we need to remove the highlight posts from the latest episodes
+  const latestPosts = latestEpisodes.filter(
+    (episode) => !highlightPosts.includes(episode),
+  )
+
   return (
     <PodcastsGrid>
       <PodcastsBodyContainer className={'w-16'}>
@@ -23,7 +37,7 @@ const PodcastsContainer = (props: Props) => {
         <Episodes>
           <PodcastSection>
             <EpisodesList
-              episodes={highlightedEpisodes}
+              episodes={highlightPosts}
               bordered="except-first-row"
               header={<EpisodeListHeader>Latest Episodes</EpisodeListHeader>}
               pattern={[{ cols: 2, size: 'medium' }]}
@@ -43,7 +57,7 @@ const PodcastsContainer = (props: Props) => {
             <EpisodesList
               bordered
               shows={shows}
-              episodes={latestEpisodes.slice(0, 4)}
+              episodes={latestPosts.slice(0, 4)}
               pattern={[{ cols: 4, size: 'small' }]}
               breakpoints={[
                 {