Mantine

import { MantineProvider, Button, TextInput, Paper, Text, Stack } from '@mantine/core';
import { useForm, useDisclosure } from '@mantine/form';
import { notifications } from '@mantine/notifications';

function App() {
  const form = useForm({
    initialValues: {
      email: '',
      password: '',
    },
    validate: {
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'بريد غير صالح'),
      password: (value) => (value.length < 6 ? 'كلمة المرور قصيرة جداً' : null),
    },
  });

  const handleSubmit = (values) => {
    notifications.show({
      title: 'نجاح',
      message: 'تم تسجيل الدخول بنجاح',
      color: 'green',
    });
  };

  return (
    <MantineProvider>
      <Paper p="xl" shadow="md" maw={400}>
        <form onSubmit={form.onSubmit(handleSubmit)}>
          <Stack>
            <TextInput
              label="البريد الإلكتروني"
              placeholder="email@example.com"
              {...form.getInputProps('email')}
            />
            <TextInput
              label="كلمة المرور"
              type="password"
              {...form.getInputProps('password')}
            />
            <Button type="submit" fullWidth>
              تسجيل الدخول
            </Button>
          </Stack>
        </form>
      </Paper>
    </MantineProvider>
  );
}

// Hooks
function Modal() {
  const [opened, { open, close }] = useDisclosure(false);
  
  return (
    <>
      <Button onClick={open}>افتح</Button>
      <Modal opened={opened} onClose={close} title="عنوان">
        محتوى
      </Modal>
    </>
  );
}