4 files changed, 44 insertions, 8 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 5fd69b2..8f2398b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,21 +1,28 @@
 import React from 'react';
 
 interface Props {
-  variant?: 'contained' | 'outlined'
+  variant?: 'contained' | 'outlined';
+  size?: 'sm' | 'md' | 'lg';
   children: string;
 }
 
 
-const styles = {
+const variants = {
   contained: 'bg-black text-white',
   outlined: 'border-2 border-black',
 };
 
-const Button: React.FC<Props> = ({ children, variant = 'contained' }) => {
+const sizes = {
+  lg: 'p-5',
+  md: 'p-4',
+  sm: 'p-3',
+};
+
+const Button: React.FC<Props> = ({ variant = 'contained', size = 'md', children }) => {
   return (
     <button
       type="button"
-      className={`p-4 m-3 font-bold tracking-wide hover:underline focus:outline-none ${styles[variant]}`}
+      className={`m-3 font-bold tracking-wide hover:underline focus:outline-none ${variants[variant]} ${sizes[size]}`}
     >
       {children}
     </button>
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
new file mode 100644
index 0000000..e75af18
--- /dev/null
+++ b/src/components/DataTable.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import ListTable from './ListTable';
+import Button from './Button';
+
+interface Field {
+  key: string;
+  label: string;
+}
+
+interface Props {
+  title: string;
+  items: any[];
+  fields: Field[];
+  handleRowClick?: (index: number) => void;
+}
+
+const DataTable: React.FC<Props> = ({ title, items, fields, handleRowClick = () => {} }) => {
+  return (
+    <>
+      <div className="mb-2 flex justify-between items-center">
+        <span className="text-2xl font-bold">{title}</span>
+        <Button size="sm">Добавить</Button>
+      </div>
+      <ListTable items={items} fields={fields} handleRowClick={handleRowClick} />
+    </>
+  );
+};
+
+export default DataTable;
diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index 9faa0ad..9315a27 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -8,13 +8,13 @@ interface Field {
 interface Props {
   items: any[];
   fields: Field[];
-  handleRowClick?: (index: number) => any;
+  handleRowClick?: (index: number) => void;
 }
 
 
 const ListTable: React.FC<Props> = ({ items, fields, handleRowClick = () => {} }) => {
   return (
-    <table className="m-2 table-auto w-full">
+    <table className="table-auto w-full">
       <thead>
         <tr className="border-b select-none">
           {fields.map(field => <th>{field.label}</th>)}
diff --git a/src/containers/Products.tsx b/src/containers/Products.tsx
index c96e6a9..9b4f507 100644
--- a/src/containers/Products.tsx
+++ b/src/containers/Products.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Paper from '../components/Paper';
-import ListTable from '../components/ListTable';
+import DataTable from '../components/DataTable';
 
 const fields = [
   { key: '_id', label: 'ID' },
@@ -19,7 +19,7 @@ const items = [
 
 const Home: React.FC = () => (
   <Paper>
-    <ListTable items={items} fields={fields} />
+    <DataTable title="Товары" items={items} fields={fields} />
   </Paper>
 );