anthonyandClaude Sonnet 5
74db0ecfcc
Every other family (images, documents, fonts, ebooks) had a showcase pair in the marquee; archives was missing one after the archive conversion feature landed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
33 lines
724 B
React
33 lines
724 B
React
import { ArrowRight } from '@phosphor-icons/react';
|
|
|
|
const PAIRS = [
|
|
['heic', 'jpg'],
|
|
['png', 'webp'],
|
|
['docx', 'pdf'],
|
|
['ttf', 'woff'],
|
|
['epub', 'mobi'],
|
|
['rar', 'zip'],
|
|
];
|
|
|
|
function Pill({ from, to }) {
|
|
return (
|
|
<span className="format-pill">
|
|
<span>{from.toUpperCase()}</span>
|
|
<ArrowRight size={12} weight="bold" />
|
|
<span>{to.toUpperCase()}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function FormatMarquee() {
|
|
return (
|
|
<div className="format-marquee" aria-hidden="true">
|
|
<div className="format-marquee-track">
|
|
{[...PAIRS, ...PAIRS].map(([from, to], index) => (
|
|
<Pill key={`${from}-${to}-${index}`} from={from} to={to} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|