From 50e47cc7b24c2dc50ef0eeab86cc391ad6b2973c Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Mon, 12 Jun 2023 09:45:35 +0100
Subject: [PATCH 1/3] feat: code component documentation

---
 .../content/examples/code/ColorsCode.vue      | 12 ++++
 .../content/examples/code/SimpleCode.vue      |  6 ++
 .../content/examples/code/VariantCode.vue     | 12 ++++
 content/4.components/code.md                  | 69 +++++++++++++++++++
 4 files changed, 99 insertions(+)
 create mode 100644 components/content/examples/code/ColorsCode.vue
 create mode 100644 components/content/examples/code/SimpleCode.vue
 create mode 100644 components/content/examples/code/VariantCode.vue
 create mode 100644 content/4.components/code.md

diff --git a/components/content/examples/code/ColorsCode.vue b/components/content/examples/code/ColorsCode.vue
new file mode 100644
index 0000000..b2416b9
--- /dev/null
+++ b/components/content/examples/code/ColorsCode.vue
@@ -0,0 +1,12 @@
+<template>
+    <c-stack is-inline>
+        <c-code>console.log(welcome)</c-code>
+        <c-code color-scheme="red">var chakra = 'awesome!'</c-code>
+        <c-code color-scheme="yellow">npm install chakra</c-code>
+    </c-stack>
+</template>
+
+<script setup>
+import { CStack, CCode } from '@chakra-ui/vue-next';
+
+</script>
\ No newline at end of file
diff --git a/components/content/examples/code/SimpleCode.vue b/components/content/examples/code/SimpleCode.vue
new file mode 100644
index 0000000..d87455c
--- /dev/null
+++ b/components/content/examples/code/SimpleCode.vue
@@ -0,0 +1,6 @@
+<template>
+    <c-code> Hello world </c-code>
+</template>
+<script setup>
+import { CCode } from '@chakra-ui/vue-next';
+</script>
\ No newline at end of file
diff --git a/components/content/examples/code/VariantCode.vue b/components/content/examples/code/VariantCode.vue
new file mode 100644
index 0000000..58a66e2
--- /dev/null
+++ b/components/content/examples/code/VariantCode.vue
@@ -0,0 +1,12 @@
+<template>
+    <c-stack is-inline>
+        <c-code color-scheme="whatsapp" variant="outline">Outline </c-code>
+        <c-code color-scheme="whatsapp" variant="subtle">Solid </c-code>
+        <c-code color-scheme="whatsapp" variant="solid">Solid</c-code>
+    </c-stack>
+</template>
+
+<script setup>
+import { CStack, CCode } from '@chakra-ui/vue-next';
+
+</script>
\ No newline at end of file
diff --git a/content/4.components/code.md b/content/4.components/code.md
new file mode 100644
index 0000000..cddb387
--- /dev/null
+++ b/content/4.components/code.md
@@ -0,0 +1,69 @@
+---
+title: Code
+description: Code component
+version: 2.0+
+---
+# Code
+
+Code is a component used to display inline code. It is composed of the `Box` component with a font family of `mono` for displaying code.
+
+## Import
+
+```js
+import { CCode } from "@chakra-ui/vue-next"
+```
+
+## Usage
+
+::showcase
+:simple-code
+::
+
+```html
+<c-code>Hello world </c-code>
+```
+
+## Colors
+
+You can change the color scheme of the component by passing the `colorScheme` prop.
+
+::showcase
+:colors-code
+::
+
+```html
+<c-stack is-inline>
+    <c-code>console.log(welcome)</c-code>
+    <c-code color-scheme="red">var chakra = 'awesome!'></c-code>
+    <c-code color-scheme="yellow">npm install chakra</c-code>
+</c-stack>
+```
+
+## Variant
+
+You can change the variant of the component by passing the `variant` prop.
+
+::showcase
+:variant-code
+::
+
+```html
+<c-stack is-inline>
+    <c-code color-scheme="whatsapp" variant="outline">Outline </c-code>
+    <c-code color-scheme="whatsapp" variant="subtle">Solid </c-code>
+    <c-code color-scheme="whatsapp" variant="solid">Solid</c-code>
+</c-stack>
+```
+
+## Props
+
+| Name          | Type                               | Default  | Description                           |
+|---------------|------------------------------------|----------|---------------------------------------|
+| `colorScheme` | `string`                           | `grey`   | The color scheme to use for the code. |
+| `variant`     | `"solid" \| "subtle" \| "outline"` | `subtle` | The variant of the Code               |
+
+## Slots
+
+| Name          | Description                           |
+|---------------|---------------------------------------|
+| `default` | Used for the `CCode` content.           |
\ No newline at end of file

From 38a448ba2f95b8d3b084abb5898d12a26bc9e418 Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 7 Jul 2023 09:07:37 +0100
Subject: [PATCH 2/3] refactor: change name casing code

---
 content/4.components/code.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/4.components/code.md b/content/4.components/code.md
