Refactor CTAButtonGroup

.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",

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 (
+    <div className={gridClasses}>
+      {ctaArray.map(
+        (button, index) =>
+          button && (
+            <Button
+              key={index}
+              href={button.href}
+              variant={index === 0 ? 'primary' : 'ghost'}
+            >
+              {button.text}
+            </Button>
+          ),
+      )}
+    </div>
+  )
+}

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 (
     <header className="grid gap-4">
       {isFeatured && <SectionDivider title="Featured" />}
@@ -94,29 +94,7 @@ export function PageHeader({
 
           {description && <DescriptionText>{description}</DescriptionText>}
 
-          {ctaArray && (
-            <div
-              className={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',
-              )}
-            >
-              {ctaArray.map(
-                (button, index) =>
-                  button && (
-                    <Button
-                      key={index}
-                      href={button.href}
-                      variant={index === 0 ? 'primary' : 'ghost'}
-                    >
-                      {button.text}
-                    </Button>
-                  ),
-              )}
-            </div>
-          )}
+          {cta && <CTAButtonGroup cta={cta} />}
         </div>
 
         <div className="lg:w-1/2">

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 (
     <section>
       <SectionDivider title={kicker} />
@@ -51,30 +49,9 @@ export function PageSection({
 
           {description && <DescriptionText>{description}</DescriptionText>}
 
-          {ctaArray && (
-            <div
-              className={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',
-              )}
-            >
-              {ctaArray.map(
-                (button, index) =>
-                  button && (
-                    <Button
-                      key={index}
-                      href={button.href}
-                      variant={index === 0 ? 'primary' : 'ghost'}
-                    >
-                      {button.text}
-                    </Button>
-                  ),
-              )}
-            </div>
-          )}
+          {cta && <CTAButtonGroup cta={cta} />}
         </div>
+
         {image && (
           <div className="relative aspect-video lg:aspect-auto">
             <StaticImage
@@ -86,6 +63,7 @@ export function PageSection({
           </div>
         )}
       </div>
+
       {children && <div className="flex flex-col gap-6">{children}</div>}
     </section>
   )