2022-12-30 02:20:53 +13:00
|
|
|
import * as React from "react";
|
|
|
|
|
|
|
|
export const PrefGroup = (props) => <div role="table">{props.children}</div>;
|
|
|
|
|
|
|
|
export const Pref = (props) => {
|
2023-01-10 09:40:46 +13:00
|
|
|
const justifyContent = props.alignTop ? "normal" : "center";
|
2022-12-30 02:20:53 +13:00
|
|
|
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",
|
2023-01-10 09:40:46 +13:00
|
|
|
justifyContent,
|
2022-12-30 02:20:53 +13:00
|
|
|
paddingRight: "30px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div>
|
|
|
|
<b>{props.title}</b>
|
|
|
|
{props.subtitle && <em> ({props.subtitle})</em>}
|
|
|
|
</div>
|
|
|
|
{props.description && (
|
2023-05-24 07:13:01 +12:00
|
|
|
<div>
|
2022-12-30 02:20:53 +13:00
|
|
|
<em>{props.description}</em>
|
2023-05-24 07:13:01 +12:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div
|
2022-12-30 02:20:53 +13:00
|
|
|
role="cell"
|
2023-05-24 07:13:01 +12:00
|
|
|
style={{
|
2022-12-30 02:20:53 +13:00
|
|
|
flex: "1 0 calc(60% - 50px)",
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "column",
|
2023-01-10 09:40:46 +13:00
|
|
|
justifyContent,
|
2023-05-24 07:13:01 +12:00
|
|
|
}}
|
|
|
|
>
|
2022-12-30 02:20:53 +13:00
|
|
|
{props.children}
|
2023-05-24 07:13:01 +12:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-12-30 02:20:53 +13:00
|
|
|
);
|
|
|
|
};
|