index cddb387..06cda91 100644
--- a/content/4.components/code.md
+++ b/content/4.components/code.md
@@ -20,7 +20,7 @@ import { CCode } from "@chakra-ui/vue-next"
 ::
 
 ```html
-<c-code>Hello world </c-code>
+<CCode>Hello world </CCode>
 ```
 
 ## Colors
@@ -32,11 +32,11 @@ You can change the color scheme of the component by passing the `colorScheme` pr
 ::
 
 ```html
-<c-stack is-inline>
-    <c-code>console.log(welcome)</c-code>
-    <c-code color-scheme="red">var chakra = 'awesome!'></c-code>
-    <c-code color-scheme="yellow">npm install chakra</c-code>
-</c-stack>
+<CStack is-inline>
+    <CCode>console.log(welcome)</CCode>
+    <CCode color-scheme="red">var chakra = 'awesome!'></CCode>
+    <CCode color-scheme="yellow">npm install chakra</CCode>
+</CStack>
 ```
 
 ## Variant
@@ -48,11 +48,11 @@ You can change the variant of the component by passing the `variant` prop.
 ::
 
 ```html
-<c-stack is-inline>
-    <c-code color-scheme="whatsapp" variant="outline">Outline </c-code>
-    <c-code color-scheme="whatsapp" variant="subtle">Solid </c-code>
-    <c-code color-scheme="whatsapp" variant="solid">Solid</c-code>
-</c-stack>
+<CStack is-inline>
+    <CCode color-scheme="whatsapp" variant="outline">Outline </CCode>
+    <CCode color-scheme="whatsapp" variant="subtle">Solid </CCode>
+    <CCode color-scheme="whatsapp" variant="solid">Solid</CCode>
+</CStack>
 ```
 
 ## Props

From 96794d086095e32587c9e6829d2381be12b781fc Mon Sep 17 00:00:00 2001
From: Daniel Olabemiwo <olabemiwodaniel@gmail.com>
Date: Fri, 14 Jul 2023 13:18:01 +0100
Subject: [PATCH 3/3] refactor: change name casing code

---
 components/content/examples/code/ColorsCode.vue | 17 ++++++-----------
 components/content/examples/code/SimpleCode.vue |  7 ++-----
 .../content/examples/code/VariantCode.vue       | 17 ++++++-----------
 3 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/components/content/examples/code/ColorsCode.vue b/components/content/examples/code/ColorsCode.vue
index b2416b9..8733c0b 100644
--- a/components/content/examples/code/ColorsCode.vue
+++ b/components/content/examples/code/ColorsCode.vue
@@ -1,12 +1,7 @@
 <template>
-    <c-stack is-inline>
-        <c-code>console.log(welcome)</c-code>
-        <c-code color-scheme="red">var chakra = 'awesome!'</c-code>
-        <c-code color-scheme="yellow">npm install chakra</c-code>
-    </c-stack>
-</template>
-
-<script setup>
-import { CStack, CCode } from '@chakra-ui/vue-next';
-
-</script>
\ No newline at end of file
+    <CStack is-inline>
+        <CCode>console.log(welcome)</CCode>
+        <CCode color-scheme="red">var chakra = 'awesome!'</CCode>
+        <CCode color-scheme="yellow">npm install chakra</CCode>
+    </CStack>
+</template>
\ No newline at end of file
diff --git a/components/content/examples/code/SimpleCode.vue b/components/content/examples/code/SimpleCode.vue
index d87455c..7a79ad0 100644
--- a/components/content/examples/code/SimpleCode.vue
+++ b/components/content/examples/code/SimpleCode.vue
@@ -1,6 +1,3 @@
 <template>
-    <c-code> Hello world </c-code>
-</template>
-<script setup>
-import { CCode } from '@chakra-ui/vue-next';
-</script>
\ No newline at end of file
+    <CCode> Hello world </CCode>
+</template> 
\ No newline at end of file
diff --git a/components/content/examples/code/VariantCode.vue b/components/content/examples/code/VariantCode.vue
index 58a66e2..2d4520c 100644
--- a/components/content/examples/code/VariantCode.vue
+++ b/components/content/examples/code/VariantCode.vue
@@ -1,12 +1,7 @@
 <template>
-    <c-stack is-inline>
-        <c-code color-scheme="whatsapp" variant="outline">Outline </c-code>
-        <c-code color-scheme="whatsapp" variant="subtle">Solid </c-code>
-        <c-code color-scheme="whatsapp" variant="solid">Solid</c-code>
-    </c-stack>
-</template>
-
-<script setup>
-import { CStack, CCode } from '@chakra-ui/vue-next';
-
-</script>
\ No newline at end of file
+    <CStack is-inline>
+        <CCode color-scheme="whatsapp" variant="outline">Outline </CCode>
+        <CCode color-scheme="whatsapp" variant="subtle">Solid </CCode>
+        <CCode color-scheme="whatsapp" variant="solid">Solid</CCode>
+    </CStack>
+</template>
\ No newline at end of file