style: implement new show card design
This commit is contained in:
jinhojang6
parent
cc8036dec6
commit
3f02cbc83c
|
|
@ -1,9 +1,10 @@
|
|||
import styled from '@emotion/styled'
|
||||
import { LPE } from '../../types/lpe.types'
|
||||
import { ArrowDownIcon, Badge, Button, Typography } from '@acid-info/lsd-react'
|
||||
import { ArrowDownIcon, Button, Typography } from '@acid-info/lsd-react'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { Grid, GridItem } from '../Grid/Grid'
|
||||
import PodcastHost from './Podcast.Host'
|
||||
|
||||
interface Props {
|
||||
shows: LPE.Podcast.Show[]
|
||||
|
|
@ -13,9 +14,12 @@ export default function PodcastsLists({ shows }: Props) {
|
|||
return (
|
||||
<PodcastListsContainer>
|
||||
{shows &&
|
||||
shows.map((show) => (
|
||||
shows.map((show, idx) => {
|
||||
const isEven = idx % 2 === 0
|
||||
return (
|
||||
<ShowCardContainer key={show.id} className="w-8">
|
||||
<ShowCard>
|
||||
<ShowCard isEven={isEven}>
|
||||
<div>
|
||||
<Top>
|
||||
<ShowInfoContainer>
|
||||
<Image
|
||||
|
|
@ -25,40 +29,34 @@ export default function PodcastsLists({ shows }: Props) {
|
|||
alt={show.logo.alt}
|
||||
/>
|
||||
<ShowInfo>
|
||||
<Typography variant="body2">{show.title}</Typography>
|
||||
<Typography variant="body3">
|
||||
<ColoredText isEven={isEven} variant="body2">
|
||||
{show.title}
|
||||
</ColoredText>
|
||||
<ColoredText isEven={isEven} variant="body3">
|
||||
{show.numberOfEpisodes} EP
|
||||
</Typography>
|
||||
</ColoredText>
|
||||
</ShowInfo>
|
||||
</ShowInfoContainer>
|
||||
<ShowButtonLink href={`/podcasts/${show.slug}`}>
|
||||
<ShowButton>
|
||||
<ShowButtonText variant="body3">
|
||||
Podcast page
|
||||
</ShowButtonText>
|
||||
<ArrowDownIcon />
|
||||
</ShowButton>
|
||||
</ShowButtonLink>
|
||||
</Top>
|
||||
<Bottom>
|
||||
<ShowData isEven={isEven}>
|
||||
<Description
|
||||
dangerouslySetInnerHTML={{ __html: show.description }}
|
||||
/>
|
||||
{/* @ts-ignore */}
|
||||
{shows?.tags && (
|
||||
<BadgeContainer>
|
||||
{/* @ts-ignore */}
|
||||
{show.tags.map((tag) => (
|
||||
<Badge key={tag} size="small">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</BadgeContainer>
|
||||
)}
|
||||
</Bottom>
|
||||
<PodcastHost show={show} />
|
||||
</ShowData>
|
||||
</div>
|
||||
<ShowButtonLink href={`/podcasts/${show.slug}`}>
|
||||
<ShowButton isEven={isEven}>
|
||||
<ColoredText isEven={isEven} variant="body3">
|
||||
Podcast page
|
||||
</ColoredText>
|
||||
<ArrowDownIcon color={isEven ? 'secondary' : 'primary'} />
|
||||
</ShowButton>
|
||||
</ShowButtonLink>
|
||||
</ShowCard>
|
||||
</ShowCardContainer>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</PodcastListsContainer>
|
||||
)
|
||||
}
|
||||
|
|
@ -74,16 +72,31 @@ const PodcastListsContainer = styled(Grid)`
|
|||
|
||||
const ShowCardContainer = styled(GridItem)``
|
||||
|
||||
const ShowCard = styled.div`
|
||||
const ShowCard = styled.div<{ isEven: boolean }>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
border: 1px solid rgb(var(--lsd-text-primary));
|
||||
box-sizing: border-box;
|
||||
height: 516px;
|
||||
background-color: ${(props) =>
|
||||
props.isEven
|
||||
? 'rgb(var(--lsd-surface-secondary))'
|
||||
: 'rgb(var(--lsd-surface-primary))'};
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 374px;
|
||||
}
|
||||
`
|
||||
|
||||
const ShowInfoContainer = styled.div`
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
gap: 8px;
|
||||
}
|
||||
`
|
||||
|
||||
const ShowInfo = styled.div`
|
||||
|
|
@ -95,40 +108,65 @@ const ShowInfo = styled.div`
|
|||
const Row = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
`
|
||||
|
||||
const Top = styled(Row)`
|
||||
justify-content: space-between;
|
||||
`
|
||||
|
||||
const Bottom = styled.div`
|
||||
margin-top: 88px;
|
||||
const ShowData = styled.div<{ isEven: boolean }>`
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
p,
|
||||
span {
|
||||
color: ${(props) =>
|
||||
props.isEven
|
||||
? 'rgb(var(--lsd-text-secondary))'
|
||||
: 'rgb(var(--lsd-text-primary))'};
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 64px;
|
||||
margin-top: 57px;
|
||||
}
|
||||
`
|
||||
|
||||
const ColoredText = styled(Typography)<{ isEven: boolean }>`
|
||||
color: ${(props) =>
|
||||
props.isEven
|
||||
? 'rgb(var(--lsd-text-secondary))'
|
||||
: 'rgb(var(--lsd-text-primary))'};
|
||||
`
|
||||
|
||||
const Description = styled(Typography)`
|
||||
font-size: var(--lsd-h6-fontSize);
|
||||
font-size: var(--lsd-h4-fontSize);
|
||||
line-height: var(--lsd-h4-lineHeight);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: var(--lsd-body1-fontSize);
|
||||
font-size: var(--lsd-h6-fontSize);
|
||||
line-height: var(--lsd-h6-lineHeight);
|
||||
}
|
||||
`
|
||||
|
||||
const ShowButtonLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
`
|
||||
|
||||
const ShowButton = styled(Button)`
|
||||
const ShowButton = styled(Button)<{ isEven: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px 6px 12px;
|
||||
padding: 0 10px 0 12px;
|
||||
width: 122px;
|
||||
height: 28px;
|
||||
gap: 12px;
|
||||
border: 1px solid
|
||||
${(props) =>
|
||||
props.isEven
|
||||
? 'rgb(var(--lsd-border-secondary))'
|
||||
: 'rgb(var(--lsd-border-primary))'};
|
||||
|
||||
> span {
|
||||
width: 100%;
|
||||
|
|
@ -142,20 +180,6 @@ const ShowButton = styled(Button)`
|
|||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 7px;
|
||||
}
|
||||
`
|
||||
|
||||
const ShowButtonText = styled(Typography)`
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const BadgeContainer = styled.div`
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue