41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { checkUpdates } from '../api/system';
|
|
import { ExternalLink, CheckCircle, AlertCircle } from 'lucide-react';
|
|
|
|
const SystemStatus: React.FC = () => {
|
|
const { data: updateInfo, isLoading } = useQuery({
|
|
queryKey: ['system-updates'],
|
|
queryFn: checkUpdates,
|
|
staleTime: 1000 * 60 * 60, // 1 hour
|
|
});
|
|
|
|
if (isLoading) return null;
|
|
|
|
if (!updateInfo?.available) {
|
|
return (
|
|
<div className="flex items-center text-sm text-green-500">
|
|
<CheckCircle className="w-4 h-4 mr-1" />
|
|
<span className="hidden sm:inline">Up to date</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center text-sm text-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-1 rounded-full">
|
|
<AlertCircle className="w-4 h-4 mr-2" />
|
|
<span className="mr-2 hidden sm:inline">Update available: {updateInfo.latest_version}</span>
|
|
<a
|
|
href={updateInfo.changelog_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center underline hover:text-yellow-600"
|
|
>
|
|
<span className="hidden sm:inline">Changelog</span> <ExternalLink className="w-3 h-3 ml-1" />
|
|
</a>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SystemStatus;
|