diff --git a/src/components/ComparisonTable.tsx b/src/components/ComparisonTable.tsx new file mode 100644 index 0000000..fbec286 --- /dev/null +++ b/src/components/ComparisonTable.tsx @@ -0,0 +1,144 @@ +import * as React from 'react' +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + Typography, + Divider, + Box +} from '@mui/material' + +interface CellContent { + content: string | React.ReactNode + status: 'bad' | 'neutral' | 'good' +} + +interface Header { + name: string + description?: string +} + +interface TableProps { + columnHeaders: Header[] + rowHeaders: Header[] + rows: CellContent[][] + summary: string +} + +const getStatusColor = (status: 'bad' | 'neutral' | 'good') => { + switch (status) { + case 'bad': + return '#FFEBEE' + case 'neutral': + return '#FFFDE7' + case 'good': + return '#E8F5E9' + default: + return 'white' + } +} + +const tableCellSx = { + backgroundColor: 'background.paper', + border: '1px solid rgba(224, 224, 224, 1)', + '&:hover': { + backgroundColor: 'grey.200' + } +} + +const TableHeaderCell: React.FC<{ name: string; description?: string }> = ({ + name, + description +}) => { + return ( + + + {name} + + {description && ( + + {description} + + )} + + ) +} + +export const ComparisonTable: React.FC = ({ + columnHeaders, + rowHeaders, + rows, + summary +}) => { + return ( + + + + + + + {columnHeaders.map(({ name, description }) => ( + + ))} + + + + {rows.map((row, rowIndex) => ( + + + {row.map((cell, cellIndex) => ( + + {cell.content} + + ))} + + ))} + +
+ + + Summary: + + {summary} + + + ) +} diff --git a/src/pages/blog/[slug].js b/src/pages/blog/[slug].js index dad0351..fb9788d 100644 --- a/src/pages/blog/[slug].js +++ b/src/pages/blog/[slug].js @@ -21,10 +21,11 @@ import Youtube from '@Components/Youtube' import Timeline from '@Components/Timeline' import Table from '@Components/Table' import Alert from '@Components/Alert' +import { ComparisonTable } from '@Components/ComparisonTable' import 'prism-theme-night-owl' -const components = { Figure, Youtube, Timeline, Table, Alert } +const components = { Figure, Youtube, Timeline, Table, Alert, ComparisonTable } export default function Posts({ source, data }) { return (
diff --git a/tst/components/ComparisonTable.test.tsx b/tst/components/ComparisonTable.test.tsx new file mode 100644 index 0000000..bcbe815 --- /dev/null +++ b/tst/components/ComparisonTable.test.tsx @@ -0,0 +1,94 @@ +import { render } from '@testing-library/react' +import { ComparisonTable } from '@Components/ComparisonTable' + +describe('ComparisonTable', () => { + const setup = ({} = {}) => { + const queries = render( + + ) + return queries + } + + it('renders correctly', () => { + setup() + + const { asFragment } = setup() + + expect(asFragment()).toMatchSnapshot() + }) +}) diff --git a/tst/components/__snapshots__/ComparisonTable.test.tsx.snap b/tst/components/__snapshots__/ComparisonTable.test.tsx.snap new file mode 100644 index 0000000..6557a2f --- /dev/null +++ b/tst/components/__snapshots__/ComparisonTable.test.tsx.snap @@ -0,0 +1,210 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ComparisonTable renders correctly 1`] = ` + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ Feature A +
+

+ Description for Feature A +

+ 		+
+ Feature B +
+

+ Description for Feature B +

+ 		+
+ Feature C +
+

+ Description for Feature C +

+
+
+ Option 1 +
+

+ Description for Option 1 +

+ 		+ + Good + + + + Average + + + + Poor + +
+
+ Option 2 +
+

+ Description for Option 2 +

+ 		+ + Poor + + + + Good + + + + Average + +
+
+ Option 3 +
+

+ A very long descripition of Option 3 that needs more than 1 line +

+ 		+ + Average + + + + Poor + + + + Good + +
+
+

+ Summary: +

+

+ summary +

+
+
+ +`;