Update modal demo

GoogleChromeLabs · Jul 1, 2023 · 01c7859 · 01c7859
1 parent f001dac
commit 01c7859
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/src/features/encoders/mozJPEG/client/index.tsx b/src/features/encoders/mozJPEG/client/index.tsx
@@ -1,6 +1,6 @@
 import { EncodeOptions, MozJpegColorSpace } from '../shared/meta';
 import type WorkerBridge from 'client/lazy-app/worker-bridge';
-import { h, Component, Fragment } from 'preact';
+import { h, Component, Fragment, VNode } from 'preact';
 import {
   inputFieldChecked,
   inputFieldValueAsNumber,
@@ -15,8 +15,12 @@ import Select from 'client/lazy-app/Compress/Options/Select';
 import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 import { ModalMessage } from 'client/lazy-app/Modal';
 import ModalContext from 'client/lazy-app/Modal/modal-context';
-import { shallowRender as renderToString } from 'preact-render-to-string';
 import * as SampleImage from 'img-url:static-build/assets/link.jpg';
+import {
+  DiamondStarIcon,
+  InfoIcon,
+  ModalErrorIcon,
+} from 'client/lazy-app/icons';
 
 export function encode(
   signal: AbortSignal,
@@ -36,8 +40,8 @@ interface State {
   showAdvanced: boolean;
 }
 
-function sampleDescription(): string {
-  return renderToString(
+function sampleDescription(): VNode {
+  return (
     <Fragment>
       <h1>Test Suite (h1)</h1>
       <p>This is a paragraph.</p>
@@ -72,7 +76,7 @@ function sampleDescription(): string {
         </a>
         .
       </p>
-    </Fragment>,
+    </Fragment>
   );
 }
 
@@ -173,7 +177,7 @@ export class Options extends Component<Props, State> {
             name="NULL"
             onClick={() =>
               this._showModal({
-                type: 'info',
+                icon: <InfoIcon />,
                 title: 'Informative Title',
                 content: sampleDescription(),
               })
@@ -186,7 +190,7 @@ export class Options extends Component<Props, State> {
             name="NULL"
             onClick={() =>
               this._showModal({
-                type: 'error',
+                icon: <ModalErrorIcon />,
                 title: 'Error Title',
                 content: sampleDescription(),
               })
@@ -199,7 +203,7 @@ export class Options extends Component<Props, State> {
             name="NULL"
             onClick={() =>
               this._showModal({
-                type: 'update',
+                icon: <DiamondStarIcon />,
                 title: 'Feature Title',
                 content: sampleDescription(),
               })