summaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Button.tsx11
-rw-r--r--src/components/DataTable.tsx30
-rw-r--r--src/components/ListTable.tsx5
3 files changed, 12 insertions, 34 deletions
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 8f2398b..5724b40 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
interface Props {
+ onClick?: () => void;
+ route?: string;
variant?: 'contained' | 'outlined';
size?: 'sm' | 'md' | 'lg';
children: string;
@@ -18,10 +21,14 @@ const sizes = {
sm: 'p-3',
};
-const Button: React.FC<Props> = ({ variant = 'contained', size = 'md', children }) => {
+const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', children }) => {
+ const history = useHistory();
+ const navigateRoute = useCallback(() => history.push(route || '/'), [route, history]);
+
return (
<button
type="button"
+ onClick={route ? navigateRoute : onClick}
className={`m-3 font-bold tracking-wide hover:underline focus:outline-none ${variants[variant]} ${sizes[size]}`}
>
{children}
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
deleted file mode 100644
index e005454..0000000
--- a/src/components/DataTable.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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} />
- {items.length === 0 && <div className="text-center p-6">No data</div>}
- </>
- );
-};
-
-export default DataTable;
diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index 9315a27..85b86aa 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -6,13 +6,14 @@ interface Field {
}
interface Props {
- items: any[];
+ items?: any[];
fields: Field[];
handleRowClick?: (index: number) => void;
}
-const ListTable: React.FC<Props> = ({ items, fields, handleRowClick = () => {} }) => {
+const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () => {} }) => {
+ if (!items.length) return <div className="text-center p-6">No data</div>;
return (
<table className="table-auto w-full">
<thead>