chick
a75badeb58
Render the Hub feature set in the existing Animal Island styling: fleet messages, notification centre, log centre, organisation panel, per-instance device module panels and the settings backup, connection and maintenance surfaces.
115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
import type { SVGProps } from 'react';
|
|
|
|
export type IconName =
|
|
| 'activity'
|
|
| 'alert'
|
|
| 'arrow-up-right'
|
|
| 'check'
|
|
| 'close'
|
|
| 'chevron-left'
|
|
| 'chevron-right'
|
|
| 'cpu'
|
|
| 'filter'
|
|
| 'edit'
|
|
| 'globe'
|
|
| 'grid'
|
|
| 'history'
|
|
| 'eye'
|
|
| 'eye-off'
|
|
| 'jobs'
|
|
| 'memory'
|
|
| 'message'
|
|
| 'more'
|
|
| 'phone'
|
|
| 'plus'
|
|
| 'power'
|
|
| 'restart'
|
|
| 'search'
|
|
| 'server'
|
|
| 'settings'
|
|
| 'tag'
|
|
| 'temperature'
|
|
| 'trash'
|
|
| 'version'
|
|
| 'wifi';
|
|
|
|
const paths: Readonly<Record<IconName, readonly string[]>> = {
|
|
activity: ['M3 12h4l2.5-7 5 14 2.5-7H21'],
|
|
alert: [
|
|
'M12 9v4',
|
|
'M12 17h.01',
|
|
'M10.3 3.7 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z',
|
|
],
|
|
'arrow-up-right': ['M7 17 17 7', 'M7 7h10v10'],
|
|
check: ['m5 12 4 4L19 6'],
|
|
close: ['M6 6l12 12M18 6 6 18'],
|
|
'chevron-left': ['m15 18-6-6 6-6'],
|
|
'chevron-right': ['m9 18 6-6-6-6'],
|
|
cpu: ['M9 9h6v6H9z', 'M4 9h2M4 15h2M18 9h2M18 15h2M9 4v2M15 4v2M9 18v2M15 18v2', 'M6 6h12v12H6z'],
|
|
filter: ['M4 5h16l-6 7v5l-4 2v-7Z'],
|
|
edit: ['M12 20h9', 'M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'],
|
|
eye: [
|
|
'M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6S2.5 12 2.5 12Z',
|
|
'M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z',
|
|
],
|
|
'eye-off': [
|
|
'M3 3l18 18',
|
|
'M10.6 6.2A10.7 10.7 0 0 1 12 6c6 0 9.5 6 9.5 6a15 15 0 0 1-2.1 2.8',
|
|
'M6.1 6.1C3.7 7.8 2.5 12 2.5 12s3.5 6 9.5 6a10.7 10.7 0 0 0 3-.4',
|
|
'M9.9 9.9a3 3 0 0 0 4.2 4.2',
|
|
],
|
|
globe: [
|
|
'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z',
|
|
'M3 12h18',
|
|
'M12 3c2.4 2.5 3.7 5.5 3.7 9S14.4 18.5 12 21c-2.4-2.5-3.7-5.5-3.7-9S9.6 5.5 12 3Z',
|
|
],
|
|
grid: ['M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'],
|
|
history: ['M3 12a9 9 0 1 0 3-6.7L3 8', 'M3 3v5h5', 'M12 7v5l3 2'],
|
|
jobs: ['M4 7h16v13H4z', 'M9 7V4h6v3', 'M4 12h16', 'M10 12v2h4v-2'],
|
|
memory: ['M5 7h14v10H5z', 'M8 10v4M12 10v4M16 10v4', 'M3 9h2M3 15h2M19 9h2M19 15h2'],
|
|
message: ['M4 5h16v11H8l-4 4Z', 'M8 9h8M8 12h5'],
|
|
more: ['M5 12h.01M12 12h.01M19 12h.01'],
|
|
phone: [
|
|
'M7 3h3l1.5 4-2 1.5a15 15 0 0 0 6 6L17 12.5l4 1.5v3c0 2.2-1.8 4-4 4A14 14 0 0 1 3 7c0-2.2 1.8-4 4-4Z',
|
|
],
|
|
plus: ['M12 5v14M5 12h14'],
|
|
power: ['M12 2v10', 'M18.4 6.6a9 9 0 1 1-12.8 0'],
|
|
restart: ['M20 11a8 8 0 1 0-2.3 5.7', 'M20 4v7h-7'],
|
|
search: ['M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM17 17l4 4'],
|
|
server: ['M4 4h16v6H4zM4 14h16v6H4z', 'M8 7h.01M8 17h.01'],
|
|
settings: [
|
|
'M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z',
|
|
'M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21h-4v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H3v-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6V3h4v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.1v4H21a1.7 1.7 0 0 0-1.6 1Z',
|
|
],
|
|
tag: ['M20 13 13 20l-9-9V4h7Z', 'M8.5 8.5h.01'],
|
|
temperature: ['M10 14.8V5a2 2 0 1 1 4 0v9.8a4 4 0 1 1-4 0Z', 'M12 17v-7'],
|
|
trash: ['M4 7h16', 'M10 11v6M14 11v6', 'M6 7l1 13h10l1-13', 'M9 7V4h6v3'],
|
|
version: ['M5 4h14v16H5z', 'M8 8h8M8 12h8M8 16h5'],
|
|
wifi: [
|
|
'M3 8.5a14 14 0 0 1 18 0',
|
|
'M6.5 12a9 9 0 0 1 11 0',
|
|
'M10 15.5a4 4 0 0 1 4 0',
|
|
'M12 19h.01',
|
|
],
|
|
};
|
|
|
|
export function Icon({ name, ...props }: { name: IconName } & SVGProps<SVGSVGElement>) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.8"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
{...props}
|
|
>
|
|
{paths[name].map((path, index) => (
|
|
<path d={path} key={`${name}-${index}`} />
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|