Files
family_wishlist/apps/frontend/src/components/Layout/Footer.tsx

35 lines
1.0 KiB
TypeScript

import { useQuery } from '@tanstack/react-query';
import { Gift } from 'lucide-react';
import { api } from '@/lib/api';
import { FRONTEND_VERSION } from '@/lib/version';
import { useI18n } from '@/i18n/i18n';
interface VersionInfo {
backend: string;
}
export function Footer() {
const { t } = useI18n();
const { data } = useQuery({
queryKey: ['version'],
queryFn: () => api.get<VersionInfo>('/api/version'),
staleTime: 10 * 60 * 1000,
});
return (
<footer className="app-footer">
<div className="app-footer__inner">
<div className="app-footer__brand">
<Gift className="h-4 w-4" aria-hidden />
<span className="app-footer__brand-name">{t('app.name')}</span>
</div>
<div className="app-footer__meta">
<span>{t('footer.frontend', { version: FRONTEND_VERSION })}</span>
<span className="app-footer__separator">·</span>
<span>{t('footer.backend', { version: data?.backend ?? '...' })}</span>
</div>
</div>
</footer>
);
}