degmods.com/src/pages/settings/preference.tsx

// todo: use components from Input.tsx
export const PreferencesSetting = () => {
  return (
    <div className='IBMSMSplitMainFullSideFWMid'>
      <div className='IBMSMSplitMainFullSideSec'>
        <div className='IBMSMSMBS_Write'>
          <div className='inputLabelWrapperMain'>
            <div className='labelWrapperMain'>
              <p className='labelMain'>Notifications</p>
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                When someone follows you
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='notificationsSettings'
                checked
              />
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                When someone mentions you
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='notificationsSettings'
                checked
              />
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                When someone sends a reaction to your post
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='notificationsSettings'
                checked
              />
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                When someone Tips/Zaps you
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='notificationsSettings'
                checked
              />
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                When someone re-posts your post
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='notificationsSettings'
                checked
              />
            </div>
          </div>
          <div className='inputLabelWrapperMain'>
            <div className='labelWrapperMain'>
              <p className='labelMain'>Not Safe For Work (NSFW)</p>
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                Show all NSFW posts
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='NSFWPreference'
              />
            </div>
          </div>
          <div className='inputLabelWrapperMain'>
            <div className='labelWrapperMain'>
              <p className='labelMain'>Web of Trust (WoT) level</p>
            </div>
            <p className='labelDescriptionMain'>
              This affects what posts you see, reactions, DMs, and
              notifications. Learn more:&nbsp;Link
            </p>
            <div className='inputLabelWrapperMainSliderWrapper'>
              <input
                className='form-range inputRangeMain inputRangeMainZap'
                type='range'
                max='100'
                min='0'
                value='10'
                step='1'
                required
                name='WoTLevel'
              />
              <p className='ZapSplitUserBoxRangeText'>10</p>
            </div>
            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
              <label className='form-label labelMain'>
                Consider those who zap/tip, regardless of WoT level
              </label>
              <input
                type='checkbox'
                className='CheckboxMain'
                name='WoTZap'
                checked
              />
            </div>
          </div>
          <div className='IBMSMSMBS_WriteAction'>
            <button className='btn btnMain' type='button'>
              Save
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}