astrimid/sch-section-wrapper

index.tsx

PCB

Schematic

import React, { ReactElement, cloneElement } from "react"

export const SchSection = ({
  children,
  name,
  displayName,
}: {
  children?: ReactElement[] | ReactElement
  name: string
  displayName?: string
}) => {
  const sectionName = name;

  if (children) {
    return (
      <>
        {React.Children.map(children, (child) => {
          if (React.isValidElement(child)) {
            return cloneElement(child, { schSectionName: sectionName } as any)
          }
          return child
        })}
      </>
    )
  } else {
    return <schematicsection name={name} displayName={displayName || name.toUpperCase() } />
  }
}

export default () => (
  <board width="10mm" height="10mm">
    <SchSection name="filter" />
    <SchSection name="power" />
    
    <SchSection name="power">
      <capacitor
        name="C1"
        capacitance="100uF"
        footprint="0805"
        schX={-4}
        schY={3}
      />
      <capacitor
        name="C2"
        capacitance="100nF"
        footprint="0402"
        schX={-2}
        schY={3}
      />
    </SchSection>
    <SchSection name="filter">
      <resistor name="R1" resistance="10k" footprint="0402" schX={2} schY={3} />
      <capacitor
        name="C3"
        capacitance="10nF"
        footprint="0402"
        schX={4}
        schY={3}
      />
    </SchSection>
  </board>
)