108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import Link from "next/link"
|
|
import Image from "next/image"
|
|
|
|
import { formatDate } from "lib/utils/format-date"
|
|
import { absoluteURL } from "lib/utils/absolute-url"
|
|
import { FormattedText } from "components/formatted-text"
|
|
import { NodeProps } from "components/node"
|
|
|
|
export function NodeArticle({ node, viewMode, ...props }: NodeProps) {
|
|
if (viewMode === "teaser") {
|
|
return <NodeArticleTeaser node={node} {...props} />
|
|
}
|
|
|
|
if (viewMode === "full") {
|
|
return <NodeArticleFull node={node} {...props} />
|
|
}
|
|
|
|
return null
|
|
}
|
|
|
|
export function NodeArticleFull({ node, ...props }) {
|
|
return (
|
|
<article data-cy="node--article" {...props}>
|
|
<div className="container max-w-3xl px-6 mx-auto my-10 md:my-18">
|
|
<h1 className="mb-4 text-2xl font-bold md:text-3xl lg:text-5xl">
|
|
{node.title}
|
|
</h1>
|
|
<div className="prose">
|
|
<div data-cy="node--meta" className="text-gray-600">
|
|
{node.uid?.field_name ? (
|
|
<span>
|
|
Posted by <strong>{node.uid?.field_name}</strong>
|
|
</span>
|
|
) : null}
|
|
<span> - {formatDate(node.created)}</span>
|
|
</div>
|
|
{node.body?.summary ? <p>{node.body.summary}</p> : null}
|
|
{node.field_image?.uri && (
|
|
<Image
|
|
src={absoluteURL(node.field_image.uri.url)}
|
|
width={1200}
|
|
height={600}
|
|
layout="intrinsic"
|
|
objectFit="cover"
|
|
className="rounded-lg"
|
|
/>
|
|
)}
|
|
{node.body?.processed && (
|
|
<FormattedText processed={node.body.processed} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export function NodeArticleTeaser({ node, ...props }) {
|
|
return (
|
|
<article data-cy="node--article" {...props}>
|
|
{node.field_image?.uri && (
|
|
<div>
|
|
<Image
|
|
src={absoluteURL(node.field_image.uri.url)}
|
|
width={800}
|
|
height={450}
|
|
layout="intrinsic"
|
|
objectFit="cover"
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
)}
|
|
<h2 className="my-4 text-2xl font-semibold md:text-3xl">
|
|
<Link href={node.path?.alias} passHref>
|
|
<a className="hover:text-blue-500">{node.title}</a>
|
|
</Link>
|
|
</h2>
|
|
<div data-cy="node--meta" className="text-gray-600">
|
|
{node.uid?.field_name ? (
|
|
<span>
|
|
Posted by <strong>{node.uid?.field_name}</strong>
|
|
</span>
|
|
) : null}
|
|
<span> - {formatDate(node.created)}</span>
|
|
</div>
|
|
{node.body?.summary ? (
|
|
<p className="mt-4 leading-relaxed text-gray-600">
|
|
{node.body.summary}
|
|
</p>
|
|
) : null}
|
|
<Link href={node.path.alias} passHref>
|
|
<a className="flex items-center mt-4 text-sm hover:text-blue-500">
|
|
Read more
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="w-4 h-4 ml-2"
|
|
>
|
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
|
</svg>
|
|
</a>
|
|
</Link>
|
|
</article>
|
|
)
|
|
}
|