Files
StevenandGitHub 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

44 lines
927 B
TypeScript

import cn from "classnames";
import Link from "next/link";
import Imgix from "react-imgix";
type CoverImageProps = {
title;
url;
slug;
};
const CoverImage = (props: CoverImageProps) => {
const { title, url, slug } = props;
const image = (
<Imgix
src={url}
alt={`Cover Image for ${title}`}
className={cn("lazyload shadow-small w-full", {
"hover:shadow-medium transition-shadow duration-200": slug,
})}
sizes="100vw"
attributeConfig={{
src: "data-src",
srcSet: "data-srcset",
sizes: "data-sizes",
}}
htmlAttributes={{
src: `${url}?auto=format,compress&q=1&blur=500&w=auto`,
}}
/>
);
return (
<div className="sm:mx-0">
{slug ? (
<Link href={`/posts/${slug}`} aria-label={title}>
{image}
</Link>
) : (
image
)}
</div>
);
};
export default CoverImage;