fix: restore broken pages with PostCard and PostsGrid components

This commit is contained in:
Hossein Mehrabi 2023-12-23 18:53:47 +03:30
parent e8fad7451c
commit 97cf618330
No known key found for this signature in database
GPG Key ID: 45C04964191AFAA1
7 changed files with 136 additions and 199 deletions

View File

@ -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

View File

@ -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;
`

View File

@ -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);
}
`

View File

@ -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')}
}
}
`

View File

@ -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 {

View File

@ -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 && (

View File

@ -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