import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { useTranslate } from 'docs/src/modules/utils/i18n';

function layouts(t) {
  return [
    {
      title: t('dashboardTitle'),
      description: t('dashboardDescr'),
      src: '/static/images/templates/dashboard.png',
      href: '/getting-started/templates/dashboard/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/dashboard',
    },
    {
      title: t('signInTitle'),
      description: t('signInDescr'),
      src: '/static/images/templates/sign-in.png',
      href: '/getting-started/templates/sign-in/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/sign-in',
    },
    {
      title: t('signInSideTitle'),
      description: t('signInSideDescr'),
      src: '/static/images/templates/sign-in-side.png',
      href: '/getting-started/templates/sign-in-side/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/sign-in-side',
    },
    {
      title: t('signUpTitle'),
      description: t('signUpDescr'),
      src: '/static/images/templates/sign-up.png',
      href: '/getting-started/templates/sign-up/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/sign-up',
    },
    {
      title: t('blogTitle'),
      description: t('blogDescr'),
      src: '/static/images/templates/blog.png',
      href: '/getting-started/templates/blog/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/blog',
    },
    {
      title: t('checkoutTitle'),
      description: t('checkoutDescr'),
      src: '/static/images/templates/checkout.png',
      href: '/getting-started/templates/checkout/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/checkout',
    },
    {
      title: t('albumTitle'),
      description: t('albumDescr'),
      src: '/static/images/templates/album.png',
      href: '/getting-started/templates/album/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/album',
    },
    {
      title: t('pricingTitle'),
      description: t('pricingDescr'),
      src: '/static/images/templates/pricing.png',
      href: '/getting-started/templates/pricing/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/pricing',
    },
    {
      title: t('stickyFooterTitle'),
      description: t('stickyFooterDescr'),
      src: '/static/images/templates/sticky-footer.png',
      href: '/getting-started/templates/sticky-footer/',
      source:
        'https://github.com/mui-org/material-ui/tree/next/docs/src/pages/getting-started/templates/sticky-footer',
    },
  ];
}

function Templates() {
  const t = useTranslate();

  return (
    <Grid container spacing={2}>
      {layouts(t).map((layout) => (
        <Grid item sm={6} md={4} sx={{ flexGrow: 1 }} key={layout.title}>
          <Card
            sx={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              flexGrow: 1,
            }}
          >
            <CardMedia
              component="a"
              href={layout.href}
              sx={{ height: 0, pt: '65%' }}
              image={layout.src}
              title={layout.title}
              rel="nofollow"
              target="_blank"
            />
            <CardContent sx={{ flexGrow: 1 }}>
              <Typography gutterBottom variant="h5" align="left" component="h2">
                {layout.title}
              </Typography>
              <Typography component="p">{layout.description}</Typography>
            </CardContent>
            <CardActions>
              <Button component="a" href={layout.source} size="small">
                {t('sourceCode')}
              </Button>
            </CardActions>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
}

export default Templates;

@@ -638,32 +638,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -725,36 +725,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -982,32 +982,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -1069,36 +1069,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -1342,32 +1342,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -1429,36 +1429,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -1689,32 +1689,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -1776,36 +1776,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -2021,32 +2021,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -2108,36 +2108,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -2366,32 +2366,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -2453,36 +2453,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -2703,32 +2703,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -2790,36 +2790,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -3045,32 +3045,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -3132,36 +3132,38 @@
 aterial-ui/tree/
-next
+master
 /docs/src/pages/
@@ -3411,32 +3411,66 @@
 ,%0A      source:%0A
+        // #default-branch-switch%0A
         'https:/
@@ -3510,12 +3510,14 @@
 ree/
-next
+master
 /doc

Update Getting Started Templates' Source URIs (#28929)