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}
}
)