mirror of
https://github.com/acid-info/logos-press-engine.git
synced 2025-02-23 06:38:27 +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 styled from '@emotion/styled'
|
||||
import MoreEpisodesCard from './Episode.MoreEpisodesCard'
|
||||
import { useState } from 'react'
|
||||
import { LPE } from '@/types/lpe.types'
|
||||
import { PostCard } from '@/components/PostCard'
|
||||
|
||||
type props = {
|
||||
podcastSlug: string
|
||||
@ -18,26 +18,54 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
|
||||
<EpisodeCards>
|
||||
{relatedEpisodes && showMore
|
||||
? relatedEpisodes.map((episode: any, idx: number) => (
|
||||
<MoreEpisodesCard
|
||||
<PostCard
|
||||
key={'related-episode' + idx}
|
||||
coverImage={episode.coverImage}
|
||||
title={episode.title}
|
||||
publishedAt={episode.publishedAt}
|
||||
slug={`${podcastSlug}/${episode.slug}`}
|
||||
contentType={LPE.PostTypes.Podcast}
|
||||
data={{
|
||||
authors: episode.authors,
|
||||
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
|
||||
.slice(0, 4)
|
||||
.map((episode: any, idx: number) => (
|
||||
<MoreEpisodesCard
|
||||
key={'related-episode' + idx}
|
||||
coverImage={episode.coverImage}
|
||||
title={episode.title}
|
||||
publishedAt={episode.publishedAt}
|
||||
slug={`${podcastSlug}/${episode.slug}`}
|
||||
/>
|
||||
))
|
||||
? relatedEpisodes.slice(0, 4).map((episode: any, idx: number) => (
|
||||
<PostCard
|
||||
key={'related-episode' + idx}
|
||||
contentType={LPE.PostTypes.Podcast}
|
||||
data={{
|
||||
authors: episode.authors,
|
||||
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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))
|
||||
: null}
|
||||
</EpisodeCards>
|
||||
<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