implement checkbox fields

apps/app/src/components/Checkbox/Checkbox.module.scss

@@ -0,0 +1,48 @@
+.checkbox {
+    display: flex;
+    align-items: center;
+
+    gap: 16px;
+    width: 100%;
+
+    input[type='checkbox'] {
+        appearance: none; 
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        background: $black-10;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border: none;
+
+        &:checked {
+            background: $primary-muted-orange;
+
+            &:after {
+                content: "";
+                background: url(./../../assets/icons/Group.svg);
+                position: absolute;
+                width: 9.583px;
+                height: 9.583px;
+                background-size: contain;
+            }
+        }
+
+
+
+    }
+
+    label {
+        flex-grow: 1;
+        color: $primary-black;
+        font-family: Inter;
+        letter-spacing: -0.16px;
+    }
+}
+
+
+
+
+

apps/app/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,22 @@
+import c from './Checkbox.module.scss';
+
+type CheckboxProps = {
+  name: string;
+  checked: boolean;
+  label: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange'>;
+export const Checkbox = ({ name, checked, label, onChange }: CheckboxProps) => {
+  return (
+    <div className={c.checkbox}>
+      <input
+        type='checkbox'
+        checked={checked}
+        name={name}
+        onChange={onChange}
+      />
+      <label>{label}</label>
+    </div>
+  );
+};

apps/app/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+import { Checkbox } from './Checkbox';
+export { Checkbox };

apps/app/src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.module.scss

@@ -4,4 +4,8 @@
 
     gap: 40px;
     width: 422px; //TODO prominit kasnije u width 100%
+}
+
+.checkboxFieldsWrapper{
+    margin-block: 56px 48px; //TODO riješi kasnije s parent wrapperom i gapom
 }

apps/app/src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.tsx

@@ -1,13 +1,17 @@
 import { ChangeEvent, useState } from 'react';
 import { Input } from '../../Input';
 import c from './FirstStepRegistrationForm.module.scss';
+import { Checkbox } from '../../Checkbox';
 
 type UserData = {
   firstName: string;
   lastName: string;
   email: string;
   password: string;
   repeatedPassword: string;
+  newsletterEnabled: boolean;
+  companiesNewsEnabled: boolean;
+  termsAndConditionsEnabled: boolean;
 };
 
 export const FirstStepRegistrationForm = () => {
@@ -17,6 +21,9 @@ export const FirstStepRegistrationForm = () => {
     email: '',
     password: '',
     repeatedPassword: '',
+    newsletterEnabled: false,
+    companiesNewsEnabled: false,
+    termsAndConditionsEnabled: false,
   });
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -26,40 +33,74 @@ export const FirstStepRegistrationForm = () => {
       [name]: value,
     }));
   };
+
+  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    setUserData((prevData) => ({
+      ...prevData,
+      [name]: checked,
+    }));
+  };
   return (
-    <div className={c.inputFieldsWrapper}>
-      <Input
-        name='firstName'
-        value={userData.firstName}
-        placeholder='Ime'
-        onChange={handleInputChange}
-      />
-      <Input
-        name='lastName'
-        value={userData.lastName}
-        placeholder='Prezime'
-        onChange={handleInputChange}
-      />
-      <Input
-        name='email'
-        value={userData.email}
-        placeholder='Email'
-        onChange={handleInputChange}
-      />
-      <Input
-        name='password'
-        value={userData.password}
-        placeholder='Lozinka'
-        onChange={handleInputChange}
-        type='password'
-      />
-      <Input
-        name='repeatedPassword'
-        value={userData.repeatedPassword}
-        placeholder='Potvrdite lozinku'
-        onChange={handleInputChange}
-        type='password'
-      />
-    </div>
+    <>
+      <div className={c.inputFieldsWrapper}>
+        <Input
+          name='firstName'
+          value={userData.firstName}
+          placeholder='Ime'
+          onChange={handleInputChange}
+        />
+        <Input
+          name='lastName'
+          value={userData.lastName}
+          placeholder='Prezime'
+          onChange={handleInputChange}
+        />
+        <Input
+          name='email'
+          value={userData.email}
+          placeholder='Email'
+          onChange={handleInputChange}
+        />
+        <Input
+          name='password'
+          value={userData.password}
+          placeholder='Lozinka'
+          onChange={handleInputChange}
+          type='password'
+        />
+        <Input
+          name='repeatedPassword'
+          value={userData.repeatedPassword}
+          placeholder='Potvrdite lozinku'
+          onChange={handleInputChange}
+          type='password'
+        />
+      </div>
+
+      <div className={c.checkboxFieldsWrapper}>
+        <Checkbox
+          label='Želim primati novosti o DUMP Days konferenciji.'
+          checked={userData.newsletterEnabled}
+          name='newsletterEnabled'
+          onChange={handleCheckboxChange}
+          key={1}
+        />
+        <Checkbox
+          label='Želim primati novosti o tvrtkama i otvorenim radnim pozicijama.'
+          checked={userData.companiesNewsEnabled}
+          name='companiesNewsEnabled'
+          onChange={handleCheckboxChange}
+          key={2}
+        />
+        <Checkbox
+          label='Slažem se s uvjetima i odredbama.'
+          checked={userData.termsAndConditionsEnabled}
+          name='termsAndConditionsEnabled'
+          onChange={handleCheckboxChange}
+          key={3}
+        />
+      </div>
+    </>
   );
 };