Dashboard code style improvements #191
Description
Style improvements suggestions
First of all, great work and initiative in bringing this Dashboard to life @woodward54 and @jamescmartinez .
This is a very small issue. Hope I don't seem a bit maniac with code style standard.
I propose improving the following code, so we have better logic (no ternary nesting) and using semantic colors instead of tailwind native colors :
<Badge
variant="outline"
className={`border-border text-xs capitalize ${
run.status === "completed" ||
run.status === "succeeded"
? "border-green-500/20 bg-green-500/10 text-green-500"
: run.status === "running"
? "border-blue-500/20 bg-blue-500/10 text-blue-500"
: run.status === "failed"
? "border-red-500/20 bg-red-500/10 text-red-500"
: run.status === "sleeping"
? "border-purple-500/20 bg-purple-500/10 text-purple-500"
: run.status === "canceled"
? "border-gray-500/20 bg-gray-500/10 text-gray-500"
: "border-yellow-500/20 bg-yellow-500/10 text-yellow-500"
}`}
>
{config.label}
</Badge>A better approach would be
const STATUS_STYLE: Record<string, string> = {
completed: "border-success-500/20 bg-success-500/10 text-success-500",
failed: "border-destructive-500/20 bg-destructive-500/10 text-destructive-500",
// ... etc
// fallback/default
default: "border-warning-500/20 bg-warning-500/10 text-watning-500",
};
<Badge
variant="outline"
className={`border-border text-xs capitalize ${
STATUS_STYLE[run.status] ?? STATUS_STYLE.default
}`}
>
{config.label}
</Badge>There are some other instances of the app using tailwind native colors. Again, nothing major, but this will help on future UI improvements / possible changes.