update link and usage demo

siriwatknp · Sep 15, 2023 · dbb09be · dbb09be
1 parent 6251f1d
commit dbb09be
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/docs/src/components/productJoyUI/ThemableTemplate.tsx b/docs/src/components/productJoyUI/ThemableTemplate.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import colors from '@mui/joy/colors';
 import { extendTheme, THEME_ID } from '@mui/joy/styles';
+import Link from 'docs/src/modules/components/Link';
 import Box from '@mui/joy/Box';
 import ToggleButtonGroup, { ToggleButtonGroupStaticProps } from '@mui/joy/ToggleButtonGroup';
 import Button from '@mui/joy/Button';
@@ -24,6 +25,7 @@ import ProfileDashboardApp from 'docs/data/joy/getting-started/templates/profile
 import MessagesApp from 'docs/data/joy/getting-started/templates/messages/App';
 import SignInApp from 'docs/data/joy/getting-started/templates/sign-in-side/App';
 import RentalDashboardApp from 'docs/data/joy/getting-started/templates/rental-dashboard/App';
+import ROUTES from 'docs/src/route';
 
 const joyColors = {
   blue: {
@@ -534,10 +536,10 @@ export default function ThemableTemplate() {
           </TabList>
           <ListDivider sx={{ mx: 0 }} />
           <ListItem sx={{ px: 0.5 }}>
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <Button
-              component="a"
-              href="#"
+              component={Link}
+              href={ROUTES.joyTemplates}
+              noLinkStyle
               size="sm"
               variant="plain"
               endDecorator={<ArrowForwardIcon />}

diff --git a/docs/src/modules/components/JoyUsageDemo.tsx b/docs/src/modules/components/JoyUsageDemo.tsx
@@ -248,7 +248,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
           borderColor: `rgba(${theme.vars.palette.neutral.mainChannel} / 0.1)`,
           background: `rgba(${theme.vars.palette.primary.mainChannel} / 0.02)`,
           backdropFilter: 'blur(8px)',
-          minWidth: 'max(280px, 36%)',
+          minWidth: 'max(240px, 36%)',
         })}
       >
         <Box
@@ -388,6 +388,7 @@ export default function JoyUsageDemo<T extends { [k: string]: any } = {}>({
                               value={value}
                               disableIcon
                               overlay
+                              sx={{ fontSize: 'xs' }}
                             />
                           </Chip>
                         );

diff --git a/docs/src/route.ts b/docs/src/route.ts
@@ -17,6 +17,7 @@ const ROUTES = {
   baseQuickstart: '/base-ui/getting-started/quickstart/',
   materialDocs: '/material-ui/getting-started/',
   joyDocs: '/joy-ui/getting-started/',
+  joyTemplates: '/joy-ui/getting-started/templates/',
   joyTutorial: '/joy-ui/getting-started/tutorial/',
   systemDocs: '/system/getting-started/',
   materialIcons: '/material-ui/material-icons/',