From f745dcdbe22e7d278a2ef7b0e29af7e86b48ca4b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 03:25:13 +0300
Subject: feat: create initial ProductForm

---
 src/components/Button.tsx      | 16 ++++++++--------
 src/containers/Page.tsx        |  9 +++++----
 src/containers/ProductForm.tsx | 14 ++++++++++++++
 src/index.tsx                  |  2 ++
 4 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 src/containers/ProductForm.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 5724b40..bf98755 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,18 +1,18 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
-interface Props {
-  onClick?: () => void;
-  route?: string;
-  variant?: 'contained' | 'outlined';
-  size?: 'sm' | 'md' | 'lg';
+export type Props = Partial<{
+  onClick: () => void;
+  route: string;
+  variant: 'contained' | 'outlined';
+  size: 'sm' | 'md' | 'lg';
   children: string;
-}
+}>
 
 
 const variants = {
   contained: 'bg-black text-white',
-  outlined: 'border-2 border-black',
+  outlined: '',
 };
 
 const sizes = {
@@ -29,7 +29,7 @@ const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size =
     <button
       type="button"
       onClick={route ? navigateRoute : onClick}
-      className={`m-3 font-bold tracking-wide hover:underline focus:outline-none ${variants[variant]} ${sizes[size]}`}
+      className={`m-3 font-bold tracking-wide hover:underline focus:outline-none border-2 border-black ${variants[variant]} ${sizes[size]}`}
     >
       {children}
     </button>
diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index 0c8269e..f6ae814 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import Paper from '../components/Paper';
-import Button from '../components/Button';
+import Button, { Props as ButtonProps } from '../components/Button';
 
-interface Action {
+export interface Action extends ButtonProps {
   name: string;
-  route: string;
 }
 
 interface Props {
@@ -16,7 +15,9 @@ const Page: React.FC<Props> = ({ title, actions, children }) => (
   <Paper>
     <div className="mb-2 flex justify-between items-center">
       <span className="text-2xl font-bold">{title}</span>
-      {actions?.map(action => (<Button size="sm" route={action.route}>{action.name}</Button>))}
+      <div>
+        {actions?.map(action => (<Button {...action} size="sm">{action.name}</Button>))}
+      </div>
     </div>
     {children}
   </Paper>
diff --git a/src/containers/ProductForm.tsx b/src/containers/ProductForm.tsx
new file mode 100644
index 0000000..d79b1d1
--- /dev/null
+++ b/src/containers/ProductForm.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Page, { Action } from '../containers/Page';
+
+const actions: Action[] = [
+  { name: 'Назад', route: '/', variant: 'outlined' },
+  { name: 'Сохранить', route: '/' },
+];
+
+const ProductForm: React.FC = () => (
+  <Page title="Продукт" actions={actions}>
+  </Page>
+);
+
+export default ProductForm;
diff --git a/src/index.tsx b/src/index.tsx
index 0b6f723..4972454 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -9,6 +9,7 @@ import {
 import Header from './components/Header';
 import Home from './containers/Home';
 import Products from './containers/Products';
+import ProductForm from './containers/ProductForm';
 
 const navigation = [
   { name: 'Главная', route: '/' },
@@ -23,6 +24,7 @@ const App: React.FC = () => (
     <Switch>
       <Route exact path="/" component={Home} />
       <Route exact path="/products" component={Products} />
+      <Route exact path="/products/add" component={ProductForm} />
     </Switch>
   </Router>
 );
-- 
cgit v1.2.3