awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-16 19:28:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): added new components empty state and skeleton

Browse Source
This commit is contained in:
akhilmhdh
2023-02-22 23:27:36 +05:30
parent af64582efd
commit 621b640af4
12 changed files with 283 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/Table/Table.tsx
+30 -3
View File
@@ -1,6 +1,8 @@
import { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';
import { Skeleton } from '../Skeleton';
export type TableContainerProps = {
children: ReactNode;
isRounded?: boolean;
@@ -32,7 +34,7 @@ export type TableProps = {
export const Table = ({ children, className }: TableProps): JSX.Element => (
<table
className={twMerge(
'w-full rounded rounded-md bg-bunker-800 p-2 text-left text-sm text-gray-300',
'w-full rounded-md bg-bunker-800 p-2 text-left text-sm text-gray-300',
className
)}
>
@@ -59,7 +61,10 @@ export type TrProps = {
} & HTMLAttributes<HTMLTableRowElement>;
export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
<tr className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)} {...props}>
<tr
className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)}
{...props}
>
{children}
</tr>
);
@@ -71,7 +76,7 @@ export type ThProps = {
};
export const Th = ({ children, className }: ThProps): JSX.Element => (
<th className={twMerge('px-5 pt-4 pb-3.5 font-medium font-semibold bg-bunker-500', className)}>{children}</th>
<th className={twMerge('bg-bunker-500 px-5 pt-4 pb-3.5 font-semibold', className)}>{children}</th>
);
// table body
@@ -95,3 +100,25 @@ export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
{children}
</td>
);
export type TBodyLoader = {
rows?: number;
columns: number;
className?: string;
// unique key for mapping
key: string;
};
export const TableSkeleton = ({ rows = 3, columns, key, className }: TBodyLoader): JSX.Element => (
<>
{Array.apply(0, Array(rows)).map((_x, i) => (
<Tr key={`${key}-skeleton-rows-${i + 1}`}>
{Array.apply(0, Array(columns)).map((_y, j) => (
<Td key={`${key}-skeleton-rows-${i + 1}-column-${j + 1}`}>
<Skeleton className={className} />
</Td>
))}
</Tr>
))}
</>
);