This commit is contained in:
amirhouieh 2023-08-29 20:11:38 +02:00
parent 84d71fca64
commit 4a15ed7687
3 changed files with 6 additions and 4 deletions

View File

@ -22,7 +22,7 @@ export const RenderArticleBlock = ({
}) => { }) => {
switch (block.type) { switch (block.type) {
case 'image': case 'image':
return <ArticleImageBlockWrapper image={block} /> return <ArticleImageBlockWrapper image={block} order={block.order} />
case 'text': case 'text':
switch (block.tagName) { switch (block.tagName) {
case 'h1': case 'h1':

View File

@ -5,11 +5,12 @@ import { lsdUtils } from '@/utils/lsd.utils'
type Props = { type Props = {
image: LPE.Image.Document image: LPE.Image.Document
order: number
} }
export const ArticleImageBlockWrapper = ({ image }: Props) => { export const ArticleImageBlockWrapper = ({ image, order }: Props) => {
return ( return (
<Container> <Container id={`i-${order}`}>
<ResponsiveImage data={image} /> <ResponsiveImage data={image} />
<figcaption>{image.alt}</figcaption> <figcaption>{image.alt}</figcaption>
</Container> </Container>
@ -19,6 +20,7 @@ export const ArticleImageBlockWrapper = ({ image }: Props) => {
const Container = styled.figure` const Container = styled.figure`
margin: 0; margin: 0;
padding: 0; padding: 0;
figcaption { figcaption {
padding-top: 8px; padding-top: 8px;
${lsdUtils.typography('body3')} ${lsdUtils.typography('body3')}

View File

@ -19,7 +19,7 @@ const ImageBlock = (props: Props) => {
return ( return (
<Container> <Container>
<Link href={`/article/${document?.slug}#p-${order}`}> <Link href={`/article/${document?.slug}#i-${order}`}>
<ResponsiveImage data={data} /> <ResponsiveImage data={data} />
</Link> </Link>
<ContentBlockHeader <ContentBlockHeader