feat: order form page (#8)

src/pages/order-create/index.tsx

@@ -1,20 +1,31 @@
-import React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import { Button } from '@chakra-ui/react';
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Container, Heading, VStack } from '@chakra-ui/react';
 
-import { URLs } from '../../__data__/urls';
-import { mockOrder } from '../../mocks/landing';
+import { LandingThemeProvider } from '../../containers';
+import { OrderForm } from '../../components/order-form';
+
+const Page: FC = () => {
+  const { t } = useTranslation('~', {
+    keyPrefix: 'dry-wash.order-create',
+  });
 
-const Page = () => {
   return (
-    <>
-      <h1>Order form</h1>
-      {mockOrder.orders.map(({ id }) => (
-        <Button key={id} as={RouterLink} to={URLs.orderView.getUrl(id)}>
-          Посмотреть заказ {id}
-        </Button>
-      ))}
-    </>
+    <LandingThemeProvider>
+      <Container
+        w='full'
+        maxWidth='container.xl'
+        minH='100vh'
+        padding={0}
+        bg='white'
+        centerContent
+      >
+        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
+          <Heading textAlign='center' mt={4}>{t('title')}</Heading>
+          <OrderForm />
+        </VStack>
+      </Container>
+    </LandingThemeProvider>
   );
 };