perfect-postcode/frontend/src/components/ui/FeatureInfoPopup.tsx

42 lines
1.2 KiB
TypeScript

import { useTranslation } from 'react-i18next';
import type { FeatureMeta } from '../../types';
import { ts, tsDesc } from '../../i18n/server';
import InfoPopup from './InfoPopup';
interface FeatureInfoPopupProps {
feature: FeatureMeta;
onClose: () => void;
onNavigateToSource?: (slug: string, featureName: string) => void;
}
export function FeatureInfoPopup({ feature, onClose, onNavigateToSource }: FeatureInfoPopupProps) {
const { t } = useTranslation();
return (
<InfoPopup
title={ts(feature.name)}
onClose={onClose}
sourceLink={
feature.source && onNavigateToSource
? {
label: t('common.viewDataSource'),
onClick: () => {
onNavigateToSource(feature.source!, feature.name);
onClose();
},
}
: undefined
}
>
{feature.description && (
<p className="text-xs text-warm-500 dark:text-warm-400 mb-2">
{tsDesc(feature.name, feature.description)}
</p>
)}
{feature.detail && (
<p className="text-sm text-warm-700 dark:text-warm-300 mb-4 leading-relaxed">
{feature.detail}
</p>
)}
</InfoPopup>
);
}