add an alert callout for the demos

danilo-leal · Oct 31, 2023 · 93d9bbe · 93d9bbe
1 parent b0280be
commit 93d9bbe
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -9,6 +9,7 @@ import Divider from '@mui/material/Divider';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import ReviewsRoundedIcon from '@mui/icons-material/ReviewsRounded';
+import VerifiedRoundedIcon from '@mui/icons-material/VerifiedRounded';
 import { alpha } from '@mui/material/styles';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
@@ -230,12 +231,45 @@ export default function ApiPage(props) {
           {disableAd ? null : <Ad />}
         </Typography>
         <Heading hash="demos" />
-        <div
-          dangerouslySetInnerHTML={{
-            __html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
+        <Alert
+          severity="success"
+          variant="outlined"
+          icon={<VerifiedRoundedIcon sx={{ fontSize: 20 }} />}
+          sx={[
+            (theme) => ({
+              mt: 1.5,
+              pt: 1,
+              px: 2,
+              pb: 0,
+              fontSize: theme.typography.pxToRem(16),
+              backgroundColor: (theme.vars || theme).palette.success[50],
+              borderColor: (theme.vars || theme).palette.success[100],
+              '& * p': {
+                mb: 1,
+              },
+              '& * a': {
+                fontWeight: theme.typography.fontWeightMedium,
+                color: (theme.vars || theme).palette.success[900],
+                textDecorationColor: alpha(theme.palette.success[600], 0.3),
+              },
+              ...theme.applyDarkStyles({
+                '& * a': {
+                  color: (theme.vars || theme).palette.success[100],
+                  textDecorationColor: alpha(theme.palette.success[100], 0.3),
+                },
+                backgroundColor: alpha(theme.palette.success[700], 0.15),
+                borderColor: alpha(theme.palette.success[600], 0.3),
+              }),
+            }),
+          ]}
+        >
+          <span
+            dangerouslySetInnerHTML={{
+              __html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
               ${demos}`,
-          }}
-        />
+            }}
+          />
+        </Alert>
         <Heading hash="import" />
         <HighlightedCode
           code={pageContent.imports.join(`

diff --git a/docs/translations/translations.json b/docs/translations/translations.json
@@ -13,7 +13,7 @@
     "default": "Default",
     "defaultValue": "Default value",
     "defaultHTMLTag": "Default HTML tag",
-    "demos": "Demos",
+    "demos": "Component demos",
     "deprecated": "Deprecated",
     "description": "Description",
     "globalClass": "Global class",