mirror of
https://github.com/snowball-tools/snowballtools-base.git
synced 2024-12-22 20:47:44 +00:00
table basic component
This commit is contained in:
parent
f8908c1c06
commit
947337acb1
35
packages/frontend/src/components/shared/Table/Table.theme.ts
Normal file
35
packages/frontend/src/components/shared/Table/Table.theme.ts
Normal 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,
|
||||
};
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user