From 75ccf7b56d373f866dbce098cc46e7db2749f201 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <44473671+D-Lite@users.noreply.github.com>
Date: Sun, 16 Jul 2023 11:07:11 +0100
Subject: [PATCH] Center Component (#44)

* feat: center component documentation

* refactor: change name casing center

* refactor: change name casing center
---
 .../content/examples/center/IconCenter.vue    | 13 ++++
 .../content/examples/center/SimpleCenter.vue  |  5 ++
 .../examples/center/SquareAndCircle.vue       | 10 +++
 content/4.components/center.md                | 76 +++++++++++++++++++
 content/4.components/checkbox.md              |  6 +-
 5 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 components/content/examples/center/IconCenter.vue
 create mode 100644 components/content/examples/center/SimpleCenter.vue
 create mode 100644 components/content/examples/center/SquareAndCircle.vue
 create mode 100644 content/4.components/center.md

diff --git a/components/content/examples/center/IconCenter.vue b/components/content/examples/center/IconCenter.vue
new file mode 100644
index 0000000..a62a0e2
--- /dev/null
+++ b/components/content/examples/center/IconCenter.vue
@@ -0,0 +1,13 @@
+<template>
+  <CHStack>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+      <CIcon name="phone" />
+    </CCenter>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+      <CBox as='span' fontWeight='bold' fontSize='lg'>
+        1
+      </CBox>
+    </CCenter>
+  </CHStack>
+</template>
+
diff --git a/components/content/examples/center/SimpleCenter.vue b/components/content/examples/center/SimpleCenter.vue
new file mode 100644
index 0000000..1547b66
--- /dev/null
+++ b/components/content/examples/center/SimpleCenter.vue
@@ -0,0 +1,5 @@
+<template>
+  <CCenter bg='tomato' h='100px' color='white'>
+    This is the Center
+  </CCenter>
+</template>
diff --git a/components/content/examples/center/SquareAndCircle.vue b/components/content/examples/center/SquareAndCircle.vue
new file mode 100644
index 0000000..73216c1
--- /dev/null
+++ b/components/content/examples/center/SquareAndCircle.vue
@@ -0,0 +1,10 @@
+<template>
+  <CHStack>
+    <CCircle size='40px' bg='teal.800' color='white'>
+      <CIcon name="phone" />
+    </CCircle>
+    <CSquare size='40px' bg='rebeccapurple' color='white'>
+      <CIcon name="phone" />
+    </CSquare>
+  </CHStack>
+</template>
\ No newline at end of file
diff --git a/content/4.components/center.md b/content/4.components/center.md
new file mode 100644
index 0000000..3044dbf
--- /dev/null
+++ b/content/4.components/center.md
@@ -0,0 +1,76 @@
+---
+title: Center
+description: Center Component
+version: 2.0+
+---
+
+# Center
+
+Center is a layout component that centers its child within itself.
+
+## Import
+
+```js
+import { CCenter, CCircle, CSquare } from '@chakra-ui/vue-next';
+```
+
+- CCenter: centers its child given `width` and `height`
+- CSquare: centers its child given `size` (width and height)
+- CCircle: a Square with round `border-radius`
+
+## Usage
+
+Put any child element inside it, give it any `width` or/and `height`, it'll ensure the child is centered.
+
+::showcase
+  ::simple-center{width=full}
+  ::
+::
+
+```html
+<CCenter bg='tomato' h='100px' color='white'>
+    This is the Center
+</CCenter>
+```
+
+## With Icons
+
+CCenter can be used to create frames around icons or numbers.
+
+::showcase
+::icon-center
+::
+::
+
+```html
+<CHStack>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+        <CIcon name="phone" />
+    </CCenter>
+    <CCenter w='40px' h='40px' bg='tomato' color='white'>
+        <CBox as='span' fontWeight='bold' fontSize='lg'>
+        1
+        </CBox>
+    </CCenter>
+</CHStack>
+```
+
+## Square and Circle
+
+The Square and Circle components automatically centers its children given the size.
+
+::showcase
+::square-and-circle
+::
+::
+
+```html
+<CHStack>
+    <CCircle size='40px' bg='teal.800' color='white'>
+        <CIcon name="phone" />
+    </CCircle>
+    <CSquare size='40px' bg='rebeccapurple' color='white'>
+        <CIcon name="phone" />
+    </CSquare>
+</CHStack>
+  ```
diff --git a/content/4.components/checkbox.md b/content/4.components/checkbox.md
index aadc11d..d1e7326 100644
--- a/content/4.components/checkbox.md
+++ b/content/4.components/checkbox.md
@@ -1,8 +1,6 @@
 ---
 title: Checkbox
-description:
-  Checkbox component is used in forms when a user needs to select multiple
-  values from several options.
+description: Checkbox Component
 version: 2.0+
 ---
 
@@ -13,7 +11,7 @@ Checkbox component is used in forms when a user needs to select multiple values
 ## Import
 
 ```js
-import { CCheckbox, CCheckboxGroup } from '@chakra-ui/vue'
+import { CCheckbox, CCheckboxGroup } from '@chakra-ui/vue-next';
 ```
 
 ## Usage