From cfb287490d353166cf0a3db7105d8002cc473f00 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 14 Mar 2021 01:38:55 +0300 Subject: feat: add DataTable component --- src/components/Button.tsx | 15 +++++++++++---- src/components/DataTable.tsx | 29 +++++++++++++++++++++++++++++ src/components/ListTable.tsx | 4 ++-- src/containers/Products.tsx | 4 ++-- 4 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 src/components/DataTable.tsx 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 = ({ children, variant = 'contained' }) => { +const sizes = { + lg: 'p-5', + md: 'p-4', + sm: 'p-3', +}; + +const Button: React.FC = ({ variant = 'contained', size = 'md', children }) => { return ( 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 = ({ title, items, fields, handleRowClick = () => {} }) => { + return ( + <> +
+ {title} + +
+ + + ); +}; + +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 = ({ items, fields, handleRowClick = () => {} }) => { return ( - +
{fields.map(field => )} 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 = () => ( - + ); -- cgit v1.2.3
{field.label}