d63326066f
* Setup, and security settings * Settings -> Details * Settings -> Notifications * Profile * lint * fix: Flash of loading on members screen * align language input * feat: Move share links management to sortable table * Add account menu to sidebar on settings page * Aesthetic tweaks, light borders between settings and slight column offset
73 lines
1.4 KiB
TypeScript
73 lines
1.4 KiB
TypeScript
import { transparentize } from "polished";
|
|
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import breakpoint from "styled-components-breakpoint";
|
|
import Flex from "~/components/Flex";
|
|
import Text from "~/components/Text";
|
|
|
|
type Props = {
|
|
label: React.ReactNode;
|
|
description: React.ReactNode;
|
|
name: string;
|
|
children: React.ReactNode;
|
|
visible?: boolean;
|
|
border?: boolean;
|
|
};
|
|
|
|
const Row = styled(Flex)<{ $border?: boolean }>`
|
|
display: block;
|
|
padding: 24px 0;
|
|
border-bottom: 1px solid
|
|
${(props) =>
|
|
props.$border === false
|
|
? "transparent"
|
|
: transparentize(0.5, props.theme.divider)};
|
|
|
|
${breakpoint("tablet")`
|
|
display: flex;
|
|
`};
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
`;
|
|
|
|
const Column = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-basis: 100%;
|
|
flex: 1;
|
|
|
|
&:first-child {
|
|
min-width: 60%;
|
|
}
|
|
|
|
${breakpoint("tablet")`
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
`};
|
|
`;
|
|
|
|
const Label = styled(Text)`
|
|
margin-bottom: 4px;
|
|
`;
|
|
|
|
export default function SettingRow(props: Props) {
|
|
if (props.visible === false) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Row gap={32} $border={props.border}>
|
|
<Column>
|
|
<Label as="h3">
|
|
<label htmlFor={props.name}>{props.label}</label>
|
|
</Label>
|
|
<Text type="secondary">{props.description}</Text>
|
|
</Column>
|
|
<Column>{props.children}</Column>
|
|
</Row>
|
|
);
|
|
}
|