initial commit

src/app/molecules/setting-tile/SettingTile.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SettingTile.scss';
+
+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__title">
+          <Text variant="b1">{title}</Text>
+        </div>
+        {options !== null && <div className="setting-tile__options">{options}</div>}
+      </div>
+      {content !== null && <div className="setting-tile__content">{content}</div>}
+    </div>
+  );
+}
+
+SettingTile.defaultProps = {
+  options: null,
+  content: null,
+};
+
+SettingTile.propTypes = {
+  title: PropTypes.string.isRequired,
+  options: PropTypes.node,
+  content: PropTypes.node,
+};
+
+export default SettingTile;

src/app/molecules/setting-tile/SettingTile.scss

@@ -0,0 +1,16 @@
+.setting-tile {
+  &__title__wrapper {
+    display: flex;
+    align-items: center;
+  }
+  &__title {
+    flex: 1;
+    min-width: 0;
+    margin-right: var(--sp-normal);
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: var(--sp-normal);
+    }
+  }
+
+}