import type { ReactNode } from "react";
/** The app's icon, else its initial on a tile. */
export function AppIcon({
src,
name,
size = 22,
}: {
src?: string | null;
name: string;
size?: number;
}) {
return src ? (
) : (
{name.trim().charAt(0).toUpperCase()}
);
}
/**
* A computer with the agent at work on it: a window, a pointer moving to a
* button, and the agent's mark in the corner. Shown before setting up.
*/
export function ComputerIllustration({ mark }: { mark?: ReactNode }) {
return (
);
}
/**
* The row the person will find in System Settings: the app's icon and name,
* and its switch, turning on. Once allowed, the switch stays on.
*/
export function SettingsRowIllustration({
listName,
appName,
appIcon,
allowed,
}: {
listName: string;
appName: string;
appIcon?: string | null;
allowed: boolean;
}) {
return (
);
}
/**
* The question macOS asks the first time an app opens a guarded folder,
* with the button to choose highlighted. Once allowed, it shows a check.
*/
export function FolderPromptIllustration({
message,
allow,
dontAllow,
appIcon,
appName,
allowed,
}: {
message: string;
allow: string;
dontAllow: string;
appIcon?: string | null;
appName: string;
allowed: boolean;
}) {
return (
);
}
/** A check that draws itself, for "allowed" and "all set". */
export function DoneIllustration() {
return (
);
}