diff --git a/.eslintrc.json b/.eslintrc.json index 36ba4b1b0..cb819c520 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,7 +4,7 @@ "plugin:import/errors", "plugin:import/warnings" ], - "plugins": ["@typescript-eslint"], + // "plugins": ["@typescript-eslint"], "rules": { // React specific rules "react/no-unescaped-entities": "warn", diff --git a/src/app/_components/CTAButtonGroup.tsx b/src/app/_components/CTAButtonGroup.tsx new file mode 100644 index 000000000..99d8ec060 --- /dev/null +++ b/src/app/_components/CTAButtonGroup.tsx @@ -0,0 +1,37 @@ +import { clsx } from 'clsx' + +import { Button } from '@/components/Button' + +import type { CTAProps } from '@/types/sharedProps/ctaType' + +export type CTAButtonGroupProps = { + cta: CTAProps | [CTAProps, CTAProps] +} + +export function CTAButtonGroup({ cta }: CTAButtonGroupProps) { + const ctaArray = Array.isArray(cta) ? cta : [cta] + + const gridClasses = clsx( + 'grid gap-4', + ctaArray.length === 1 + ? 'lg:grid-cols-1' + : 'sm:grid-cols-2 sm:gap-3 lg:grid-cols-1 lg:gap-4', + ) + + return ( +
+ {ctaArray.map( + (button, index) => + button && ( + + ), + )} +
+ ) +} diff --git a/src/app/_components/PageHeader.tsx b/src/app/_components/PageHeader.tsx index 5e2c1e2d2..7da7a5c7c 100644 --- a/src/app/_components/PageHeader.tsx +++ b/src/app/_components/PageHeader.tsx @@ -1,6 +1,10 @@ import { clsx } from 'clsx' import { Button } from '@/components/Button' +import { + type CTAButtonGroupProps, + CTAButtonGroup, +} from '@/components/CTAButtonGroup' import { DescriptionText, type DescriptionTextType, @@ -11,8 +15,6 @@ import { Meta, type MetaDataType } from '@/components/Meta' import { SectionDivider } from '@/components/SectionDivider' import { StaticImage, type StaticImageProps } from '@/components/StaticImage' -import { type CTAProps } from '@/types/sharedProps/ctaType' - import { buildImageSizeProp } from '@/utils/buildImageSizeProp' type TitleProps = { @@ -22,7 +24,7 @@ type TitleProps = { type PageHeaderProps = { title: TitleProps['children'] description?: DescriptionTextType - cta?: CTAProps | [CTAProps, CTAProps] + cta?: CTAButtonGroupProps['cta'] metaData?: MetaDataType isFeatured?: boolean image: StaticImageProps | DynamicImageProps @@ -77,8 +79,6 @@ export function PageHeader({ metaData, isFeatured = false, }: PageHeaderProps) { - const ctaArray = Array.isArray(cta) ? cta : [cta] - return (
{isFeatured && } @@ -94,29 +94,7 @@ export function PageHeader({ {description && {description}} - {ctaArray && ( -
- {ctaArray.map( - (button, index) => - button && ( - - ), - )} -
- )} + {cta && }
diff --git a/src/app/_components/PageSection.tsx b/src/app/_components/PageSection.tsx index 6268c1eb6..efc28c0c6 100644 --- a/src/app/_components/PageSection.tsx +++ b/src/app/_components/PageSection.tsx @@ -1,9 +1,9 @@ import { clsx } from 'clsx' -import { Button } from '@/components/Button' +import type { CTAButtonGroupProps } from '@/components/CTAButtonGroup' import { - type DescriptionTextType, DescriptionText, + type DescriptionTextType, } from '@/components/DescriptionText' import { Heading } from '@/components/Heading' import { @@ -12,16 +12,16 @@ import { } from '@/components/SectionDivider' import { StaticImage, type StaticImageProps } from '@/components/StaticImage' -import type { CTAProps } from '@/types/sharedProps/ctaType' - import { buildImageSizeProp } from '@/utils/buildImageSizeProp' +import { CTAButtonGroup } from './CTAButtonGroup' + type PageSectionProps = { kicker: SectionDividerProps['title'] title: string description?: DescriptionTextType image?: StaticImageProps - cta?: CTAProps | [CTAProps, CTAProps] + cta?: CTAButtonGroupProps['cta'] children?: React.ReactNode } @@ -33,8 +33,6 @@ export function PageSection({ children, cta, }: PageSectionProps) { - const ctaArray = Array.isArray(cta) ? cta : [cta] - return (
@@ -51,30 +49,9 @@ export function PageSection({ {description && {description}} - {ctaArray && ( -
- {ctaArray.map( - (button, index) => - button && ( - - ), - )} -
- )} + {cta && }
+ {image && (
)}
+ {children &&
{children}
} )