[docs][material-ui] Add StackBlitz/CodeSandbox buttons to template cards

docs/pages/material-ui/getting-started/templates.js

@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/material/getting-started/templates/templates.md?muiMarkdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} disableToc disableAd />;
+  return <MarkdownDocs {...pageProps} disableAd />;
 }

docs/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -4,9 +4,12 @@ import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
 import Grid from '@mui/material/Grid2';
 import Link from '@mui/material/Link';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
+import SvgIcon from '@mui/material/SvgIcon';
 import Visibility from '@mui/icons-material/Visibility';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
@@ -72,9 +75,15 @@ export default function Templates() {
   const translatation = useTranslate();
 
   return (
-    <Grid container spacing={2} sx={{ py: 2 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, mb: 4 }}>
       {layouts(translatation).map((layout) => (
-        <Grid size={{ xs: 12, sm: 6 }} key={layout.title}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} key={layout.title}>
+          <Typography component="h3" variant="h6" sx={{ fontWeight: 'semiBold' }}>
+            {layout.title}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
+            {layout.description}
+          </Typography>
           <Card
             variant="outlined"
             sx={{
@@ -138,56 +147,60 @@ export default function Templates() {
                 See live preview
               </Button>
             </Box>
-            <Box sx={{ p: 2, pt: 1.5, borderTop: '1px solid', borderColor: 'divider' }}>
-              <Typography
-                component="h3"
-                variant="body1"
-                gutterBottom
-                sx={{ fontWeight: 'semiBold' }}
-              >
-                {layout.title}
-              </Typography>
-              <Typography variant="body2" gutterBottom sx={{ color: 'text.secondary', mb: 2 }}>
-                {layout.description}
-              </Typography>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                p: 2,
+                borderTop: '1px solid',
+                borderColor: 'divider',
+              }}
+            >
               <Box
                 sx={{
                   display: 'flex',
-                  flexDirection: { xs: 'column', sm: 'row' },
+                  alignItems: 'center',
                   gap: 1,
-                  mt: 'auto',
                 }}
               >
-                <Button
-                  component="a"
-                  href={layout.href}
-                  size="small"
-                  fullWidth
-                  variant="outlined"
-                  color="secondary"
-                  startIcon={<Visibility sx={{ mr: 0.5 }} />}
-                  data-ga-event-category="material-ui-template"
-                  data-ga-event-label={layout.title}
-                  data-ga-event-action="preview-img"
-                >
-                  Live preview
-                </Button>
-                <Button
-                  component="a"
-                  href={layout.source}
-                  size="small"
-                  fullWidth
-                  variant="outlined"
-                  color="secondary"
-                  startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
-                >
-                  Source code
-                </Button>
+                <Tooltip title="Edit in StackBlitz">
+                  <IconButton color="primary" size="small">
+                    <SvgIcon viewBox="0 0 19 28">
+                      <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
+                    </SvgIcon>
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Edit in CodeSandbox">
+                  <IconButton color="primary" size="small">
+                    <SvgIcon viewBox="0 0 1080 1080">
+                      <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
+                    </SvgIcon>
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="See source code">
+                  <IconButton component="a" href={layout.source} color="primary" size="small">
+                    <CodeRoundedIcon />
+                  </IconButton>
+                </Tooltip>
               </Box>
+              <Button
+                component="a"
+                href={layout.href}
+                size="small"
+                variant="outlined"
+                color="primary"
+                startIcon={<Visibility sx={{ mr: 0.5 }} />}
+                data-ga-event-category="material-ui-template"
+                data-ga-event-label={layout.title}
+                data-ga-event-action="preview-img"
+                sx={{ alignSelf: 'self-start' }}
+              >
+                Live preview
+              </Button>
             </Box>
           </Card>
-        </Grid>
+        </Box>
       ))}
-    </Grid>
+    </Box>
   );
 }