refactor: extend checkbox field input

src/components/Inputs.tsx

@@ -89,13 +89,27 @@ interface CheckboxFieldProps {
   name: string
   isChecked: boolean
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  type?: 'default' | 'stylized'
 }
 
 export const CheckboxField = React.memo(
-  ({ label, name, isChecked, handleChange }: CheckboxFieldProps) => (
-    <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-      <label className='form-label labelMain'>{label}</label>
+  ({
+    label,
+    name,
+    isChecked,
+    handleChange,
+    type = 'default'
+  }: CheckboxFieldProps) => (
+    <div
+      className={`inputLabelWrapperMain inputLabelWrapperMainAlt${
+        type === 'stylized' ? ` inputLabelWrapperMainAltStylized` : ''
+      }`}
+    >
+      <label htmlFor={name} className='form-label labelMain'>
+        {label}
+      </label>
       <input
+        id={name}
         type='checkbox'
         className='CheckboxMain'
         name={name}

src/components/ModForm.tsx

@@ -395,6 +395,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
         name='nsfw'
         isChecked={formState.nsfw}
         handleChange={handleCheckboxChange}
+        type='stylized'
       />
       <div className='inputLabelWrapperMain'>
         <div className='labelWrapperMain'>

src/pages/write.tsx

@@ -55,6 +55,7 @@ export const WritePage = () => {
                   name='nsfw'
                   isChecked={false}
                   handleChange={() => {}}
+                  type='stylized'
                 />
                 <div className='IBMSMSMBS_WriteAction'>
                   <button className='btn btnMain' type='button'>