Format NotificationModal.mdx

sumup-oss · Dec 17, 2024 · a082e91 · a082e91
1 parent 58f0bd2
commit a082e91
Showing 1 changed file with 43 additions and 36 deletions.
diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.mdx b/packages/circuit-ui/components/NotificationModal/NotificationModal.mdx
@@ -23,32 +23,39 @@ The notification modal component communicates critical information while blockin
 
 Place your NotificationModal directly in your JSX:
 
-```jsx
+```tsx
 import { NotificationModal, Button } from '@sumup-oss/circuit-ui';
-import {useState} from 'react';
+import { useState } from 'react';
 
-const [open, setOpen] = useState(false);
+function Component() {
+  const [open, setOpen] = useState(false);
 
-return (
+  return (
     <>
       <Button onClick={() => setOpen(true)}>Open dialog</Button>
-      <NotificationModal open={open} closeButtonLabel="Close" onClose={() => setOpen(false)} headline="It's time to update your browser" actions={{
-    primary: {
-      children: 'Update now',
-      onClick: update(),
-    },
-    secondary: {
-      children: 'Not now',
-      onClick: () => setOpen(false),
-    },
-  }}>
-
-      </NotificationModal>
+      <NotificationModal
+        open={open}
+        closeButtonLabel="Close"
+        onClose={() => setOpen(false)}
+        headline="It's time to update your browser"
+        actions={{
+          primary: {
+            children: 'Update now',
+            onClick: update(),
+          },
+          secondary: {
+            children: 'Not now',
+            onClick: () => setOpen(false),
+          },
+        }}
+      />
     </>
-);
+  );
+}
 ```
 
-### with the `useModal` hook
+### With the `useModal` hook
+
 First, wrap your application in the `ModalProvider`:
 
 ```tsx
@@ -69,24 +76,24 @@ export function SayHello({ name }) {
 
   const handleClick = () => {
     setModal({
-            image: {
-              src: '/images/illustration-update.svg',
-              alt: '',
-            },
-            headline: "It's time to update your browser",
-            body: "You'll soon need a more up-to-date browser to continue using SumUp.",
-            actions: {
-              primary: {
-                children: 'Update now',
-                onClick: update(),
-              },
-              secondary: {
-                children: 'Not now',
-                onClick: removeModal(),
-              },
-            },
-            closeButtonLabel: 'Close',
-          })
+      image: {
+        src: '/images/illustration-update.svg',
+        alt: '',
+      },
+      headline: "It's time to update your browser",
+      body: "You'll soon need a more up-to-date browser to continue using SumUp.",
+      actions: {
+        primary: {
+          children: 'Update now',
+          onClick: update(),
+        },
+        secondary: {
+          children: 'Not now',
+          onClick: removeModal(),
+        },
+      },
+      closeButtonLabel: 'Close',
+    });
   };
 
   return <Button onClick={handleClick}>Say hello</Button>;