Merge pull request #191 from forestream/fix-docs

Fix Devup UI Docs Page

Author: belltalion

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Box",
+  title: 'Box',
 }
 
 # Box
@@ -8,23 +8,22 @@ The `Box` component is a layout primitive that can be used to create any kind of
 
 It is just a `div` with some styles.
 
-
 ## How to use
 
 ```jsx
 // Before
-<Box bg={"red"}/>
+<Box bg={"red"} />
 
 // After
-<div className="d0"/>
+<div className="d0" />
 ```
 
-You can use the as prop to change the element type.
+You can use the `as` prop to change the element type.
 
 ```jsx
 // Before
-<Box as="span"/>
+<Box as={"span"} />
 
 // After
-<span class="d0"/>
+<span className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -1,16 +1,17 @@
 export const metadata = {
-    title: "Button",
+  title: 'Button',
 }
 
 # Button
 
-The Button component is a simple button component that can be used to trigger actions.
+The `Button` component is a simple button component that can be used to trigger actions.
 
+## How to use
 
 ```jsx
 // Before
-<Button bg={"red"}/>
+<Button bg={"red"} />
 
 // After
-<button className="d0"/>
+<button className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Center",
+  title: 'Center',
 }
 
 # Center
@@ -10,10 +10,18 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 
 ## How to use
 
-```jsx
+````jsx
 // Before
-<Center/>
+<Center>
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+</Center>
 
 // After, It has 3 classes on default
-<div className="d0 d1 d2"/>
-```
+<div className="d3 d4 d5">
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+</div>```
+````

apps/landing/src/app/(detail)/docs/api/css/page.mdx

@@ -1,40 +1,38 @@
 export const metadata = {
-    title: "css",
+  title: 'css',
 }
 
 # css
 
-css function is a function that returns a string.
+`css` function is a function that returns a string.
 
-## Usage
+## How to use
 
 ### CSS Literal
-You can use the css function to create a css string.
+
+You can use `css` as a tag function to create a css string. Pass in a string of css properties as an argument, ans it will be converted
+into a class list.
+
 ```jsx
-<any css={css`
+// Before
+<any className={css`
     color: red;
 `}/>
 
-<any className={"d0"}/>
+// After
+<any className="d0"/>
 ```
 
 ### CSS Object
-You can use the css function to create a css object.
+
+You can also use the css function by passing in a css object as an argument.
+
 ```jsx
+// Before
 <any className={css({
     color: "red"
 })}/>
 
-<any className={"d0"}/>
-```
-
-Also, css function can be used in the style prop. (responsive, pseudo-class, etc.)
-```jsx
-// It works like this
-<any style={css({
-    color: ["red", "blue"],
-    _hover: {
-        color: "green"
-    }
-})}/>
+// After
+<any className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/flex/page.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Flex",
+  title: 'Flex',
 }
 
 # Flex
@@ -12,9 +12,8 @@ It has a `display: flex` style by default.
 
 ```jsx
 // Before
-<Flex/>
+<Flex />
 
-// After, It has a class on default
-<div className="d0"/>
+// After, it has a class on default
+<div className="d0" />
 ```
-

apps/landing/src/app/(detail)/docs/api/grid/page.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Grid",
+  title: 'Grid',
 }
 
 # Grid
@@ -10,10 +10,19 @@ It has a `display: grid` style by default.
 
 ## How to use
 
-```jsx
+````jsx
 // Before
-<Grid/>
+<Grid>
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+</Grid>
 
 // After, It has a class on default
-<div className="d0"/>
-```
+<div className="d3">
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+</div>
+    ```
+````

apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

@@ -1,15 +1,17 @@
 export const metadata = {
-    title: "Group Selector",
+  title: 'Group Selector',
 }
 
 # Group Selector
 
-AThe `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
+The `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
 
-## Usage
+## How to use
 
 ```jsx
 <div role="group">
-    <Box _groupHover={{bg: "red"}}/>
+  <Box _groupHover={{ bg: 'red' }} />
+  <Box _groupHover={{ bg: 'red' }} />
+  <Box _groupHover={{ bg: 'red' }} />
 </div>
 ```

apps/landing/src/app/(detail)/docs/api/image/page.mdx

@@ -1,20 +1,19 @@
 export const metadata = {
-    title: "Image",
+  title: 'Image',
 }
 
 # Image
 
-The `Image` component is a layout primitive that can be used to create any kind of layout.
+The `Image` component is a layout primitive that can be used to render images.
 
 It is just a `img` with some styles.
 
 ## How to use
 
 ```jsx
 // Before
-<Image src={"https://via.placeholder.com/150"}/>
+<Image src={"https://via.placeholder.com/150"} />
 
 // After
-<img src={"https://via.placeholder.com/150"}/>
+<img src="https://via.placeholder.com/150" />
 ```
-

apps/landing/src/app/(detail)/docs/api/input/page.mdx

@@ -1,20 +1,19 @@
 export const metadata = {
-    title: "Input",
+  title: 'Input',
 }
 
 # Input
 
-The input component is a layout primitive that can be used to create any kind of layout.
+The `input` component is a layout primitive that can be used to read user input.
 
 It is just a `input` with some styles.
 
 ## How to use
 
 ```jsx
 // Before
-<Input/>
+<Input border={"3px solid black"} />
 
 // After
-<input/>
+<input className="d0" />
 ```
-