fix: Update docs

Author: dev-ABsid

src/app/components/auto-complete/auto-complete.mdx

@@ -49,8 +49,8 @@ AutoComplete control of input field.
 />
 
 <Playground
+  title="Disabled"
   desc="Disable all."
-  title="disabled"
   scope={{ AutoComplete }}
   code={`
 () => {
@@ -81,8 +81,8 @@ AutoComplete control of input field.
 />
 
 <Playground
+  title="Search"
   desc="Update the contents of drop-down list based on input."
-  title="search"
   scope={{ AutoComplete }}
   code={`
 () => {
@@ -141,7 +141,7 @@ AutoComplete control of input field.
 />
 
 <Playground
-  title="custom searching text"
+  title="Custom searching text"
   desc="You can replace the default waiting text with any components."
   scope={{ AutoComplete }}
   code={`
@@ -154,7 +154,7 @@ AutoComplete control of input field.
 />
 
 <Playground
-  title="custom no options"
+  title="Custom no options"
   desc="You can also customize the prompt with no options."
   scope={{ AutoComplete, useState }}
   code={`
@@ -182,7 +182,7 @@ AutoComplete control of input field.
 />
 
 <Playground
-  title="custom option"
+  title="Custom option"
   desc="You can rewrite each item of the `AutoComplete` to express more."
   scope={{ AutoComplete, useState, Text, Badge, Grid }}
   code={`
@@ -221,7 +221,7 @@ AutoComplete control of input field.
 />
 
 <Playground
-  title="clearable"
+  title="Clearable"
   desc="Add a clear button in the input box."
   scope={{ AutoComplete }}
   code={`

src/app/components/button/button.mdx

@@ -74,7 +74,7 @@ The `Button` UI component is a versatile element for triggering various operatio
 />
 
 <Playground
-  title="GHOST"
+  title="Ghost"
   desc="The opposite color."
   scope={{ Button, Grid }}
   code={`

src/app/components/checkbox/checkbox.mdx

@@ -19,7 +19,7 @@ Displays a boolean value.
 />
 
 <Playground
-  title="sizes"
+  title="Size"
   desc="Checkbox of different sizes."
   scope={{ Checkbox }}
   code={`
@@ -49,7 +49,7 @@ Displays a boolean value.
 />
 
 <Playground
-  title="disable"
+  title="Disabled"
   scope={{ Checkbox, Spacer }}
   code={`
 <>
@@ -61,7 +61,7 @@ Displays a boolean value.
 />
 
 <Playground
-  title="group"
+  title="Group"
   desc="Manage a set of `Checkbox`."
   scope={{ Checkbox, Spacer }}
   code={`

src/app/components/count-up/count-up.mdx

@@ -12,7 +12,6 @@ export const meta = {
 `CountUp` is used to show animation counter
 
 <Playground
-  title="CountUp example"
   desc="Example of Countup"
   scope={{ CountUp, Text, Button }}
   code={`

src/app/components/input/input.mdx

@@ -31,7 +31,7 @@ The Input contain an additional Hooks, see subsection [useInput](/hooks/use-inpu
 />
 
 <Playground
-  title="Sizes"
+  title="Size"
   desc="Inputs of different sizes."
   scope={{ Input, Spacer }}
   code={`

src/app/components/keyboard/keyboard.mdx

@@ -20,7 +20,7 @@ The `Keyboard` can only display layout styles, if you need to bind the keyboard
 />
 
 <Playground
-  title="modifiers"
+  title="Modifiers"
   scope={{ Keyboard }}
   code={`
 <div>
@@ -33,7 +33,7 @@ The `Keyboard` can only display layout styles, if you need to bind the keyboard
 />
 
 <Playground
-  title="combination"
+  title="Combination"
   scope={{ Keyboard }}
   code={`
 <div>

src/app/components/link/link.mdx

@@ -19,7 +19,7 @@ Hyperlinks between pages.
 />
 
 <Playground
-  title="highlight"
+  title="Highlight"
   desc="Distinguish links with different colors."
   scope={{ Link }}
   code={`
@@ -41,7 +41,7 @@ Hyperlinks between pages.
 />
 
 <Playground
-  title="variant"
+  title="Variant"
   desc="Different styles of links."
   scope={{ Link, Text }}
   code={`
@@ -57,7 +57,7 @@ Hyperlinks between pages.
 />
 
 <Playground
-  title="block"
+  title="Block"
   desc="Display as a separate block."
   scope={{ Link }}
   code={`

src/app/components/loading-spinner/loading-spinner.mdx

@@ -18,7 +18,7 @@ Indicate an action running in the background.
 />
 
 <Playground
-  title="with text"
+  title="With text"
   desc="Customize text next to icon."
   scope={{ LoadingSpinner }}
   code={`
@@ -27,7 +27,7 @@ Indicate an action running in the background.
 />
 
 <Playground
-  title="types"
+  title="Types"
   desc="Loading indicators in different states."
   scope={{ LoadingSpinner, Grid }}
   code={`
@@ -49,7 +49,7 @@ Indicate an action running in the background.
 />
 
 <Playground
-  title="spaces"
+  title="Spaces"
   desc="Customize the space between points. (the ratio is relative to the current `size`)"
   scope={{ LoadingSpinner, Grid }}
   code={`

src/app/components/menu/menu.mdx

@@ -14,7 +14,6 @@ Easily create and customize menus for your applications with the `Menu` UI compo
 
 <Playground
   scope={{ Menu, Link, Home }}
-  title={'Menu example'}
   desc={'Example of a menu'}
   code={`
   () => {

src/app/components/note/note.mdx

@@ -19,15 +19,15 @@ Display text that requires attention or provides additional information.
 />
 
 <Playground
-  title="secondary"
+  title="Secondary"
   scope={{ Note }}
   code={`
 <Note type="secondary">This note details something important.</Note>
 `}
 />
 
 <Playground
-  title="status"
+  title="Status"
   scope={{ Note }}
   code={`
 <>
@@ -41,7 +41,7 @@ Display text that requires attention or provides additional information.
 />
 
 <Playground
-  title="custom label"
+  title="Custom label"
   scope={{ Note }}
   code={`
 <Note icon="custom">This note uses a custom label.</Note>

src/app/components/page-width/page-width.mdx

@@ -6,7 +6,7 @@ export const meta = {
   group: 'Layout',
 }
 
-# PageWidth (formerly `ContentLayout`)
+# PageWidth 
 
 Displays the content with maximum page width given by the ui provider with equal margins from left and right.
 

src/app/components/quick-bar/quick-bar.mdx

@@ -13,7 +13,6 @@ export const meta = {
 QuickBar is a customizable sidebar component designed for navigation .
 
 <Playground
-  title="Example"
   scope={{
     QuickAction,
     Code,

src/app/components/search/search.mdx

@@ -15,10 +15,7 @@ export const meta = {
 # Search
 The `Search` UI component provides a flexible and customizable search modal for web applications.
 
-## Page search modal
-
 <Playground
-  title="Search modal example"
   desc="A fully example of using the search modal"
   scope={{ Search, Button, useState, SearchProvider }}
   code={`

src/app/components/section/section.mdx

@@ -12,7 +12,6 @@ The `Section` UI component offers a versatile container for organizing and struc
 
 <Playground
   scope={{ Section, Text }}
-  title={'Section example'}
   desc={'Example of a section'}
   code={`
   <Section>
@@ -23,7 +22,7 @@ The `Section` UI component offers a versatile container for organizing and struc
 
 <Playground
   scope={{ Section, Text }}
-  title={'Section example responsive'}
+  title={'Responsive Section'}
   desc={'Example of a section responsive'}
   code={`
   <Section p={{ xs: 2, md: 4, xl: 6 }}>

src/app/components/snippet/snippet.mdx

@@ -19,7 +19,7 @@ Display a snippet of copyable code for the command line.
 />
 
 <Playground
-  title="width"
+  title="Width"
   desc="Specify width manually."
   scope={{ Snippet }}
   code={`
@@ -28,7 +28,7 @@ Display a snippet of copyable code for the command line.
 />
 
 <Playground
-  title="types"
+  title="Types"
   desc="Show different states with colors."
   scope={{ Snippet, Spacer }}
   code={`
@@ -55,7 +55,7 @@ Display a snippet of copyable code for the command line.
 />
 
 <Playground
-  title="without copy"
+  title="Without copy"
   desc="Hide icon for copy. (disable copy)"
   scope={{ Snippet }}
   code={`
@@ -64,23 +64,23 @@ Display a snippet of copyable code for the command line.
 />
 
 <Playground
-  title="custom symbol"
+  title="Custom symbol"
   scope={{ Snippet }}
   code={`
 <Snippet symbol=">" text="yarn add @himalaya-ui/core" w="300px" />
 `}
 />
 
 <Playground
-  title="custom toast"
+  title="Custom toast"
   scope={{ Snippet }}
   code={`
 <Snippet toastText="Code copied!" toastType="secondary" text="yarn add @himalaya-ui/core" w="300px" />
 `}
 />
 
 <Playground
-  title="filled"
+  title="Filled"
   scope={{ Snippet, Spacer }}
   code={`
 <>

src/app/components/table/table.mdx

@@ -33,7 +33,7 @@ Display tabular data in format.
 />
 
 <Playground
-  title="compose"
+  title="Compose"
   desc="Show other components in the table."
   scope={{ Table, Code, Text }}
   code={`
@@ -56,7 +56,7 @@ Display tabular data in format.
 />
 
 <Playground
-  title="width"
+  title="Width"
   desc="Specifies the `w` of all or part of the columns."
   scope={{ Table, Code, Text }}
   code={`
@@ -79,7 +79,7 @@ Display tabular data in format.
 />
 
 <Playground
-  title="actions"
+  title="Actions"
   desc="Custom elements can be displayed in the table, and any changes will be immediately rendered."
   scope={{ Table, Text, Button }}
   code={`
@@ -110,7 +110,7 @@ Display tabular data in format.
 />
 
 <Playground
-  title="update row"
+  title="Update row"
   desc="You can use custom elements to update a specific row."
   scope={{ Table, Text, Button }}
   code={`
@@ -149,7 +149,7 @@ Display tabular data in format.
 />
 
 <Playground
-  title="custom head"
+  title="Custom head"
   scope={{ Table, Code, Text }}
   code={`
 () => {

src/app/components/textarea/textarea.mdx

@@ -20,7 +20,7 @@ Retrieve multi-line user input.
 />
 
 <Playground
-  title="disabled"
+  title="Disabled"
   desc="Disable interactive textarea."
   scope={{ Textarea }}
   code={`
@@ -46,7 +46,7 @@ Retrieve multi-line user input.
 />
 
 <Playground
-  title="get change"
+  title="Change event"
   desc="Capture changes in textarea."
   scope={{ Textarea, useState }}
   code={`

src/app/components/toggle/toggle.mdx

@@ -43,7 +43,7 @@ Displays a boolean value.
 />
 
 <Playground
-  title="disabled"
+  title="Disabled"
   scope={{ Toggle, Spacer }}
   code={`
 <>
@@ -55,7 +55,7 @@ Displays a boolean value.
 />
 
 <Playground
-  title="get change"
+  title="Change event"
   scope={{ Toggle, Spacer }}
   code={`
 () => {