Fix component names

fix right side index

Author: forestream

apps/landing/src/app/(detail)/components/LeftMenu.tsx

@@ -9,16 +9,16 @@ export function LeftMenu() {
       <MenuItem
         subMenu={[
           { to: '/components/button', children: 'Button' },
-          { to: '/components/text-box', children: 'Text box' },
-          { to: '/components/text-area', children: 'Text area' },
+          { to: '/components/textbox', children: 'Textbox' },
+          { to: '/components/textarea', children: 'Textarea' },
           { to: '/components/dropdown', children: 'Dropdown' },
           { to: '/components/radio', children: 'Radio' },
           { to: '/components/checkbox', children: 'Checkbox' },
           { to: '/components/stepper', children: 'Stepper' },
           { to: '/components/toggle', children: 'Toggle' },
           { to: '/components/slider', children: 'Slider' },
-          { to: '/components/date-picker', children: 'Date picker' },
-          { to: '/components/color-picker', children: 'Color picker' },
+          { to: '/components/date-picker', children: 'Date Picker' },
+          { to: '/components/color-picker', children: 'Color Picker' },
           { to: '/components/uploader', children: 'Uploader' },
           { to: '/components/pagination', children: 'Pagination' },
           { to: '/components/progress-bar', children: 'Progress Bar' },
@@ -38,7 +38,7 @@ export function LeftMenu() {
           { to: '/components/header', children: 'Header' },
           { to: '/components/confirm', children: 'Confirm' },
           { to: '/components/snackbar', children: 'Snackbar' },
-          { to: '/components/bottom-sheet', children: 'Bottom sheet' },
+          { to: '/components/bottom-sheet', children: 'Bottom Sheet' },
         ]}
       >
         Layout

apps/landing/src/app/(detail)/components/[component]/page.tsx

@@ -16,15 +16,19 @@ export const generateMetadata = async ({
   params: Promise<{ component: string }>
 }) => {
   const { component } = await params
+  const pascalWithSpace = component
+    .split('-')
+    .map((item) => item.charAt(0).toUpperCase() + item.slice(1))
+    .join(' ')
   return {
-    title: `Devup UI - ${component}`,
-    description: `${component} component`,
+    title: `Devup UI - ${pascalWithSpace}`,
+    description: `${pascalWithSpace} component`,
     alternates: {
       canonical: `/components/${component}`,
     },
     openGraph: {
-      title: `Devup UI - ${component}`,
-      description: `${component} component`,
+      title: `Devup UI - ${pascalWithSpace}`,
+      description: `${pascalWithSpace} component`,
       url: `/components/${component}`,
       siteName: 'Devup UI',
       images: [`/components-og/${component}.webp`],
@@ -39,8 +43,8 @@ export const generateStaticParams = async () => {
     'uploader',
     'toggle',
     'tooltip',
-    'text-area',
-    'text-box',
+    'textarea',
+    'textbox',
     'theme-button',
     'snackbar',
     'stepper',
@@ -84,7 +88,7 @@ export default async function Page({
       <Text as="strong" color="$primary" m="0" typography="captionBold">
         {componentName}
       </Text>
-      <Text color="$title" typography="h4">
+      <Text as="h4" color="$title" m="0" typography="h4">
         {componentName}
       </Text>
       <Index
@@ -97,7 +101,7 @@ export default async function Page({
         }}
       />
       <VStack gap="16px" py="30px">
-        <Text color="$title" typography="h6">
+        <Text as="h6" color="$title" m="0" typography="h6">
           Examples
         </Text>
         <Flex flexWrap="wrap" gap="16px">

apps/landing/src/app/(detail)/components/[component]/text-area/index.mdx

@@ -0,0 +1 @@
+`Textarea` component is used for multi-line text input. 

apps/landing/src/app/(detail)/components/[component]/text-box/index.mdx

@@ -0,0 +1 @@
+`Textbox` component is used for single-line text input. 

…components/[component]/text-area/Api.mdx …/components/[component]/textarea/Api.mdxapps/landing/src/app/(detail)/components/[component]/text-area/Api.mdx renamed to apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx apps/landing/src/app/(detail)/components/[component]/text-area/Api.mdx renamed to apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx

@@ -40,7 +40,7 @@ function IndexMenu({
 
 export function RightIndex() {
   const pathname = usePathname()
-  const editUrl = `https://github.com/dev-five-git/devup-ui/tree/main/apps/landing/src/app/(detail)/docs${pathname.split('docs')[1]}/page.mdx`
+  const editUrl = `https://github.com/dev-five-git/devup-ui/tree/main/apps/landing/src/app/(detail)/components/${pathname.split('components')[1]}/`
   const [menus, setMenus] = useState<
     {
       text: string
@@ -50,15 +50,15 @@ export function RightIndex() {
   >([])
   useEffect(() => {
     const elements = document.querySelectorAll(
-      '.markdown-body h1, .markdown-body h2',
+      '.markdown-body h4, .markdown-body h6',
     )
     const menus = []
     for (let i = 0; i < elements.length; i++) {
       const element = elements[i]
       const text = element.textContent!
       menus.push({
         text,
-        sub: element.tagName === 'H2',
+        sub: element.tagName === 'H6',
         onClick: () => {
           element.scrollIntoView({ behavior: 'smooth' })
         },