docs(components): Update document for Switch

Make the document more readable.

Author: PeterlitsZo

packages/docs/src/pages/components/switch.mdx

@@ -2,7 +2,7 @@
 title: Switch
 ---
 
-import Note from '../../components/note.js';
+import Note from '../../components/note.js'
 
 # Switch
 
@@ -46,22 +46,21 @@ To show different style based on the input state, you can use
 
 ## `labelPosition`
 
-May you want to change the label's position, so there are props
-`labelPosition`. Its value can be `'start'`, `'end'`(default).
+By default, the switch comes first, with the label to the right of it. If you'd
+like to change the ordering, set the `labelPosition` prop to `"start"`, or the
+default value, `"end"`.
 
 ```jsx live=true
-<Switch label="Click Me!" labelPosition='start' />
+<Switch label="Use 24-Hour Time" labelPosition="start" />
 ```
 
 ```jsx live=true
-<Switch label="Do Not Click Me!" labelPosition='end' />
+<Switch label="Auto-Correction" labelPosition="end" />
 ```
 
 ## External label
 
-<Note>
-Try to use `labelPosition` prop rather than another Label layer!
-</Note>
+<Note>Try to use `labelPosition` prop rather than another Label layer.</Note>
 
 Even though the Switch component already renders a label, but you can also
 opt-in for an external label instead.
@@ -76,7 +75,8 @@ import { Box, Flex, Label, Switch } from 'theme-ui'
     justifyContent: 'space-between',
     alignItems: 'center',
     py: 4,
-  }}>
+  }}
+>
   <Label htmlFor="enable-email-alerts" sx={{ flex: 1 }}>
     Enable email alerts?
   </Label>