diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 485657e62aa904b90e441effad59d1bb779d1b6c..00864994533dbb322b755aa144a3d5f6c795d029 100644 --- a/examples/web/react/app.tsx +++ b/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> </> ); }; diff --git a/examples/web/react/components/panel-split/panel-split.css b/examples/web/react/components/panel-split/panel-split.css index 17aec400c86796d61aeb0d5840f1840a5e515bf5..88edf704fcd6e49a1661e1496a2aa8cb9f632066 100644 --- a/examples/web/react/components/panel-split/panel-split.css +++ b/examples/web/react/components/panel-split/panel-split.css @@ -1,17 +1,17 @@ -.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; +} diff --git a/examples/web/react/components/panel-split/panel-split.tsx b/examples/web/react/components/panel-split/panel-split.tsx index e6966f201236539222e85435d7565b4a90be34f1..f394bbbda51f08f37be90134222bbe77ec4d9004 100644 --- a/examples/web/react/components/panel-split/panel-split.tsx +++ b/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; diff --git a/examples/web/react/components/section/section.css b/examples/web/react/components/section/section.css index 21d28b608df1283f100370f34ac88b11ffabfb47..c5ce8fe250b7b3ba2bc339ae4b90f812200bbb0f 100644 --- a/examples/web/react/components/section/section.css +++ b/examples/web/react/components/section/section.css @@ -1,5 +1,5 @@ -.section > .separator { - height: 2px; - background: #ffffff; - margin: 22px 0px 22px 0px; -} +.section > .separator { + background: #ffffff; + height: 2px; + margin: 22px 0px 22px 0px; +}