rsnext/examples/cms-prismic/components/post-preview.tsx
Steven 4466ba436b
chore(examples): use default prettier for examples/templates (#60530)
## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409
2024-01-11 16:01:44 -07:00

49 lines
1.3 KiB
TypeScript

import Link from "next/link";
import { DateField, ImageField, TitleField } from "@prismicio/types";
import { PrismicText } from "@prismicio/react";
import { asText, isFilled } from "@prismicio/helpers";
import { AuthorContentRelationshipField } from "../lib/types";
import Avatar from "../components/avatar";
import Date from "../components/date";
import CoverImage from "./cover-image";
type PostPreviewProps = {
title: TitleField;
coverImage: ImageField;
date: DateField;
excerpt: string;
author: AuthorContentRelationshipField;
href: string;
};
export default function PostPreview({
title,
coverImage,
date,
excerpt,
author,
href,
}: PostPreviewProps) {
return (
<div>
<div className="mb-5">
<CoverImage title={asText(title)} href={href} image={coverImage} />
</div>
<h3 className="text-3xl mb-3 leading-snug">
<Link href={href} className="hover:underline">
<PrismicText field={title} />
</Link>
</h3>
<div className="text-lg mb-4">
<Date dateField={date} />
</div>
<p className="text-lg leading-relaxed mb-4">{excerpt}</p>
{isFilled.contentRelationship(author) && (
<Avatar name={asText(author.data.name)} picture={author.data.picture} />
)}
</div>
);
}