fix: restore broken pages with PostCard and PostsGrid components
This commit is contained in:
parent
e8fad7451c
commit
97cf618330
|
@ -1,8 +1,9 @@
|
|||
import { LPE } from '@/types/lpe.types'
|
||||
import { Button, Typography } from '@acid-info/lsd-react'
|
||||
import { Button } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import { useState } from 'react'
|
||||
import { lsdUtils } from '../../../utils/lsd.utils'
|
||||
import { PodcastSection } from '../../Podcasts/Podcast.Section'
|
||||
import { PostsGrid } from '../../PostsGrid'
|
||||
|
||||
type props = {
|
||||
|
@ -23,23 +24,24 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
|
|||
|
||||
return (
|
||||
<Container>
|
||||
<Typography>More Episodes</Typography>
|
||||
<PostsGrid
|
||||
className="related-episodes"
|
||||
displayPodcastShow={false}
|
||||
posts={relatedEpisodes.slice(0, showIndex)}
|
||||
pattern={[{ cols: 2, size: 'xsmall' }]}
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 'xs',
|
||||
pattern: [{ cols: 1, size: 'small' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'sm',
|
||||
pattern: [{ cols: 2, size: 'small' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<PodcastSection title="More posts">
|
||||
<PostsGrid
|
||||
displayPodcastShow={false}
|
||||
posts={relatedEpisodes.slice(0, showIndex)}
|
||||
pattern={[{ cols: 2, size: 'small' }]}
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 'xs',
|
||||
pattern: [{ cols: 1, size: 'small' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'sm',
|
||||
pattern: [{ cols: 2, size: 'small' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</PodcastSection>
|
||||
|
||||
{relatedEpisodes?.length > 4 && (
|
||||
<ShowButton onClick={toggleShowMore}>
|
||||
{showMore ? 'Show less' : 'Show more'}
|
||||
|
@ -50,34 +52,22 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
|
|||
}
|
||||
|
||||
const Container = styled.div`
|
||||
margin-top: 72px;
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
padding-block: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: var(--lsd-spacing-64);
|
||||
|
||||
.related-episodes {
|
||||
.post-card-wrapper {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'sm', 'up')} {
|
||||
.related-episodes {
|
||||
padding-top: 24px;
|
||||
|
||||
.post-card-wrapper {
|
||||
padding-top: 0;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
|
||||
margin-top: var(--lsd-spacing-32);
|
||||
}
|
||||
`
|
||||
|
||||
const ShowButton = styled(Button)`
|
||||
height: 40px;
|
||||
margin-top: 24px;
|
||||
margin-top: 48px;
|
||||
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
|
||||
margin-top: var(--lsd-spacing-32);
|
||||
}
|
||||
`
|
||||
|
||||
export default RelatedEpisodes
|
||||
|
|
|
@ -1,45 +0,0 @@
|
|||
import styled from '@emotion/styled'
|
||||
import { LPE } from '../../types/lpe.types'
|
||||
import { PostsGrid, PostsGridProps } from '../PostsGrid'
|
||||
|
||||
interface Props {}
|
||||
|
||||
export type EpisodesListProps = Partial<
|
||||
React.ComponentProps<typeof EpisodeListContainer>
|
||||
> & {
|
||||
header?: React.ReactNode
|
||||
episodes: LPE.Podcast.Document[]
|
||||
shows?: LPE.Podcast.Show[]
|
||||
displayShow?: boolean
|
||||
} & Pick<PostsGridProps, 'pattern' | 'breakpoints' | 'bordered'>
|
||||
|
||||
export default function EpisodesList({
|
||||
shows = [],
|
||||
episodes = [],
|
||||
pattern,
|
||||
breakpoints,
|
||||
bordered,
|
||||
header,
|
||||
displayShow = true,
|
||||
...props
|
||||
}: EpisodesListProps) {
|
||||
return (
|
||||
<EpisodeListContainer {...props}>
|
||||
{header}
|
||||
<PostsGrid
|
||||
shows={shows}
|
||||
posts={episodes}
|
||||
bordered={bordered}
|
||||
pattern={pattern}
|
||||
breakpoints={breakpoints}
|
||||
displayPodcastShow={displayShow}
|
||||
/>
|
||||
</EpisodeListContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const EpisodeListContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 16px;
|
||||
`
|
|
@ -1,14 +1,19 @@
|
|||
import styled from '@emotion/styled'
|
||||
import React from 'react'
|
||||
import { Section, SectionProps } from '../Section/Section'
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode
|
||||
}
|
||||
export type PodcastSectionProps = SectionProps
|
||||
|
||||
export default function PodcastSection({ children, ...props }: Props) {
|
||||
return <Section {...props}>{children}</Section>
|
||||
}
|
||||
export const PodcastSection: React.FC<PodcastSectionProps> = ({
|
||||
children,
|
||||
...props
|
||||
}) => (
|
||||
<Section {...props}>
|
||||
<Container>{children}</Container>
|
||||
</Section>
|
||||
)
|
||||
|
||||
const Section = styled.div`
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
const Container = styled.div`
|
||||
& > *:not(:first-child) {
|
||||
margin-top: var(--lsd-spacing-16);
|
||||
}
|
||||
`
|
||||
|
|
|
@ -1,40 +1,58 @@
|
|||
import { Typography } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import React, { PropsWithChildren } from 'react'
|
||||
import React from 'react'
|
||||
import { lsdUtils } from '../../utils/lsd.utils'
|
||||
|
||||
type Props = PropsWithChildren<{
|
||||
title: string
|
||||
export type SectionProps = Partial<
|
||||
React.ComponentProps<typeof SectionContainer>
|
||||
> & {
|
||||
title?: React.ReactNode
|
||||
subtitle?: string | React.ReactNode
|
||||
}>
|
||||
bordered?: boolean
|
||||
}
|
||||
|
||||
export const Section = ({ title, subtitle, children, ...props }: Props) => {
|
||||
export const Section = ({
|
||||
title,
|
||||
subtitle,
|
||||
bordered = true,
|
||||
children,
|
||||
...props
|
||||
}: SectionProps) => {
|
||||
return (
|
||||
<SectionContainer {...props}>
|
||||
<Container>
|
||||
<Typography genericFontFamily="sans-serif" variant="body2">
|
||||
{title}
|
||||
</Typography>
|
||||
{subtitle && (
|
||||
<>
|
||||
<Typography variant="body2">•</Typography>
|
||||
{typeof subtitle === 'string' ? (
|
||||
<Typography genericFontFamily="sans-serif" variant="body2">
|
||||
<SectionContainer bordered={bordered} {...props}>
|
||||
{(title || subtitle) && (
|
||||
<Container>
|
||||
<Typography component="h2" variant="subtitle2">
|
||||
{title}
|
||||
</Typography>
|
||||
{subtitle && (
|
||||
<>
|
||||
<Typography variant="body2">•</Typography>
|
||||
{typeof subtitle === 'string' ? (
|
||||
<Typography variant="body2">subtitle</Typography>
|
||||
) : (
|
||||
subtitle
|
||||
</Typography>
|
||||
) : (
|
||||
subtitle
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
)}
|
||||
{children}
|
||||
</SectionContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const SectionContainer = styled.section`
|
||||
const SectionContainer = styled.section<{
|
||||
bordered?: boolean
|
||||
}>`
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: ${(props) =>
|
||||
props.bordered ? '1px solid rgb(var(--lsd-border-primary))' : 'none'};
|
||||
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} {
|
||||
margin-top: var(--lsd-spacing-16);
|
||||
}
|
||||
`
|
||||
|
||||
const Container = styled.div`
|
||||
|
@ -42,4 +60,14 @@ const Container = styled.div`
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
padding: var(--lsd-spacing-24) 0;
|
||||
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} {
|
||||
padding: var(--lsd-spacing-16) 0;
|
||||
|
||||
& > h2 {
|
||||
${lsdUtils.typography('subtitle3')}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { Typography } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import React from 'react'
|
||||
import { Hero } from '../../components/Hero'
|
||||
import { PostsGrid } from '../../components/PostsGrid'
|
||||
import { Section } from '../../components/Section/Section'
|
||||
import { uiConfigs } from '../../configs/ui.configs'
|
||||
import { useRecentPosts } from '../../queries/useRecentPosts.query'
|
||||
import { ApiPaginatedPayload } from '../../types/data.types'
|
||||
|
@ -49,10 +49,7 @@ export const HomePage: React.FC<HomePageProps> = ({
|
|||
},
|
||||
]}
|
||||
/>
|
||||
<Section>
|
||||
<Typography component="h2" variant="subtitle2">
|
||||
Latest posts
|
||||
</Typography>
|
||||
<Section title="Latest posts">
|
||||
<PostsGrid
|
||||
pattern={[{ cols: 4, size: 'small' }]}
|
||||
breakpoints={[
|
||||
|
@ -139,23 +136,6 @@ const Root = styled('div')`
|
|||
}
|
||||
`
|
||||
|
||||
const Section = styled.div`
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
|
||||
& > h2 {
|
||||
padding: var(--lsd-spacing-24) 0;
|
||||
}
|
||||
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'md', 'down')} {
|
||||
margin-top: var(--lsd-spacing-16);
|
||||
|
||||
& > h2 {
|
||||
padding: var(--lsd-spacing-16) 0;
|
||||
${lsdUtils.typography('subtitle3')}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const HeroContainer = styled.div`
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
|
||||
& > div:last-of-type {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { Grid, GridItem } from '@/components/Grid/Grid'
|
||||
import EpisodesList from '@/components/Podcasts/Episodes.List'
|
||||
import PodcastSection from '@/components/Podcasts/Podcast.Section'
|
||||
import PodcastShowCard from '@/components/Podcasts/PodcastShowCard'
|
||||
import { Button, Typography } from '@acid-info/lsd-react'
|
||||
import { Button } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import { PodcastSection } from '../components/Podcasts/Podcast.Section'
|
||||
import { PostsGrid } from '../components/PostsGrid'
|
||||
import { useRecentEpisodes } from '../queries/useRecentEpisodes.query'
|
||||
import { ApiPaginatedPayload } from '../types/data.types'
|
||||
import { LPE } from '../types/lpe.types'
|
||||
|
@ -38,13 +38,10 @@ const PodcastShowContainer = (props: Props) => {
|
|||
<PodcastsGrid>
|
||||
<PodcastsBodyContainer>
|
||||
<CustomPodcastShowCard show={show} />
|
||||
<PodcastSection>
|
||||
<EpisodesList
|
||||
<PodcastSection title="Latest episodes">
|
||||
<PostsGrid
|
||||
shows={[show]}
|
||||
displayShow={false}
|
||||
episodes={highlightedPosts}
|
||||
header={<Typography variant="body2">All episodes</Typography>}
|
||||
bordered="except-first-row"
|
||||
posts={highlightedPosts}
|
||||
pattern={[
|
||||
{
|
||||
cols: 2,
|
||||
|
@ -58,39 +55,32 @@ const PodcastShowContainer = (props: Props) => {
|
|||
{
|
||||
cols: 1,
|
||||
size: 'small',
|
||||
rowBorder: 'except-first-row',
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<PostsGrid
|
||||
shows={[show]}
|
||||
posts={latestPosts}
|
||||
pattern={[
|
||||
{
|
||||
cols: 4,
|
||||
size: 'small',
|
||||
},
|
||||
]}
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 'xs',
|
||||
pattern: [{ cols: 1, size: 'small' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'sm',
|
||||
pattern: [{ cols: 4, size: 'small' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</PodcastSection>
|
||||
<EpisodesList
|
||||
shows={[show]}
|
||||
displayShow={false}
|
||||
episodes={latestPosts}
|
||||
bordered={highlightedPosts.length > 0 ? true : 'except-first-row'}
|
||||
pattern={[
|
||||
{
|
||||
cols: 4,
|
||||
size: 'small',
|
||||
},
|
||||
]}
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 'xs',
|
||||
pattern: [{ cols: 1, size: 'small' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'sm',
|
||||
pattern: [{ cols: 4, size: 'xsmall' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'md',
|
||||
pattern: [{ cols: 4, size: 'xsmall' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</PodcastsBodyContainer>
|
||||
</PodcastsGrid>
|
||||
{query.hasNextPage && (
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { Grid, GridItem } from '@/components/Grid/Grid'
|
||||
import EpisodesList from '@/components/Podcasts/Episodes.List'
|
||||
import PodcastSection from '@/components/Podcasts/Podcast.Section'
|
||||
import PodcastsLists from '@/components/Podcasts/Podcasts.Lists'
|
||||
import styled from '@emotion/styled'
|
||||
import { PodcastSection } from '../components/Podcasts/Podcast.Section'
|
||||
import { PostsGrid } from '../components/PostsGrid'
|
||||
import { LPE } from '../types/lpe.types'
|
||||
import { lsdUtils } from '../utils/lsd.utils'
|
||||
|
||||
|
@ -35,19 +35,15 @@ const PodcastsContainer = (props: Props) => {
|
|||
<PodcastsLists shows={shows} />
|
||||
|
||||
<Episodes>
|
||||
<PodcastSection>
|
||||
<EpisodesList
|
||||
episodes={highlightPosts}
|
||||
<PodcastSection title="Latest episodes">
|
||||
<PostsGrid
|
||||
posts={highlightPosts}
|
||||
shows={shows}
|
||||
bordered="except-first-row"
|
||||
header={<EpisodeListHeader>Latest Episodes</EpisodeListHeader>}
|
||||
pattern={[{ cols: 2, size: 'medium' }]}
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 'xs',
|
||||
pattern: [
|
||||
{ cols: 1, size: 'small', rowBorder: 'except-first-row' },
|
||||
],
|
||||
pattern: [{ cols: 1, size: 'small' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'sm',
|
||||
|
@ -55,23 +51,19 @@ const PodcastsContainer = (props: Props) => {
|
|||
},
|
||||
]}
|
||||
/>
|
||||
<EpisodesList
|
||||
bordered
|
||||
<PostsGrid
|
||||
shows={shows}
|
||||
episodes={latestPosts.slice(0, 4)}
|
||||
bordered={false}
|
||||
posts={latestPosts.slice(0, 4)}
|
||||
pattern={[{ cols: 4, size: 'small' }]}
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 'xs',
|
||||
pattern: [{ cols: 1, size: 'small', rowBorder: false }],
|
||||
pattern: [{ cols: 1, size: 'small' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'sm',
|
||||
pattern: [{ cols: 4, size: 'xsmall' }],
|
||||
},
|
||||
{
|
||||
breakpoint: 'md',
|
||||
pattern: [{ cols: 4, size: 'xsmall' }],
|
||||
pattern: [{ cols: 2, size: 'small' }],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
@ -94,14 +86,11 @@ const PodcastsGrid = styled(Grid)`
|
|||
`
|
||||
|
||||
const Episodes = styled.div`
|
||||
margin-top: 64px;
|
||||
`
|
||||
margin-top: var(--lsd-spacing-64);
|
||||
|
||||
const EpisodeListHeader = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'exact')} {
|
||||
margin-top: 56px;
|
||||
}
|
||||
`
|
||||
|
||||
export default PodcastsContainer
|
||||
|
|
Loading…
Reference in New Issue