diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md index aa6aca6d5bce2f..434429c91882d8 100644 --- a/docs/data/material/getting-started/templates/templates.md +++ b/docs/data/material/getting-started/templates/templates.md @@ -20,6 +20,10 @@ You can toggle through each of these style options in the top right corner of th Sections of each layout are defined either by comments or use of separate files, so you can extract parts of a page (such as a hero unit or a footer) for reuse in other pages. These templates can be combined with one of the [example projects](/material-ui/getting-started/example-projects/) to form a complete starter app. +:::info +If you're looking to build internal tools and dashboards quickly, head to [Toolpad Core examples](http://mui.com/toolpad/core/introduction/examples/#featured-examples) for functional apps with authentication, routing and theming already integrated. +::: + If you see any room for improvement, please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or a [pull request](https://github.com/mui/material-ui/pulls) on GitHub. {{"component": "modules/components/MaterialFreeTemplatesCollection.js"}} @@ -40,9 +44,13 @@ You can find complete templates and themes like those shown below in the + +The Toolpad Core template comes with authentication, navigation and theming integrated + + +The Toolpad Core template comes with authentication, navigation and theming integrated + + diff --git a/docs/public/_redirects b/docs/public/_redirects index f59df6cfea1099..d0192f8d819a74 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -530,6 +530,8 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /:lang/x/* https://material-ui-x.netlify.app/:lang/x/:splat 200 ## Toolpad +/toolpad/core/templates/nextjs-dashboard/_next/* https://toolpad-core-nextjs-themed.vercel.app/_next/:splat 200 +/toolpad/core/templates/nextjs-dashboard/* https://toolpad-core-nextjs-themed.vercel.app/:splat 200 /static/toolpad/* https://mui-toolpad-docs.netlify.app/static/toolpad/:splat 200 /toolpad/_next/* https://mui-toolpad-docs.netlify.app/_next/:splat 200 /toolpad/* https://mui-toolpad-docs.netlify.app/toolpad/:splat 200 diff --git a/docs/public/static/images/toolpad-core-template-dark.png b/docs/public/static/images/toolpad-core-template-dark.png new file mode 100644 index 00000000000000..31a7292e8e7b0b Binary files /dev/null and b/docs/public/static/images/toolpad-core-template-dark.png differ diff --git a/docs/public/static/images/toolpad-core-template-light.png b/docs/public/static/images/toolpad-core-template-light.png new file mode 100644 index 00000000000000..1e00caac2ee241 Binary files /dev/null and b/docs/public/static/images/toolpad-core-template-light.png differ diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js index 8cf569bf2a9eb3..52d29d0134c457 100644 --- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js +++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js @@ -20,53 +20,53 @@ import stackBlitz from 'docs/src/modules/sandbox/StackBlitz'; const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`; -function layouts(translatation) { +function layouts(translation) { return [ { - title: translatation('dashboardTitle'), - description: translatation('dashboardDescr'), + title: translation('dashboardTitle'), + description: translation('dashboardDescr'), href: '/material-ui/getting-started/templates/dashboard/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/dashboard`, hasDarkMode: true, }, { - title: translatation('marketingPageTitle'), - description: translatation('marketingPageDescr'), + title: translation('marketingPageTitle'), + description: translation('marketingPageDescr'), href: '/material-ui/getting-started/templates/marketing-page/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/marketing-page`, hasDarkMode: true, }, { - title: translatation('checkoutTitle'), - description: translatation('checkoutDescr'), + title: translation('checkoutTitle'), + description: translation('checkoutDescr'), href: '/material-ui/getting-started/templates/checkout/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/checkout`, hasDarkMode: true, }, { - title: translatation('signInTitle'), - description: translatation('signInDescr'), + title: translation('signInTitle'), + description: translation('signInDescr'), href: '/material-ui/getting-started/templates/sign-in/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in`, hasDarkMode: true, }, { - title: translatation('signInSideTitle'), - description: translatation('signInSideDescr'), + title: translation('signInSideTitle'), + description: translation('signInSideDescr'), href: '/material-ui/getting-started/templates/sign-in-side/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in-side`, hasDarkMode: true, }, { - title: translatation('signUpTitle'), - description: translatation('signUpDescr'), + title: translation('signUpTitle'), + description: translation('signUpDescr'), href: '/material-ui/getting-started/templates/sign-up/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-up`, hasDarkMode: true, }, { - title: translatation('blogTitle'), - description: translatation('blogDescr'), + title: translation('blogTitle'), + description: translation('blogDescr'), href: '/material-ui/getting-started/templates/blog/', source: `${sourcePrefix}/docs/data/material/getting-started/templates/blog`, hasDarkMode: true, @@ -75,11 +75,11 @@ function layouts(translatation) { } export default function MaterialFreeTemplatesCollection() { - const translatation = useTranslate(); + const translation = useTranslate(); const materialTemplates = sourceMaterialTemplates(); return ( - {layouts(translatation).map((layout, index) => { + {layouts(translation).map((layout, index) => { const templateId = layout.source.split('/').pop(); const templateName = pascalCase(templateId); const item = materialTemplates.map.get(templateId);