docs: remove duplicate line, fix typos (#835)

* Delete duplicate line in use-modal.mdx

* Fix typos in documentation

Author: joemaffei

pages/en-us/components/badge.mdx

@@ -60,7 +60,7 @@ Display an indicator that requires attention.
       <Badge style={{ backgroundColor: theme.palette.alert }}>Alert</Badge> <Spacer h={.5} />
       <Badge style={{ backgroundColor: theme.palette.purple }}>Purple</Badge> <Spacer h={.5} />
       <Badge style={{ backgroundColor: theme.palette.violet }}>Violet</Badge> <Spacer h={.5} />
-      <Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>Cyan Ligher</Badge> <Spacer h={.5} />
+      <Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>Cyan Lighter</Badge> <Spacer h={.5} />
     </>
   )
 }

pages/en-us/components/divider.mdx

@@ -31,7 +31,7 @@ A divider line separates different content.
 
 <Playground
   title="With Text"
-  desc="Display text or components in diriver."
+  desc="Display text or components in divider."
   scope={{ Divider, Text }}
   code={`
 <>
@@ -109,7 +109,7 @@ A divider line separates different content.
 
 | Attribute | Description       | Type                          | Accepted values                  | Default   |
 | --------- | ----------------- | ----------------------------- | -------------------------------- | --------- |
-| **type**  | type of divier    | [DividerTypes](#dividertypes) | -                                | `default` |
+| **type**  | type of divider    | [DividerTypes](#dividertypes) | -                                | `default` |
 | **align** | alignment of text | [DividerAlign](#divideralign) | -                                | `center`  |
 | ...       | native props      | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -         |
 

pages/en-us/components/table.mdx

@@ -207,7 +207,7 @@ const MyComponent = () => (
 | Attribute        | Description                                  | Type                                                  | Accepted values    | Default |
 | ---------------- | -------------------------------------------- | ----------------------------------------------------- | ------------------ | ------- |
 | **data**         | data source                                  | `Array<T>`                                            | -                  | -       |
-| **initialData**  | inital datas                                 | `Array<T>`                                            | -                  | `[]`    |
+| **initialData**  | initial data                                 | `Array<T>`                                            | -                  | `[]`    |
 | **emptyText**    | displayed text when table's content is empty | `string`                                              | -                  | -       |
 | **hover**        | table's hover effect                         | `boolean`                                             | -                  | `true`  |
 | **onRow**        | callback row's content by click              | [TableOnRowClick](#tableonrowclick)                   | -                  | -       |
@@ -238,7 +238,7 @@ type TableOnRowClick<T> = (rowData: T, rowIndex: number) => void
 type TableOnCellClick<T> = (
   value: T[keyof T],
   rowIndex: number,
-  colunmIndex: number,
+  columnIndex: number,
 ) => void
 ```
 

pages/en-us/hooks/use-classes.mdx

@@ -71,7 +71,7 @@ Any value that can be implicitly typed to false will be ignored:
 useClasses('') // output -> ""
 useClasses(null) // output -> ""
 useClasses('btn', undefined) // output -> "btn"
-useClasses({ actived: null }) // output -> ""
+useClasses({ active: null }) // output -> ""
 useClasses(0) // output -> ""
 useClasses(false, 'btn', '') // output -> "btn"
 ```

pages/en-us/hooks/use-modal.mdx

@@ -1,18 +1,18 @@
-import { Layout, Playground, Attributes } from 'lib/components'
-import { useModal, Modal, Button } from 'components'
+import { Layout, Playground, Attributes } from "lib/components";
+import { useModal, Modal, Button } from "components";
 
 export const meta = {
-  title: 'useModal',
-  group: 'Enhancement',
+  title: "useModal",
+  group: "Enhancement",
   index: 11,
-}
+};
 
 ## useModal
 
 `useModal` provides automatic binding for component [Modal](/en-us/components/modal), which can reduce the amount of repetitive code and improve the development experience.
 Using this hooks behaves the same as if you had added `React.useState` manually.
 
-This hooks also supports use on [Select component](/en-us/components/select 'Select Component').
+This hooks also supports use on [Select component](/en-us/components/select "Select Component").
 
 <Playground
   desc="Use hooks to control `Modal`."
@@ -42,17 +42,16 @@ This hooks also supports use on [Select component](/en-us/components/select 'Sel
 
 ```ts
 type useModal = (initialVisible: boolean) => {
-  visible: boolean
-  setVisible: Dispatch<SetStateAction<boolean>>
-  setVisible: Dispatch<SetStateAction<boolean>>
-  currentRef: MutableRefObject<boolean>
+  visible: boolean;
+  setVisible: Dispatch<SetStateAction<boolean>>;
+  currentRef: MutableRefObject<boolean>;
   bindings: {
-    visible: boolean
-    onClose: () => void
-  }
-}
+    visible: boolean;
+    onClose: () => void;
+  };
+};
 ```
 
 </Attributes>
 
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>;