diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Button.tsx | 11 | ||||
-rw-r--r-- | src/components/DataTable.tsx | 30 | ||||
-rw-r--r-- | src/components/ListTable.tsx | 5 |
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> |