CRT
ae2ffd8dbf
Desktop icons move from lucide to Phosphor (@phosphor-icons/react, per-icon imports, regular weight; fill for the active nav item, notices and rating stars). The site's icons and the fixture art use Phosphor's own files from @phosphor-icons/core. App Store and Google Play are shown with their marks from simple-icons (CC0 data), vendored unchanged by tools/site-icons.ts and rendered as a mask in the neutral text colour next to the store's name; the trademark note is in docs/desktop.md and the site footer. lucide-react and lucide-static removed. The no-hand-written-SVG guard allows only the vendored files (byte-equal to their packages) and per-icon Phosphor imports. Site stylesheet ?v= bumped.
46 lines
2.2 KiB
TypeScript
46 lines
2.2 KiB
TypeScript
// Empty state art: a Phosphor icon (@phosphor-icons/react, MIT) on a soft tile with an optional small badge icon, in
|
|
// the theme's tokens (styles.css .illo), the empty-state style of Linear and Vercel. No drawn artwork. Decorative.
|
|
import { ChatTextIcon } from '@phosphor-icons/react/dist/csr/ChatText';
|
|
import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
|
|
import { CloudArrowDownIcon } from '@phosphor-icons/react/dist/csr/CloudArrowDown';
|
|
import { CubeIcon } from '@phosphor-icons/react/dist/csr/Cube';
|
|
import { DeviceMobileIcon } from '@phosphor-icons/react/dist/csr/DeviceMobile';
|
|
import { FileTextIcon } from '@phosphor-icons/react/dist/csr/FileText';
|
|
import { KeyIcon } from '@phosphor-icons/react/dist/csr/Key';
|
|
import { PackageIcon } from '@phosphor-icons/react/dist/csr/Package';
|
|
import { PaperPlaneTiltIcon } from '@phosphor-icons/react/dist/csr/PaperPlaneTilt';
|
|
import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
|
|
import { PulseIcon } from '@phosphor-icons/react/dist/csr/Pulse';
|
|
import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
|
|
import { ShieldCheckIcon } from '@phosphor-icons/react/dist/csr/ShieldCheck';
|
|
import { StarIcon } from '@phosphor-icons/react/dist/csr/Star';
|
|
import { WrenchIcon } from '@phosphor-icons/react/dist/csr/Wrench';
|
|
import type { Icon as PhosphorIcon } from '@phosphor-icons/react/lib';
|
|
|
|
export type IlloName = 'apps' | 'cloud' | 'reviews' | 'shield' | 'key' | 'plane' | 'pulse' | 'catalog' | 'text' | 'tools' | 'unknown';
|
|
|
|
const ART: Record<IlloName, [PhosphorIcon, PhosphorIcon?]> = {
|
|
apps: [DeviceMobileIcon, PlusIcon],
|
|
cloud: [CloudArrowDownIcon],
|
|
reviews: [ChatTextIcon, StarIcon],
|
|
shield: [ShieldCheckIcon],
|
|
key: [KeyIcon],
|
|
plane: [PaperPlaneTiltIcon],
|
|
pulse: [PulseIcon],
|
|
catalog: [PackageIcon, CheckIcon],
|
|
text: [FileTextIcon, CheckIcon],
|
|
tools: [CubeIcon, WrenchIcon],
|
|
unknown: [QuestionIcon],
|
|
};
|
|
|
|
export function Illo({ name }: { name: IlloName }) {
|
|
const [Main, Badge] = ART[name] ?? ART.unknown;
|
|
return (
|
|
<div className="illo" aria-hidden="true" data-illo={name}>
|
|
<span className="illo-tile">
|
|
<Main weight="regular" />
|
|
{Badge && <span className="illo-badge"><Badge weight="bold" /></span>}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|