ui: fix update tab layout

This commit is contained in:
Sosokker 2024-11-21 11:55:11 +07:00
parent 2e4d8d441f
commit 91cd786eb6

View File

@ -40,32 +40,30 @@ export const UpdateTab = async ({ projectId }: { projectId: number }) => {
} }
return ( return (
<div className="w-full"> <div className="grid grid-cols-3 gap-4 w-full">
{parsedLogs.map((log, index) => ( {parsedLogs.map((log, index) => (
<div key={index} className="grid grid-cols-3 gap-4 overflow-y-auto"> <Card key={index} className="overflow-hidden">
<Card> <CardHeader>
<CardHeader> <CardTitle>{log.table}</CardTitle>
<CardTitle>{log.table}</CardTitle> <CardDescription>{log.changes.length} Changes</CardDescription>
<CardDescription>{log.changes.length} Changes</CardDescription> </CardHeader>
</CardHeader> <CardContent className="overflow-y-auto h-60 px-4">
<CardContent className="grid grid-cols-2 overflow-y-auto h-1/2 mx-4"> {log.changes.map((change, changeIndex) => (
{log.changes.map((change, changeIndex) => ( <div key={changeIndex} className="mb-4">
<div key={changeIndex} className="mb-3"> <div className="text-sm font-semibold">{change.field}</div>
<div className="text-sm font-semibold">{change.field}</div> <div className="text-gray-500">
<div className="text-gray-500"> <span className="text-red-500">From:</span> {JSON.stringify(change.from)}
<span className="text-red-500">From:</span> {JSON.stringify(change.from)}
</div>
<div className="text-gray-500">
<span className="text-green-500">To:</span> {JSON.stringify(change.to)}
</div>
</div> </div>
))} <div className="text-gray-500">
</CardContent> <span className="text-green-500">To:</span> {JSON.stringify(change.to)}
<CardFooter> </div>
<div className="text-xs text-gray-500">Updated at: {new Date(log.changed_at).toLocaleString()}</div> </div>
</CardFooter> ))}
</Card> </CardContent>
</div> <CardFooter>
<div className="text-xs text-gray-500">Updated at: {new Date(log.changed_at).toLocaleString()}</div>
</CardFooter>
</Card>
))} ))}
</div> </div>
); );