anthonyandClaude Sonnet 5
48c70254c1
Also adds a --color-family-archives CSS variable (light + dark) that the plan didn't call out explicitly but is needed for the new family tile/icon to render with a color instead of falling back silently. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
35 lines
1.0 KiB
React
35 lines
1.0 KiB
React
import { useTranslation } from 'react-i18next';
|
|
import { Image, FileText, TextAa, BookOpen, Archive } from '@phosphor-icons/react';
|
|
import { FORMAT_FAMILIES } from '../data/formats.js';
|
|
|
|
const FAMILY_ICONS = {
|
|
images: Image,
|
|
documents: FileText,
|
|
fonts: TextAa,
|
|
ebooks: BookOpen,
|
|
archives: Archive,
|
|
};
|
|
|
|
export function FormatsGrid() {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<section className="formats-grid-section">
|
|
<h2>{t('formats.title')}</h2>
|
|
<div className="formats-grid">
|
|
{FORMAT_FAMILIES.map(({ key, formats }) => {
|
|
const Icon = FAMILY_ICONS[key];
|
|
return (
|
|
<div key={key} className="formats-family" style={{ '--tile-color': `var(--color-family-${key})` }}>
|
|
<span className="formats-family-icon">
|
|
<Icon size={22} weight="regular" />
|
|
</span>
|
|
<h3>{t(`formats.${key}`)}</h3>
|
|
<p>{formats.join(', ').toUpperCase()}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|