Wojtek
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { forwardRef } from 'react';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import type { ComponentPropsWithoutRef } from 'react';
|
|
|
|
export const Th = forwardRef<HTMLTableCellElement, ComponentPropsWithoutRef<'th'>>(function Th(
|
|
{ className, ...other },
|
|
forwardedRef,
|
|
) {
|
|
return (
|
|
<th
|
|
{...other}
|
|
className={twMerge('text-grey-500 px-5 pb-4 text-left font-sans text-sm font-normal', className)}
|
|
ref={forwardedRef}
|
|
/>
|
|
);
|
|
});
|
|
export const Td = forwardRef<HTMLTableCellElement, ComponentPropsWithoutRef<'td'>>(function Td(
|
|
{ className, ...other },
|
|
forwardedRef,
|
|
) {
|
|
return (
|
|
<td
|
|
{...other}
|
|
className={twMerge('text-grey-800 p-6 font-sans text-base font-normal', className)} //[1.5625rem]
|
|
ref={forwardedRef}
|
|
/>
|
|
);
|
|
});
|
|
export const Tr = forwardRef<HTMLTableRowElement, ComponentPropsWithoutRef<'tr'>>(function Td(
|
|
{ className, ...other },
|
|
forwardRef,
|
|
) {
|
|
return <tr className={twMerge(className)} {...other} ref={forwardRef} />;
|
|
});
|
|
export const Thead = forwardRef<HTMLTableSectionElement, ComponentPropsWithoutRef<'thead'>>(function Thead(
|
|
props,
|
|
forwardedRef,
|
|
) {
|
|
return <thead {...props} ref={forwardedRef} />;
|
|
});
|
|
|
|
export const Tbody = forwardRef<HTMLTableSectionElement, ComponentPropsWithoutRef<'tbody'>>(function Tbody(
|
|
{ className, ...other },
|
|
forwardedRef,
|
|
) {
|
|
return <tbody {...other} className={twMerge(' divide-grey-200 divide-y ', className)} ref={forwardedRef} />;
|
|
});
|
|
|
|
export const Table = forwardRef<HTMLTableElement, ComponentPropsWithoutRef<'table'>>(function Table(
|
|
{ className, ...other },
|
|
forwardedRef,
|
|
) {
|
|
return <table {...other} className={twMerge('relative z-10 table w-full', className)} ref={forwardedRef} />;
|
|
});
|
|
|
|
export const Root = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function Root(
|
|
{ className, ...other },
|
|
forwardedRef,
|
|
) {
|
|
return (
|
|
<div
|
|
className={twMerge(
|
|
"after:border-grey-100 relative z-0 after:absolute after:top-[39px] after:left-0 after:bottom-0 after:right-0 after:rounded-xl after:border after:border-solid after:shadow-sm after:content-['']",
|
|
className,
|
|
)}
|
|
{...other}
|
|
ref={forwardedRef}
|
|
/>
|
|
);
|
|
});
|