diff --git a/src/components/Podcasts/Podcasts.Lists.tsx b/src/components/Podcasts/Podcasts.Lists.tsx index 8f28f49..6c18cb5 100644 --- a/src/components/Podcasts/Podcasts.Lists.tsx +++ b/src/components/Podcasts/Podcasts.Lists.tsx @@ -18,7 +18,7 @@ export default function PodcastsLists({ shows }: Props) { const isEven = idx % 2 === 0 return ( - +
@@ -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; diff --git a/src/containers/PodcastsContainer.tsx b/src/containers/PodcastsContainer.tsx index 7d47d85..b9837eb 100644 --- a/src/containers/PodcastsContainer.tsx +++ b/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 ( @@ -23,7 +37,7 @@ const PodcastsContainer = (props: Props) => { Latest Episodes} pattern={[{ cols: 2, size: 'medium' }]} @@ -43,7 +57,7 @@ const PodcastsContainer = (props: Props) => {