Refactor SettingTile component
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
f8f77075ec
commit
af61f4f1db
3 changed files with 11 additions and 12 deletions
|
@ -7,13 +7,13 @@ import Text from '../../atoms/text/Text';
|
|||
function SettingTile({ title, options, content }) {
|
||||
return (
|
||||
<div className="setting-tile">
|
||||
<div className="setting-tile__title__wrapper">
|
||||
<div className="setting-tile__content">
|
||||
<div className="setting-tile__title">
|
||||
<Text variant="b1">{title}</Text>
|
||||
</div>
|
||||
{options !== null && <div className="setting-tile__options">{options}</div>}
|
||||
{content}
|
||||
</div>
|
||||
{content !== null && <div className="setting-tile__content">{content}</div>}
|
||||
{options !== null && <div className="setting-tile__options">{options}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.setting-tile {
|
||||
&__title__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&__title {
|
||||
display: flex;
|
||||
&__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@include dir.side(margin, 0, var(--sp-normal));
|
||||
}
|
||||
&__title {
|
||||
margin-bottom: var(--sp-ultra-tight);
|
||||
}
|
||||
&__options {
|
||||
@include dir.side(margin, var(--sp-tight), 0);
|
||||
}
|
||||
}
|
|
@ -23,9 +23,6 @@
|
|||
margin-top: var(--sp-normal);
|
||||
border-bottom: 1px solid var(--bg-surface-border);
|
||||
padding-bottom: 16px;
|
||||
&__title__wrapper {
|
||||
margin-bottom: var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue