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

72 lines
1.7 KiB
TypeScript

import React from "react";
import { Cell, Grid } from "@faceless-ui/css-grid";
import { Page } from "../../../payload-types";
import { BackgroundColor } from "../../BackgroundColor";
import { Gutter } from "../../Gutter";
import { CMSLink } from "../../Link";
import RichText from "../../RichText";
import classes from "./index.module.scss";
type Props = {
ctaBackgroundColor?: "white" | "black";
richText: {
[k: string]: unknown;
}[];
links: {
link: {
type?: "reference" | "custom";
newTab?: boolean;
reference: {
value: string | Page;
relationTo: "pages";
};
url: string;
label: string;
};
id?: string;
}[];
id?: string;
blockName?: string;
blockType: "cta";
};
export const CallToActionBlock: React.FC<Props> = ({
ctaBackgroundColor,
links,
richText,
}) => {
const oppositeBackgroundColor =
ctaBackgroundColor === "white" ? "black" : "white";
return (
<Gutter>
<BackgroundColor color={oppositeBackgroundColor}>
<div className={classes.callToAction}>
<Grid>
<Cell cols={8} colsL={7} colsM={12}>
<div>
<RichText className={classes.richText} content={richText} />
</div>
</Cell>
<Cell
start={10}
cols={3}
startL={9}
colsL={4}
startM={1}
colsM={12}
>
<div className={classes.linkGroup}>
{(links || []).map(({ link }, i) => {
return <CMSLink key={i} {...link} />;
})}
</div>
</Cell>
</Grid>
</div>
</BackgroundColor>
</Gutter>
);
};