mirror of
https://github.com/pawelmalak/flame.git
synced 2026-03-09 14:03:11 +08:00
Added CompactTable and ActionIcons UI components
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
.CompactTable {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.CompactTable span {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.CompactTable span:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.Separator {
|
||||
border-bottom: 1px solid var(--color-primary);
|
||||
margin: 10px 0;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { ReactNode } from 'react';
|
||||
import classes from './CompactTable.module.css';
|
||||
|
||||
interface Props {
|
||||
headers: string[];
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const CompactTable = ({ headers, children }: Props): JSX.Element => {
|
||||
return (
|
||||
<div
|
||||
className={classes.CompactTable}
|
||||
style={{ gridTemplateColumns: `repeat(${headers.length}, 1fr)` }}
|
||||
>
|
||||
{headers.map((h, idx) => (
|
||||
<span key={idx}>{h}</span>
|
||||
))}
|
||||
|
||||
<div
|
||||
className={classes.Separator}
|
||||
style={{ gridColumn: `1 / ${headers.length + 1}` }}
|
||||
></div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user