feat: initial section implementation

examples/web/react/components/index.ts

@@ -3,3 +3,4 @@ export * from "./button-increment/button-increment";
 export * from "./button-switch/button-switch";
 export * from "./info/info";
 export * from "./pair/pair";
+export * from "./section/section";

examples/web/react/components/info/info.tsx

@@ -3,7 +3,7 @@ import React, { FC, ReactNode } from "react";
 import "./info.css";
 
 type InfoProps = {
-    children?: ReactNode;
+    children: ReactNode;
     style?: string[];
 };
 
@@ -18,7 +18,7 @@ type InfoProps = {
  * to build the info pairs.
  * @returns The info component with the associated pairs.
  */
-export const Info: FC<InfoProps> = ({ children = [], style = [] }) => {
+export const Info: FC<InfoProps> = ({ children, style = [] }) => {
     const classes = () => ["info", ...style].join(" ");
     return <dl className={classes()}>{children}</dl>;
 };

examples/web/react/components/section/section.tsx

+import React, { FC, ReactNode } from "react";
+
+import "./section.css";
+
+type SectionProps = {
+    children: ReactNode;
+    separator?: boolean;
+    style?: string[];
+};
+
+export const Section: FC<SectionProps> = ({
+    children,
+    separator = true,
+    style = []
+}) => {
+    const classes = () => ["section", ...style].join(" ");
+    return (
+        <div className={classes()}>
+            {separator && <div className="separator"></div>}
+            <div className="section-contents">{children}</div>
+        </div>
+    );
+};
+
+export default Section;