lbry-desktop/ui/component/settingsRow/view.jsx
jessopb 3034f4ce6c
bring in styles (#7542)
* bring in ody styles; modify; cleanup

* workflow

* workflow

* v0.52.6-alpha.teststyles.1

* fix hook

* v0.52.6-alpha.teststyles.2

* style fixes

* fix pagination styling

* v0.52.6-alpha.teststyles.3

* wallet icon was bad

* restore deploy script

* fixes

* fix player close button

* modal inputs

* cleanup

* cleanup

* fix staked indicator

* fix profile menu button skel delay

* fix view-all-playlists hover

* fix overlay buttons on collection page

* fix header buttons
2022-04-17 13:04:56 -04:00

37 lines
1.1 KiB
JavaScript

// @flow
import React from 'react';
import classnames from 'classnames';
type Props = {
title: string,
subtitle?: string,
multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right.
useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values.
disabled?: boolean,
children?: React$Node,
};
export default function SettingsRow(props: Props) {
const { title, subtitle, multirow, useVerticalSeparator, disabled, children } = props;
return (
<div
className={classnames('card__main-actions settings__row', {
'section__actions--between': !multirow,
'opacity-30': disabled,
})}
>
<div className="settings__row--title">
<p>{title}</p>
{subtitle && <p className="settings__row--subtitle">{subtitle}</p>}
</div>
<div
className={classnames('settings__row--value', {
'settings__row--value--multirow': multirow,
'settings__row--value--vertical-separator': useVerticalSeparator,
})}
>
{children && children}
</div>
</div>
);
}