feat: aspect ratio documentation (#51)

Author: D-Lite

components/content/examples/aspectratio/AspectRatioEImage.vue

@@ -0,0 +1,5 @@
+<template>
+  <CAspectRatio max-w="400px" :ratio="4 / 3">
+    <CImage src="https://bit.ly/naruto-sage" alt="sage mode naruto" object-fit="cover" />
+  </CAspectRatio>
+</template>

components/content/examples/aspectratio/AspectRatioEMap.vue

@@ -0,0 +1,7 @@
+<template>
+  <CAspectRatio :ratio="16 / 9">
+    <CBox as="iframe"
+      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126614.51346341768!2d3.8226594639678577!3d7.387080139026444!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x10398d77eeff086f%3A0x3b33e0f76e8e04a9!2sIbadan%2C%20Oyo!5e0!3m2!1sen!2sng!4v1689540977837!5m2!1sen!2sng"
+      frameborder="0" aria-hidden="false" tabindex="0" alt="Ibadan, Nigeria" allow-full-screen />
+  </CAspectRatio>
+</template>

components/content/examples/aspectratio/AspectRatioEVideo.vue

@@ -0,0 +1,7 @@
+<template>
+  <CAspectRatio max-w="600px" max-h="300px" :ratio="4 / 3">
+    <CBox as="iframe" w="600px" h="500px"
+      title="Sybren Willemot - Can you build a design system with Chakra UI Vue? - Vuejs Amsterdam 2023"
+      src="https://www.youtube.com/embed/UL9Fcx6qDdk" allow-full-screen />
+  </CAspectRatio>
+</template>

content/4.components/aspectratio.md

@@ -0,0 +1,58 @@
+---
+title: Aspect Ratio
+description: Aspect ratio component
+version: 2.0+
+---
+
+# Aspect Ratio
+
+`CAspectRatio` component is used to embed responsive videos and maps, etc. 
+
+## Import
+
+```js
+import { CAspectRatio } from '@chakra-ui/vue-next';
+```
+
+## Usage
+
+### Embed Video
+
+To embed a video with a specific aspect ratio, use a `CBox` as an `iframe` with src pointing to the link of the video.
+
+Pass the `max-width` prop to `CAspectRatio` to control the width of the content.
+
+::showcase
+::aspect-ratio-e-video{width=full}
+::
+::
+
+```html
+<CAspectRatio max-w="600px" max-h="300px" :ratio="4 / 3">
+    <CBox as="iframe" w="600px" h="500px" title="Chakra UI Vue" src="https://www.youtube.com/embed/UL9Fcx6qDdk"  allow-full-screen />
+</CAspectRatio>
+```
+
+### Embed Image
+
+ You can also embed image that has a 4:3 aspect ratio.
+
+ ::showcase
+::aspect-ratio-e-image{width=full}
+::
+::
+
+```html
+<CAspectRatio max-w="400px" :ratio="4 / 3">
+    <CImage src="https://bit.ly/naruto-sage" alt="sage mode naruto" object-fit="cover" />
+</CAspectRatio>
+```
+
+### Embed a responsive map
+
+Here's how to embed a responsive Google map using `CAspectRatio`. To make the map take up the entire width, we can ignore the max-width prop.
+
+::showcase
+::aspect-ratio-e-map{width=full}
+::
+::