cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-12-23 00:57:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

table basic component

Browse Source
This commit is contained in:
Vivian Phung 2024-05-13 15:28:24 -04:00 committed by Vivian Phung
parent f8908c1c06
commit 947337acb1
2 changed files with 83 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/frontend/src/components/shared/Table/Table.theme.ts Normal file
View File

@ -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,
};

81
packages/frontend/src/components/shared/Table/Table.tsx
View File

@ -1,45 +1,60 @@
import React from 'react';
import { tableTheme } from './Table.theme';
const Header: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<thead className="text-left">{children}</thead>
);
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>
);
type TableComponentProps = {
children: React.ReactNode;
variant?: keyof typeof tableTheme;
};
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;