Carlos Florêncio
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@kandev/ui/card";
|
|
import { Badge } from "@kandev/ui/badge";
|
|
import { Button } from "@kandev/ui/button";
|
|
import { IconRefresh, IconArrowRight } from "@tabler/icons-react";
|
|
import { useUpdates } from "@/hooks/domains/system/use-updates";
|
|
|
|
export function VersionSummaryCard() {
|
|
const { updates } = useUpdates();
|
|
const current = updates?.current ?? "-";
|
|
const latest = updates?.latest ?? "-";
|
|
const updateAvailable = updates?.update_available ?? false;
|
|
|
|
return (
|
|
<Card data-testid="system-version-summary-card">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<IconRefresh className="h-4 w-4" />
|
|
Version
|
|
{updateAvailable && (
|
|
<Badge variant="default" className="text-[10px]">
|
|
Update available
|
|
</Badge>
|
|
)}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">Current</div>
|
|
<div className="font-mono text-sm" data-testid="system-version-current">
|
|
{current}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">Latest</div>
|
|
<div className="font-mono text-sm" data-testid="system-version-latest">
|
|
{latest}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button asChild variant="outline" size="sm" className="cursor-pointer">
|
|
<Link href="/settings/system/updates" data-testid="system-version-updates-link">
|
|
View updates
|
|
<IconArrowRight className="h-3.5 w-3.5 ml-1" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|