anthonyandClaude Sonnet 5
987af80286
Rebuild the visual identity from the actual Ombrora mark (violet/cyan aurora blobs) instead of the generic blue/amber scheme, add Bricolage Grotesque and IBM Plex Mono for display and code-like text, and give the hero an animated aurora backdrop, gradient headline, and a format-pair marquee driven by the real registered converters. Rework the file config form: target format and icon size are both chip groups now instead of a native select, and quality/compression sliders get a gradient-filled track, custom thumb, and a mono value pill to match. File type icons are color-coded by family (images/documents/fonts/ebooks) and reused across FileConfigCard, FileCard, and FormatsGrid. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
44 lines
1.1 KiB
React
44 lines
1.1 KiB
React
import { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Clock, LockKey, CloudArrowUp, HardDrives } from '@phosphor-icons/react';
|
|
import { fetchConfig } from '../api.js';
|
|
|
|
const ITEMS = [
|
|
{ key: 'autoDelete', Icon: Clock },
|
|
{ key: 'noAccount', Icon: LockKey },
|
|
{ key: 'online', Icon: CloudArrowUp },
|
|
{ key: 'maxSize', Icon: HardDrives },
|
|
];
|
|
|
|
export function ReassuranceStrip() {
|
|
const { t } = useTranslation();
|
|
const [config, setConfig] = useState(null);
|
|
|
|
useEffect(() => {
|
|
fetchConfig().then(setConfig).catch(() => {});
|
|
}, []);
|
|
|
|
if (!config) return null;
|
|
|
|
const values = {
|
|
autoDelete: config.retentionHours,
|
|
maxSize: config.maxFileSizeMb,
|
|
};
|
|
|
|
return (
|
|
<section className="reassurance">
|
|
<h2>{t('reassurance.title')}</h2>
|
|
<ul className="reassurance-list">
|
|
{ITEMS.map(({ key, Icon }) => (
|
|
<li key={key}>
|
|
<span className="reassurance-icon">
|
|
<Icon size={22} weight="regular" />
|
|
</span>
|
|
<span>{t(`reassurance.${key}`, { value: values[key] })}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|