75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import Link from 'next/link';
|
|
import React, { useContext } from 'react';
|
|
import { ScreenContext } from '../../contexts/screen';
|
|
import { IPost } from '../../types/cms';
|
|
import { generateURL } from '../../utils/routing';
|
|
|
|
export function ArticleCardRow(post: IPost) {
|
|
const { isMobile } = useContext(ScreenContext);
|
|
const { slug, tags } = post;
|
|
const { href, as } = generateURL(slug);
|
|
|
|
const ArticlePreviewContent = () => (
|
|
<p
|
|
style={{
|
|
lineHeight: '1.33em',
|
|
height: '4em',
|
|
}}
|
|
className="overflow-hidden text-base"
|
|
>
|
|
{post.subtitle}
|
|
</p>
|
|
);
|
|
|
|
const ArticlePreviewImage = () => (
|
|
<div
|
|
style={{
|
|
width: isMobile ? '33%' : '10rem',
|
|
height: isMobile ? '66%' : '6rem',
|
|
}}
|
|
className="relative overflow-hidden rounded-lg bg-primary bg-opacity-10"
|
|
>
|
|
{post?.featureImage?.imageUrl && (
|
|
<img
|
|
src={post.featureImage.imageUrl}
|
|
alt={post.featureImage.description}
|
|
className="object-cover w-full h-full rounded-lg"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{isMobile ? (
|
|
<div className="flex flex-col w-full mb-6 space-y-4">
|
|
<div className="flex w-full space-x-6">
|
|
<ArticlePreviewImage />
|
|
<div className="w-2/3">
|
|
<h3 className="font-sans text-twoxl text-primary">
|
|
{post.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<ArticlePreviewContent />
|
|
</div>
|
|
) : (
|
|
<div className="flex w-full space-x-6">
|
|
<ArticlePreviewImage />
|
|
<div
|
|
style={{ width: 'min-content' }}
|
|
className="flex flex-col flex-grow"
|
|
>
|
|
<Link href={href} as={as}>
|
|
<a className="font-sans text-xl text-primary">{post.title}</a>
|
|
</Link>
|
|
|
|
<ArticlePreviewContent />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|