diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index b946904a8a714c8878d6863c4c88b295b0c71b3a..e7191f855a83d2c72088beb7bb40f00cfd0f510c 100644 --- a/examples/web/react/app.tsx +++ b/examples/web/react/app.tsx @@ -85,7 +85,7 @@ export interface Emulator extends ObservableI { */ getDevice(): string; - getDeviceUrl(): string; + getDeviceUrl?(): string; /** * Obtains a semantic version string for the current @@ -103,7 +103,7 @@ export interface Emulator extends ObservableI { * @returns A URL to the page describing the current version * of the emulator. */ - getVersionUrl(): string; + getVersionUrl?(): string; /** * Obtains the pixel format of the emulator's display @@ -398,15 +398,26 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { <Title text={emulator.getName()} version={emulator.getVersion()} - versionUrl={emulator.getVersionUrl()} + versionUrl={ + emulator.getVersionUrl + ? emulator.getVersionUrl() + : undefined + } iconSrc={require("../res/thunder.png")} ></Title> <Section> <Paragraph> This is a{" "} - <Link href={emulator.getDeviceUrl()} target="_blank"> - {emulator.getDevice()} - </Link>{" "} + {emulator.getDeviceUrl ? ( + <Link + href={emulator.getDeviceUrl()} + target="_blank" + > + {emulator.getDevice()} + </Link> + ) : ( + emulator.getDevice() + )}{" "} emulator built using the{" "} <Link href="https://www.rust-lang.org" target="_blank"> Rust Programming Language diff --git a/examples/web/react/components/title/title.css b/examples/web/react/components/title/title.css index b10f9b68cd6195975c92f801645d7c0e937e8448..7989a40d87bde43cd73a7ae846e67e6a2743d4f6 100644 --- a/examples/web/react/components/title/title.css +++ b/examples/web/react/components/title/title.css @@ -1,4 +1,5 @@ -.title > .link { +.title > .link, +.title > .label { margin-left: 14px; } diff --git a/examples/web/react/components/title/title.tsx b/examples/web/react/components/title/title.tsx index c390617521d3a422055466254620d13ef61373bd..ac312ce77c2e03291d7602046d4b858d76d3067d 100644 --- a/examples/web/react/components/title/title.tsx +++ b/examples/web/react/components/title/title.tsx @@ -22,11 +22,14 @@ export const Title: FC<TitleProps> = ({ return ( <h1 className={classes()}> {text} - {version && ( - <Link href={versionUrl} target="_blank"> - {version} - </Link> - )} + {version && + (versionUrl ? ( + <Link href={versionUrl} target="_blank"> + {version} + </Link> + ) : ( + <span className="label">{version}</span> + ))} {iconSrc && <img className="icon" src={iconSrc} alt="icon" />} </h1> );