acid-info/logos-press-engine
1
0
Fork 0
mirror of https://github.com/acid-info/logos-press-engine.git synced 2025-02-23 06:38:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use PostsGrid for rendering related episodes

Browse Source
This commit is contained in:
Hossein Mehrabi 2023-08-25 00:08:06 +03:30
parent b6dffda933
commit 1498382776
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
1 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
View File

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