mirror of
https://github.com/acid-info/logos-press-engine.git
synced 2025-02-23 22:58:08 +00:00
chore: remove duplicate cards
This commit is contained in:
jinhojang6
parent
281fa7a524
commit
da610338e1
@ -1,76 +0,0 @@
|
|||||||
import { LPE } from '@/types/lpe.types'
|
|
||||||
import { Typography } from '@acid-info/lsd-react'
|
|
||||||
import styled from '@emotion/styled'
|
|
||||||
import Image from 'next/image'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
coverImage: LPE.Image.Document
|
|
||||||
title: string
|
|
||||||
publishedAt: string
|
|
||||||
slug: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const MoreEpisodesCard = ({ coverImage, title, publishedAt, slug }: Props) => {
|
|
||||||
const date = new Date(publishedAt)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container>
|
|
||||||
{coverImage?.url && (
|
|
||||||
<CustomLink href={`/podcasts/${slug}`}>
|
|
||||||
<ImageContainer>
|
|
||||||
<Image src={coverImage.url} fill alt={coverImage.alt} />
|
|
||||||
</ImageContainer>
|
|
||||||
</CustomLink>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<Typography variant="body3" genericFontFamily="sans-serif">
|
|
||||||
PODCAST
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body3">•</Typography>
|
|
||||||
<Typography variant="body3" genericFontFamily="sans-serif">
|
|
||||||
{date &&
|
|
||||||
date.toLocaleString('en-GB', {
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'long', // TODO: Should be uppercase
|
|
||||||
year: 'numeric',
|
|
||||||
})}
|
|
||||||
</Typography>
|
|
||||||
</Row>
|
|
||||||
<CustomLink href={`/podcasts/${slug}`}>
|
|
||||||
<Typography variant="h6" genericFontFamily="serif">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</CustomLink>
|
|
||||||
</Container>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
margin-block: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 48%;
|
|
||||||
`
|
|
||||||
|
|
||||||
const ImageContainer = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
height: 190px;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Row = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const CustomLink = styled(Link)`
|
|
||||||
text-decoration: none;
|
|
||||||
`
|
|
||||||
|
|
||||||
export default MoreEpisodesCard
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
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 MoreEpisodesCard from './Episode.MoreEpisodesCard'
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { LPE } from '@/types/lpe.types'
|
import { LPE } from '@/types/lpe.types'
|
||||||
|
import { PostCard } from '@/components/PostCard'
|
||||||
|
|
||||||
type props = {
|
type props = {
|
||||||
podcastSlug: string
|
podcastSlug: string
|
||||||
@ -18,26 +18,54 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
|
|||||||
<EpisodeCards>
|
<EpisodeCards>
|
||||||
{relatedEpisodes && showMore
|
{relatedEpisodes && showMore
|
||||||
? relatedEpisodes.map((episode: any, idx: number) => (
|
? relatedEpisodes.map((episode: any, idx: number) => (
|
||||||
<MoreEpisodesCard
|
<PostCard
|
||||||
key={'related-episode' + idx}
|
key={'related-episode' + idx}
|
||||||
coverImage={episode.coverImage}
|
contentType={LPE.PostTypes.Podcast}
|
||||||
title={episode.title}
|
data={{
|
||||||
publishedAt={episode.publishedAt}
|
authors: episode.authors,
|
||||||
slug={`${podcastSlug}/${episode.slug}`}
|
date: episode.publishedAt
|
||||||
|
? new Date(episode.publishedAt)
|
||||||
|
: null,
|
||||||
|
slug: episode.show?.slug
|
||||||
|
? `${episode.show?.slug}/${episode.slug}`
|
||||||
|
: `${podcastSlug}/${episode.slug}`,
|
||||||
|
title: episode.title,
|
||||||
|
coverImage: episode.coverImage,
|
||||||
|
tags: episode.tags,
|
||||||
|
podcastShowDetails: {
|
||||||
|
title: episode.title,
|
||||||
|
slug: `${episode.show?.slug}`,
|
||||||
|
episodeNumber: episode.episodeNumber,
|
||||||
|
podcast: episode.show as LPE.Podcast.Show,
|
||||||
|
},
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
: relatedEpisodes && !showMore
|
: relatedEpisodes && !showMore
|
||||||
? relatedEpisodes
|
? relatedEpisodes.slice(0, 4).map((episode: any, idx: number) => (
|
||||||
.slice(0, 4)
|
<PostCard
|
||||||
.map((episode: any, idx: number) => (
|
key={'related-episode' + idx}
|
||||||
<MoreEpisodesCard
|
contentType={LPE.PostTypes.Podcast}
|
||||||
key={'related-episode' + idx}
|
data={{
|
||||||
coverImage={episode.coverImage}
|
authors: episode.authors,
|
||||||
title={episode.title}
|
date: episode.publishedAt
|
||||||
publishedAt={episode.publishedAt}
|
? new Date(episode.publishedAt)
|
||||||
slug={`${podcastSlug}/${episode.slug}`}
|
: null,
|
||||||
/>
|
slug: episode.show?.slug
|
||||||
))
|
? `${episode.show?.slug}/${episode.slug}`
|
||||||
|
: `${podcastSlug}/${episode.slug}`,
|
||||||
|
title: episode.title,
|
||||||
|
coverImage: episode.coverImage,
|
||||||
|
tags: episode.tags,
|
||||||
|
podcastShowDetails: {
|
||||||
|
title: episode.title,
|
||||||
|
slug: `${episode.show?.slug}`,
|
||||||
|
episodeNumber: episode.episodeNumber,
|
||||||
|
podcast: episode.show as LPE.Podcast.Show,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))
|
||||||
: null}
|
: null}
|
||||||
</EpisodeCards>
|
</EpisodeCards>
|
||||||
<ShowButton onClick={() => setShowMore(!showMore)}>
|
<ShowButton onClick={() => setShowMore(!showMore)}>
|
||||||
|
|||||||
@ -1,135 +0,0 @@
|
|||||||
import { Typography } from '@acid-info/lsd-react'
|
|
||||||
import styled from '@emotion/styled'
|
|
||||||
import Link from 'next/link'
|
|
||||||
import React, { useMemo } from 'react'
|
|
||||||
import { LPE } from '../../types/lpe.types'
|
|
||||||
import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
|
|
||||||
|
|
||||||
export enum Size {
|
|
||||||
SMALL = 'small',
|
|
||||||
LARGE = 'large',
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
podcast: string
|
|
||||||
episode: LPE.Podcast.Document
|
|
||||||
size?: Size
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function EpisodeCard({
|
|
||||||
podcast,
|
|
||||||
episode,
|
|
||||||
size = Size.SMALL,
|
|
||||||
...props
|
|
||||||
}: Props) {
|
|
||||||
const _title = useMemo(
|
|
||||||
() => (
|
|
||||||
<TitleLink href={`/podcasts/${podcast}/${episode.slug}`}>
|
|
||||||
<Title
|
|
||||||
variant={size === Size.SMALL ? 'h4' : 'h3'}
|
|
||||||
genericFontFamily="serif"
|
|
||||||
>
|
|
||||||
{episode.title}
|
|
||||||
</Title>
|
|
||||||
</TitleLink>
|
|
||||||
),
|
|
||||||
[podcast, episode],
|
|
||||||
)
|
|
||||||
|
|
||||||
const _thumbnail = useMemo(() => {
|
|
||||||
if (!episode.coverImage) return null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/podcasts/${podcast}/${episode.slug}`}>
|
|
||||||
<ResponsiveImage data={episode.coverImage} />
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}, [podcast, episode])
|
|
||||||
|
|
||||||
const _header = useMemo(() => {
|
|
||||||
const date = new Date(episode.publishedAt)
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<>
|
|
||||||
<Row>
|
|
||||||
<Typography variant="body3" genericFontFamily="sans-serif">
|
|
||||||
PODCAST
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body3">•</Typography>
|
|
||||||
<Typography variant="body3" genericFontFamily="sans-serif">
|
|
||||||
{date &&
|
|
||||||
date.toLocaleString('en-GB', {
|
|
||||||
day: 'numeric',
|
|
||||||
month: 'long', // TODO: Should be uppercase
|
|
||||||
year: 'numeric',
|
|
||||||
})}
|
|
||||||
</Typography>
|
|
||||||
</Row>
|
|
||||||
{_title}
|
|
||||||
</>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}, [episode, _title])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container {...props}>
|
|
||||||
{_thumbnail}
|
|
||||||
{_header}
|
|
||||||
</Container>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: 'relative';
|
|
||||||
gap: 16px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const Row = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const CustomTypography = styled(Typography)`
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-word;
|
|
||||||
`
|
|
||||||
|
|
||||||
const PodcastAuthor = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const TitleLink = styled(Link)`
|
|
||||||
text-decoration: none;
|
|
||||||
width: fit-content;
|
|
||||||
`
|
|
||||||
|
|
||||||
const HeaderContainer = styled(CustomTypography)<{ isFeatured: boolean }>`
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const Description = styled(CustomTypography)<{ isFeatured: boolean }>`
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
|
|
||||||
}
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const Title = styled(CustomTypography)`
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
Loading…
x
Reference in New Issue
Block a user