import {useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Info} from 'lucide-react';
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {commitUrl, fetchVersion, formatBuildTime, FRONTEND_VERSION, VERSION_SOURCES} from '../utils/version.js';
const SHORT_HASH = 7;
function VersionValue({repo, version}) {
const {t, i18n} = useTranslation();
if (version === undefined) return …;
if (version === null) return {t('SETTINGS.VERSION_UNKNOWN')};
const url = commitUrl(repo, version.commit);
const builtAt = formatBuildTime(version.builtAt, i18n.language);
return (
{url
? {version.commit.slice(0, SHORT_HASH)}
: {version.commit}}
{builtAt && · {builtAt}}
);
}
/**
* A backend version is undefined while loading and null when it is unknown.
*/
export default function BuildVersionCard() {
const {t} = useTranslation();
const [versions, setVersions] = useState({Frontend: FRONTEND_VERSION});
useEffect(() => {
let cancelled = false;
VERSION_SOURCES.filter((source) => source.url).forEach(async (source) => {
const version = await fetchVersion(source.url());
if (!cancelled) setVersions((current) => ({...current, [source.name]: version}));
});
return () => {
cancelled = true;
};
}, []);
return (
{t('SETTINGS.VERSION')}
{VERSION_SOURCES.map(({name, repo}) => (
-
{name}
))}
);
}