acid-info
/
logos-press-engine
mirror of https://github.com/acid-info/logos-press-engine.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update footer

This commit is contained in:
jinhojang6 2023-08-16 23:37:34 +09:00
parent 86e8ecaf2e
commit 00913634c2
9 changed files with 207 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Episode/Episode.Blocks.tsx
View File

@ -31,6 +31,7 @@ const EpisodeBlocks = ({ data }: Props) => {
const ShowButton = styled(Button)`
margin-top: calc(var(--lsd-body2-lineHeight) * -1);
height: 40px;
`
export default EpisodeBlocks

1
src/components/Episode/Episode.Body.tsx
View File

@ -39,7 +39,6 @@ const EpisodeContainer = styled.article`
flex-direction: column;
gap: 16px;
max-width: 700px;
padding-bottom: 80px;
@media (min-width: 768px) and (max-width: 1200px) {
}

46
src/components/Episode/Footer/Episode.Credits.tsx
View File

@ -1,30 +1,46 @@
import { Collapse } from '@/components/Collapse'
import { Typography } from '@acid-info/lsd-react'
import { Collapse, Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import { LPE } from '../../../types/lpe.types'
import { useState } from 'react'
const EpisodeCredits = ({
credits,
}: {
credits: LPE.Podcast.Document['credits']
}) => {
const [open, setOpen] = useState(true)
return credits && credits?.length > 0 ? (
<Collapse label="Credits">
{credits?.map((credit, idx) => (
<Reference key={idx}>
<Typography
component="p"
variant="body3"
id={credit.id.replace('#', '')}
>
{credit.text}
</Typography>
</Reference>
))}
</Collapse>
<Container>
<Collapse
label="Credits"
open={open}
onChange={() => setOpen((prev) => !prev)}
>
{credits?.map((credit, idx) => (
<Reference key={idx}>
<Typography
component="p"
variant="body3"
id={credit.id.replace('#', '')}
>
{credit.text}
</Typography>
</Reference>
))}
</Collapse>
</Container>
) : null
}
const Container = styled.div`
margin-bottom: 32px;
button {
width: 100% !important;
}
`
const Reference = styled.div`
display: flex;
padding: 8px 14px;

33
src/components/Episode/Footer/Episode.Footer.tsx
View File

@ -1,7 +1,9 @@
import styled from '@emotion/styled'
import { LPE } from '../../../types/lpe.types'
import EpisodeCredits from './Episode.Credits'
import EpisodeMoreEpisodes from './Episode.MoreEpisodes'
import RelatedEpisodes from './Episode.RelatedEpisodes'
import { useMemo } from 'react'
import EpisodeFootnotes from './Episode.Footnotes'
const TEMP_MORE_EPISODES = [
{
@ -32,13 +34,38 @@ const TEMP_MORE_EPISODES = [
publishedAt: '2023-07-14T20:30:00.000Z',
title: 'Title 4',
},
{
id: 5,
thumbnail:
'https://images.cdn.unbody.io/00f8908f-9dff-456e-9640-13defd9ae433/image/a04e5542-d027-44d5-b914-bd4cadf17d25_image1.png',
publishedAt: '2023-07-14T20:30:00.000Z',
title: 'Title 5',
},
{
id: 6,
thumbnail:
'https://images.cdn.unbody.io/00f8908f-9dff-456e-9640-13defd9ae433/image/a04e5542-d027-44d5-b914-bd4cadf17d25_image1.png',
publishedAt: '2023-07-14T20:30:00.000Z',
title: 'Title 6',
},
]
const EpisodeFooter = ({ data }: { data: LPE.Podcast.Document }) => {
const footnotes = useMemo(() => {
return (
data.credits &&
data.credits
.filter((b) => b.footnotes.length)
.map((b) => b.footnotes)
.flat()
)
}, [data])
return (
<EpisodeFooterContainer>
<EpisodeCredits credits={data.credits} />
<EpisodeMoreEpisodes episodes={TEMP_MORE_EPISODES} />
{footnotes?.length && <EpisodeFootnotes footnotes={footnotes} />}
{data?.credits?.length && <EpisodeCredits credits={data.credits} />}
<RelatedEpisodes relatedEpisodes={TEMP_MORE_EPISODES} />
</EpisodeFooterContainer>
)
}

58
src/components/Episode/Footer/Episode.Footnotes.tsx Normal file
View File

@ -0,0 +1,58 @@
import { Collapse, Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import { LPE } from '../../../types/lpe.types'
import { useState } from 'react'
const EpisodeFootnotes = ({
footnotes,
}: {
footnotes: LPE.Article.Footnotes
}) => {
const [open, setOpen] = useState(true)
return footnotes.length > 0 ? (
<Container>
<Collapse
label="References"
open={open}
onChange={() => setOpen((prev) => !prev)}
>
{footnotes.map((footnote, idx) => (
<Reference key={idx}>
<Typography
component="a"
variant="body3"
href={`#${footnote.refId}`}
target="_blank"
id={footnote.id.replace('#', '')}
>
{footnote.refValue}
</Typography>
<P dangerouslySetInnerHTML={{ __html: footnote.valueHTML }} />
</Reference>
))}
</Collapse>
</Container>
) : null
}
const Container = styled.div`
margin-bottom: 32px;
button {
width: 100% !important;
}
`
const Reference = styled.div`
display: flex;
align-items: center;
padding: 8px 14px;
gap: 8px;
`
const P = styled.p`
font-size: var(--lsd-body3-fontSize);
`
export default EpisodeFootnotes

39
src/components/Episode/Footer/Episode.MoreEpisodes.tsx
View File

@ -1,39 +0,0 @@
import { Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import MoreEpisodesCard from './Episode.MoreEpisodesCard'
const EpisodeMoreEpisodes = ({ episodes }: any) => {
return (
<Container>
<Typography>More Episodes</Typography>
<EpisodeCards>
{episodes &&
episodes.map((episode: any, idx: number) => (
<MoreEpisodesCard
key={'more-episode' + idx}
thumbnail={episode.thumbnail}
title={episode.title}
publishedAt={episode.publishedAt}
/>
))}
</EpisodeCards>
</Container>
)
}
const Container = styled.div`
margin-top: 72px;
border-top: 1px solid rgb(var(--lsd-border-primary));
padding-block: 16px;
display: flex;
flex-direction: column;
`
const EpisodeCards = styled.div`
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;
`
export default EpisodeMoreEpisodes

9
src/components/Episode/Footer/Episode.MoreEpisodesCard.tsx
View File

@ -15,7 +15,6 @@ const MoreEpisodesCard = ({ thumbnail, title, publishedAt }: Props) => {
<ImageContainer>
<Image src={thumbnail} fill alt={thumbnail} />
</ImageContainer>
<Row>
<Typography variant="body3" genericFontFamily="sans-serif">
PODCAST
@ -30,8 +29,9 @@ const MoreEpisodesCard = ({ thumbnail, title, publishedAt }: Props) => {
})}
</Typography>
</Row>
<Typography>{title}</Typography>
<Typography variant="h6" genericFontFamily="serif">
{title}
</Typography>
</Container>
)
}
@ -40,7 +40,6 @@ const Container = styled.div`
margin-block: 24px;
display: flex;
flex-direction: column;
gap: 16px;
width: 48%;
`
@ -48,6 +47,7 @@ const ImageContainer = styled.div`
width: 100%;
height: 190px;
position: relative;
margin-bottom: 16px;
`
const Row = styled.div`
@ -55,6 +55,7 @@ const Row = styled.div`
flex-direction: row;
align-items: center;
gap: 8px;
margin-bottom: 8px;
`
export default MoreEpisodesCard

62
src/components/Episode/Footer/Episode.RelatedEpisodes.tsx Normal file
View File

@ -0,0 +1,62 @@
import { Button, Typography } from '@acid-info/lsd-react'
import styled from '@emotion/styled'
import MoreEpisodesCard from './Episode.MoreEpisodesCard'
import { useState } from 'react'
const RelatedEpisodes = ({ relatedEpisodes }: any) => {
const [showMore, setShowMore] = useState(false)
return (
<Container>
<Typography>More Episodes</Typography>
<EpisodeCards>
{relatedEpisodes && showMore
? relatedEpisodes.map((episode: any, idx: number) => (
<MoreEpisodesCard
key={'related-episode' + idx}
thumbnail={episode.thumbnail}
title={episode.title}
publishedAt={episode.publishedAt}
/>
))
: relatedEpisodes && !showMore
? relatedEpisodes
.slice(0, 4)
.map((episode: any, idx: number) => (
<MoreEpisodesCard
key={'related-episode' + idx}
thumbnail={episode.thumbnail}
title={episode.title}
publishedAt={episode.publishedAt}
/>
))
: null}
</EpisodeCards>
<ShowButton onClick={() => setShowMore(!showMore)}>
{showMore ? 'Show less' : 'Show more'}
</ShowButton>
</Container>
)
}
const Container = styled.div`
margin-top: 72px;
border-top: 1px solid rgb(var(--lsd-border-primary));
padding-block: 16px;
display: flex;
flex-direction: column;
`
const EpisodeCards = styled.div`
display: flex;
flex-direction: row;
gap: 0 16px;
flex-wrap: wrap;
`
const ShowButton = styled(Button)`
height: 40px;
margin-top: 24px;
`
export default RelatedEpisodes

22
src/pages/podcasts/episode-temp-data.json
View File

@ -20,7 +20,16 @@
"html": "<p class=\"c1\"><span class=\"c0\">Episode hosts - Annie McEwen and Molly Webster</span></p>",
"text": "Episode hosts - Annie McEwen and Molly Webster",
"classNames": ["c1"],
"footnotes": [],
"footnotes": [
{
"index": 1,
"id": "#ftnt1",
"refId": "ftnt_ref1",
"refValue": "[1]",
"valueHTML": "<span class=\"c10 c19\">footnote 1</span>",
"valueText": "footnote 1"
}
],
"order": 9,
"tagName": "p",
"labels": []
@ -31,7 +40,16 @@
"html": "<p class=\"c1\"><span class=\"c0\">Produced by - Annie McEwen and Becca Bressler </span></p>",
"text": "Produced by - Annie McEwen and Becca Bressler ",
"classNames": ["c1"],
"footnotes": [],
"footnotes": [
{
"index": 2,
"id": "#ftnt1",
"refId": "ftnt_ref1",
"refValue": "[2]",
"valueHTML": "<span class=\"c10 c19\">footnote 2</span>",
"valueText": "footnote 2"
}
],
"order": 10,
"tagName": "p",
"labels": []