Merge pull request #109 from syntaxandsips/mr-dark-debug/fix-build-errors-for-npm-run-build

fix: allow content sections to forward html props

Author: Mr-Dark-debug

src/components/ui/ContentPageLayout.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { NewFooter } from './NewFooter';
 
 interface ContentPageLayoutProps {
@@ -44,15 +44,15 @@ export function ContentPageLayout({
   );
 }
 
-interface ContentSectionProps {
+type ContentSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'children' | 'className'> & {
   title: string;
   description?: string;
   eyebrow?: ReactNode;
   actions?: ReactNode;
   children: ReactNode;
   className?: string;
   fullWidth?: boolean;
-}
+};
 
 export function ContentSection({
   title,
@@ -62,14 +62,15 @@ export function ContentSection({
   children,
   className,
   fullWidth = false,
+  ...sectionProps
 }: ContentSectionProps) {
   const containerClassName = `neo-container bg-white ${className ?? ''}`.trim();
   const layoutClassName = fullWidth
     ? 'space-y-6'
     : 'flex flex-col lg:flex-row lg:items-start gap-8';
 
   return (
-    <section className={containerClassName}>
+    <section {...sectionProps} className={containerClassName}>
       {eyebrow && (
         <div className="mb-4 inline-flex items-center gap-2 bg-[#06D6A0] border-4 border-black px-3 py-1 text-xs font-bold uppercase tracking-widest text-black shadow-[4px_4px_0_0_#000]">
           {eyebrow}

src/components/ui/PageLayout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 import { NewFooter } from './NewFooter';
@@ -64,15 +64,15 @@ export function PageHero({
   );
 }
 
-interface ContentSectionProps {
+type ContentSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'children'> & {
   eyebrow?: string;
   title: string;
   description?: string;
   children: ReactNode;
   align?: 'left' | 'center';
   tone?: 'neutral' | 'lavender' | 'peach';
   footerContent?: ReactNode;
-}
+};
 
 const toneStyles: Record<Required<ContentSectionProps>['tone'], string> = {
   neutral: 'bg-white',
@@ -88,11 +88,13 @@ export function ContentSection({
   align = 'left',
   tone = 'neutral',
   footerContent,
+  className,
+  ...sectionProps
 }: ContentSectionProps) {
   const hasChildren = children !== undefined && children !== null;
 
   return (
-    <section>
+    <section className={className} {...sectionProps}>
       <div
         className={cn(
           'relative overflow-hidden rounded-3xl border-4 border-black p-8 md:p-12 shadow-[12px_12px_0px_0px_rgba(0,0,0,0.08)]',