[component lib] table basic component (#31)

packages/frontend/src/components/shared/Table/Table.theme.ts

@@ -0,0 +1,35 @@
+interface ThemeProps {
+  base: string;
+  header: string;
+  row: string;
+  columnHeaderCell: string;
+  rowHeaderCell: string;
+  cell: string;
+}
+
+const primaryTheme: ThemeProps = {
+  base: 'min-w-full border-collapse',
+  header: 'border-b border-sky-950/opacity-5 font-medium leading-tight',
+  row: 'border-b border-sky-950/opacity-5',
+  columnHeaderCell:
+    'p-4 text-sky-950 text-sm font-medium uppercase tracking-wider text-left',
+  rowHeaderCell:
+    'p-4 text-slate-600 text-sm font-normal leading-tight text-left',
+  cell: 'p-4 whitespace-nowrap text-sm text-slate-600 font-normal text-left',
+};
+
+const secondaryTheme: ThemeProps = {
+  base: 'min-w-full border-collapse',
+  header:
+    'p-2 border-b border-sky-950/5 text-sky-950 text-sm font-medium leading-tight',
+  row: 'text-left border-b border-gray-300/50',
+  columnHeaderCell:
+    'px-6 py-3 text-xs font-medium uppercase tracking-wider text-gray-800',
+  rowHeaderCell: 'px-6 py-4 font-medium whitespace-nowrap text-gray-800',
+  cell: 'px-6 py-4 whitespace-nowrap text-sm text-gray-600',
+};
+
+export const tableTheme = {
+  primary: primaryTheme,
+  secondary: secondaryTheme,
+};

packages/frontend/src/components/shared/Table/Table.tsx

@@ -1,45 +1,60 @@
 import React from 'react';
+import { tableTheme } from './Table.theme';
 
-const Header: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+type TableComponentProps = {
-  <thead className="text-left">{children}</thead>
+  children: React.ReactNode;
-);
+  variant?: keyof typeof tableTheme;
-const Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+};
-  <tbody className="text-left">{children}</tbody>
-);
-const Row: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <tr className="text-left">{children}</tr>
-);
-const ColumnHeaderCell: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => (
-  <th className="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
-    {children}
-  </th>
-);
-const RowHeaderCell: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => (
-  <th
-    scope="row"
-    className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
-  >
-    {children}
-  </th>
-);
-const Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-    {children}
-  </td>
-);
 
-const Table: React.FC<{ children: React.ReactNode }> & {
+const useTheme = (variant: 'primary' | 'secondary' = 'primary') =>
+  tableTheme[variant];
+
+const Table: React.FC<TableComponentProps> & {
   Header: typeof Header;
   Body: typeof Body;
   Row: typeof Row;
   ColumnHeaderCell: typeof ColumnHeaderCell;
   RowHeaderCell: typeof RowHeaderCell;
   Cell: typeof Cell;
-} = ({ children }) => <table className="min-w-full">{children}</table>;
+} = ({ children, variant = 'primary' }) => {
+  const theme = useTheme(variant);
+  return <table className={theme.base}>{children}</table>;
+};
+
+const Header: React.FC<TableComponentProps> = ({ children, variant }) => {
+  const theme = useTheme(variant);
+  return <thead className={theme.header}>{children}</thead>;
+};
+
+const Body: React.FC<TableComponentProps> = ({ children }) => {
+  return <tbody>{children}</tbody>;
+};
+
+const Row: React.FC<TableComponentProps> = ({ children, variant }) => {
+  const theme = useTheme(variant);
+  return <tr className={theme.row}>{children}</tr>;
+};
+
+const ColumnHeaderCell: React.FC<TableComponentProps> = ({
+  children,
+  variant,
+}) => {
+  const theme = useTheme(variant);
+  return <th className={theme.columnHeaderCell}>{children}</th>;
+};
+
+const RowHeaderCell: React.FC<TableComponentProps> = ({
+  children,
+  variant,
+}) => {
+  const theme = useTheme(variant);
+  return <th className={theme.rowHeaderCell}>{children}</th>;
+};
+
+const Cell: React.FC<TableComponentProps> = ({ children, variant }) => {
+  const theme = useTheme(variant);
+  return <td className={theme.cell}>{children}</td>;
+};
 
 Table.Header = Header;
 Table.Body = Body;