fix: styles

src/features/authentication/components/DateOfBirth.tsx

@@ -0,0 +1,38 @@
+import { useState, useMemo } from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+import { useTranslation } from 'react-i18next';
+
+export function DateOfBirth() {
+  const { t, i18n } = useTranslation('completionForm');
+  const isFarsi = i18n.language === 'fa' || i18n.language === 'fa-IR';
+  const [birthDate, setBirthDate] = useState<Date | null>(null);
+
+  const Adapter = useMemo(() => {
+    return isFarsi ? AdapterDateFnsJalali : AdapterDateFns;
+  }, [isFarsi]);
+
+  return (
+    <LocalizationProvider dateAdapter={Adapter}>
+      <DatePicker
+        label={t('completion.dateOfBirth')}
+        value={birthDate}
+        onChange={(newValue) => setBirthDate(newValue)}
+        slotProps={{
+          textField: {
+            fullWidth: true,
+            sx: {
+              width: {
+                xs: '100%',
+                sm: '70%',
+                md: '309px',
+              },
+            },
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}