added content swap to playground page

cloudscape-design · Sep 10, 2024 · 51884bd · 51884bd
1 parent 058d456
commit 51884bd
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/pages/alert/runtime-content.page.tsx b/pages/alert/runtime-content.page.tsx
@@ -70,6 +70,10 @@ export default function () {
     setUrlParams,
   } = useContext(AppContext as PageContext);
   const [unrelatedState, setUnrelatedState] = useState(false);
+  const [contentSwapped, setContentSwapped] = useState(false);
+
+  const content1 = loading ? 'Loading...' : 'Content';
+  const content2 = loading ? 'Loading...' : 'There was an error: Access denied because of XYZ';
 
   return (
     <Box margin="m">
@@ -85,6 +89,9 @@ export default function () {
           <Checkbox onChange={e => setUnrelatedState(e.detail.checked)} checked={unrelatedState}>
             Unrelated state
           </Checkbox>
+          <Checkbox onChange={e => setContentSwapped(e.detail.checked)} checked={contentSwapped}>
+            Swap content
+          </Checkbox>
           <FormField label="Alert type">
             <Select
               options={alertTypeOptions}
@@ -106,7 +113,7 @@ export default function () {
                 header="Header"
                 action={<Button>Action</Button>}
               >
-                {loading ? 'Loading...' : 'Content'}
+                {!contentSwapped ? content1 : content2}
               </Alert>
 
               <Alert
@@ -116,7 +123,7 @@ export default function () {
                 header="Header"
                 action={<Button>Action</Button>}
               >
-                {loading ? 'Loading...' : 'There was an error: Access denied because of XYZ'}
+                {!contentSwapped ? content2 : content1}
               </Alert>
             </SpaceBetween>
           )}