docs: fix incorrect field labels and remove database tables container

This commit is contained in:
Bereket Engida
2025-03-31 07:26:18 +03:00
parent dad19a9934
commit cad6470b87
2 changed files with 74 additions and 96 deletions

View File

@@ -30,80 +30,78 @@ interface DatabaseTableProps {
export default function DatabaseTable({ fields }: DatabaseTableProps) {
return (
<div className="border">
<Table className="my-0">
<TableHeader>
<TableRow className="bg-primary/10 dark:bg-primary/20">
<TableHead className="w-1/6">Field Name</TableHead>
<TableHead className="w-1/6">Type</TableHead>
<TableHead className="w-1/12">Key</TableHead>
<TableHead className="w-1/2">Description</TableHead>
<Table className="my-0">
<TableHeader>
<TableRow className="bg-primary/10 dark:bg-primary/20">
<TableHead className="w-1/6">Field Name</TableHead>
<TableHead className="w-1/6">Type</TableHead>
<TableHead className="w-1/12">Key</TableHead>
<TableHead className="w-1/2">Description</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{fields.map((field, index) => (
<TableRow
key={index}
className={index % 2 === 0 ? "bga-muted/50" : ""}
>
<TableCell className="font-medium">{field.name}</TableCell>
<TableCell className="font-mono text-sm">
<Badge variant="outline">{field.type}</Badge>
</TableCell>
<TableCell>
{field.isPrimaryKey && (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<Badge
variant="secondary"
className="mr-1 rounded-sm bg-amber-500"
>
<Key className="w-3 h-3 mr-1" size={14} />
PK
</Badge>
</TooltipTrigger>
<TooltipContent>Primary Key</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{field.isForeignKey && (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<Badge
variant="secondary"
className="mr-1 rounded-sm bg-blue-500"
>
<Link className="w-3 h-3 mr-1" size={14} />
FK
</Badge>
</TooltipTrigger>
<TooltipContent>Foreign Key</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{!field.isPrimaryKey &&
!field.isForeignKey &&
!field.isOptional && (
<span className="text-muted text-center">-</span>
)}
{field.isOptional && (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<Badge variant="outline">?</Badge>
</TooltipTrigger>
<TooltipContent>Optional</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</TableCell>
<TableCell>{field.description}</TableCell>
</TableRow>
</TableHeader>
<TableBody>
{fields.map((field, index) => (
<TableRow
key={index}
className={index % 2 === 0 ? "bga-muted/50" : ""}
>
<TableCell className="font-medium">{field.name}</TableCell>
<TableCell className="font-mono text-sm">
<Badge variant="outline">{field.type}</Badge>
</TableCell>
<TableCell>
{field.isPrimaryKey && (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<Badge
variant="secondary"
className="mr-1 rounded-sm bg-amber-500"
>
<Key className="w-3 h-3 mr-1" size={14} />
PK
</Badge>
</TooltipTrigger>
<TooltipContent>Primary Key</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{field.isForeignKey && (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<Badge
variant="secondary"
className="mr-1 rounded-sm bg-blue-500"
>
<Link className="w-3 h-3 mr-1" size={14} />
FK
</Badge>
</TooltipTrigger>
<TooltipContent>Foreign Key</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
{!field.isPrimaryKey &&
!field.isForeignKey &&
!field.isOptional && (
<span className="text-muted text-center">-</span>
)}
{field.isOptional && (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger>
<Badge variant="outline">?</Badge>
</TooltipTrigger>
<TooltipContent>Optional</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</TableCell>
<TableCell>{field.description}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
))}
</TableBody>
</Table>
);
}