refactor: better panel split

examples/web/react/app.tsx

@@ -7,6 +7,7 @@ import {
     ButtonSwitch,
     Info,
     Pair,
+    PanelSplit,
     Section
 } from "./components";
 
@@ -18,47 +19,49 @@ export const App = () => {
     const onClick = () => setCount(count + 1);
     return (
         <>
-            <Section>
-                <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}`}
+            <PanelSplit>
+                <Section>
+                    <Button text={getText()} onClick={onClick} />
+                    <Button
+                        text={getText()}
+                        image={require("../res/pause.svg")}
+                        imageAlt="tobias"
+                        onClick={onClick}
                     />
-                    <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>
+                    <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>
+            </PanelSplit>
         </>
     );
 };

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

-.panel-split {
-    display: flex;
-}
-
-.panel-split > .side-left {
-    text-align: center;
-    flex: 1 0;
-    justify-content: center;
-    display: flex;
-}
-
-.panel-split > .side-right {
-    max-width: 100%;
-    min-width: 580px;
-    flex: 0;
-    padding: 0px 24px 0px 24px;
-}
+.panel-split {
+    display: flex;
+}
+
+.panel-split > .side-left {
+    display: flex;
+    flex: 1 0;
+    justify-content: center;
+    text-align: center;
+}
+
+.panel-split > .side-right {
+    flex: 0;
+    max-width: 100%;
+    min-width: 580px;
+    padding: 0px 24px 0px 24px;
+}

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

@@ -3,13 +3,25 @@ import React, { FC, ReactNode } from "react";
 import "./panel-split.css";
 
 type PanelSplitProps = {
-    children: ReactNode;
+    children?: ReactNode;
+    left?: ReactNode;
+    right?: ReactNode;
     style?: string[];
 };
 
-export const PanelSplit: FC<PanelSplitProps> = ({ children, style = [] }) => {
+export const PanelSplit: FC<PanelSplitProps> = ({
+    children,
+    left,
+    right,
+    style = []
+}) => {
     const classes = () => ["panel-split", ...style].join(" ");
-    return <></>;
+    return (
+        <div className={classes()}>
+            <div className="side-left">{left}</div>
+            <div className="side-right">{children || right}</div>
+        </div>
+    );
 };
 
 export default PanelSplit;

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

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