53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
import * as React from "react";
|
|
|
|
export const PrefGroup = (props) => <div role="table">{props.children}</div>;
|
|
|
|
export const Pref = (props) => {
|
|
const justifyContent = props.alignTop ? "normal" : "center";
|
|
return (
|
|
<div
|
|
role="row"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
marginTop: "10px",
|
|
marginBottom: "20px",
|
|
}}
|
|
>
|
|
<div
|
|
role="cell"
|
|
id={props.labelId ?? ""}
|
|
aria-label={props.title}
|
|
style={{
|
|
flex: "1 0 40%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent,
|
|
paddingRight: "30px",
|
|
}}
|
|
>
|
|
<div>
|
|
<b>{props.title}</b>
|
|
{props.subtitle && <em> ({props.subtitle})</em>}
|
|
</div>
|
|
{props.description && (
|
|
<div>
|
|
<em>{props.description}</em>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
role="cell"
|
|
style={{
|
|
flex: "1 0 calc(60% - 50px)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent,
|
|
}}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|