feat: add CandidateForm and CandidateNew components

app/javascript/src/components/CandidateForm.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Input, DatePicker, Typography } from 'antd'
+import { t } from 'i18next'
+
+const { Title } = Typography
+
+const CandidateForm = ({ candidate, setCandidate }) => {
+  return (
+    <form style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <label htmlFor="name">
+        <Title level={4}>{t('candidateForm.nameLabel')}</Title>
+        <Input
+          placeholder={t('candidateForm.namePlaceholder')}
+          id="name"
+          onChange={({ target }) => setCandidate({ ...candidate, name: target.value })}
+        />
+      </label>
+
+      <label htmlFor="email">
+        <Title level={4}>{t('candidateForm.emailLabel')}</Title>
+        <Input
+          placeholder={t('candidateForm.emailPlaceholder')}
+          id="email"
+          type="email"
+          onChange={({ target }) => setCandidate({ ...candidate, email: target.value })}
+        />
+      </label>
+
+      <label htmlFor="birthdate">
+        <Title level={4}>{t('candidateForm.birthdateLabel')}</Title>
+        <DatePicker
+          style={{ width: '100%' }}
+          onChange={(date) => setCandidate({ ...candidate, birthdate: date })}
+        />
+      </label>
+    </form>
+  )
+}
+
+export default CandidateForm

app/javascript/src/i18n/en.json

@@ -5,5 +5,22 @@
   },
   "candidates": {
     "title": "Candidates"
+  },
+  "candidateNew": {
+    "title": "New Candidate",
+    "success": "Candidate created successfully",
+    "error": "Error creating candidate, try checking the email for duplicates"
+  },
+  "candidateForm": {
+    "nameLabel": "Name",
+    "namePlaceholder": "Enter candidate name",
+    "emailLabel": "Email",
+    "emailPlaceholder": "email@example.com",
+    "birthdateLabel": "Birthdate",
+    "submit": "Submit"
+  },
+  "navBar": {
+    "allCandidates": "All Candidates",
+    "newCandidate": "New Candidate"
   }
 }

app/javascript/src/views/CandidateNew.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react'
+import { getCandidate } from '@/repositories/candidates.js'
+import CandidateForm from '@/components/CandidateForm.jsx'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { Card, Typography, Button } from 'antd'
+import { successToast, errorToast } from '@/lib/toast.js'
+import { createCandidate } from '@/repositories/candidates.js'
+const { Title } = Typography
+
+const Candidate = () => {
+  const [candidate, setCandidate] = useState({ name: '', email: '', birthdate: '' })
+  const [loading, setLoading] = useState(true)
+  const { t } = useTranslation()
+  const { id } = useParams()
+
+  const handleSubmit = async () => {
+    const response = await createCandidate(candidate)
+
+    if (response.status !== 201) {
+      errorToast(t('candidateNew.error'))
+      return
+    }
+
+    setCandidate({ name: '', email: '', birthdate: '' })
+    successToast(t('candidateNew.success'))
+  }
+
+  useEffect(() => {
+    if (id) {
+      const fetchData = async () => {
+        const response = await getCandidate(id)
+
+        setCandidate(response.candidate)
+        setLoading(false)
+      }
+
+      fetchData()
+    } else {
+      setLoading(false)
+    }
+  }, [])
+  return (
+    <div style={{ padding: '20px' }}>
+      <Title>
+        {t('candidateNew.title')}
+      </Title>
+      <Card loading={loading} style={{ height: '100%', maxWidth: '600px' }}>
+        <CandidateForm candidate={candidate} setCandidate={setCandidate} loading={loading} />
+        <Button type='primary' onClick={handleSubmit} style={{ marginTop: '20px' }} >{t('generic.submit')}</Button>
+      </Card>
+    </div>
+  )
+}
+
+export default Candidate

app/javascript/src/views/index.js

@@ -1,3 +1,4 @@
 export { default as Candidates } from './Candidates.jsx'
 export { default as Candidate } from './Candidate.jsx'
+export { default as CandidateNew } from './CandidateNew.jsx'
 export { default as Home } from './Home.jsx'