feat: initial panel split implementation

examples/web/react/app.tsx

@@ -6,7 +6,8 @@ import {
     ButtonIncrement,
     ButtonSwitch,
     Info,
-    Pair
+    Pair,
+    Section
 } from "./components";
 
 import "./app.css";
@@ -17,41 +18,47 @@ export const App = () => {
     const onClick = () => setCount(count + 1);
     return (
         <>
-            <Button text={getText()} onClick={onClick} />
-            <Button
-                text={getText()}
-                image={require("../res/pause.svg")}
-                imageAlt="tobias"
-                onClick={onClick}
-            />
-            <Info>
-                <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />
-                <Pair key="matias" name={"Matias"} value={"3"} />
-                <Pair
-                    key="button-tobias"
-                    name={"Button Increment"}
-                    valueNode={
-                        <ButtonIncrement
-                            value={200}
-                            delta={100}
-                            min={0}
-                            suffix={"Hz"}
-                        />
-                    }
+            <Section>
+                <Button text={getText()} onClick={onClick} />
+                <Button
+                    text={getText()}
+                    image={require("../res/pause.svg")}
+                    imageAlt="tobias"
+                    onClick={onClick}
                 />
-                <Pair
-                    key="button-cpu"
-                    name={"Button Switch"}
-                    valueNode={
-                        <ButtonSwitch
-                            options={["NEO", "CLASSIC"]}
-                            size={"large"}
-                            style={["simple"]}
-                            onChange={(v) => alert(v)}
-                        />
-                    }
-                />
-            </Info>
+                <Info>
+                    <Pair
+                        key="tobias"
+                        name={"Tobias"}
+                        value={`Count ${count}`}
+                    />
+                    <Pair key="matias" name={"Matias"} value={"3"} />
+                    <Pair
+                        key="button-tobias"
+                        name={"Button Increment"}
+                        valueNode={
+                            <ButtonIncrement
+                                value={200}
+                                delta={100}
+                                min={0}
+                                suffix={"Hz"}
+                            />
+                        }
+                    />
+                    <Pair
+                        key="button-cpu"
+                        name={"Button Switch"}
+                        valueNode={
+                            <ButtonSwitch
+                                options={["NEO", "CLASSIC"]}
+                                size={"large"}
+                                style={["simple"]}
+                                onChange={(v) => alert(v)}
+                            />
+                        }
+                    />
+                </Info>
+            </Section>
         </>
     );
 };

examples/web/react/components/index.ts

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

examples/web/react/components/panel-split/panel-split.tsx

+import React, { FC, ReactNode } from "react";
+
+import "./panel-split.css";
+
+type PanelSplitProps = {
+    children: ReactNode;
+    style?: string[];
+};
+
+export const PanelSplit: FC<PanelSplitProps> = ({ children, style = [] }) => {
+    const classes = () => ["panel-split", ...style].join(" ");
+    return <></>;
+};
+
+export default PanelSplit;

examples/web/react/components/section/section.css

+.section > .separator {
+    height: 2px;
+    background: #ffffff;
+    margin: 22px 0px 22px 0px;
+}