Create Aside component

src/components/Aside.astro

@@ -0,0 +1,30 @@
+---
+// Properties
+const {
+    Type,
+    Message
+} = Astro.props
+
+// Icons
+var Note = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75ZM12.5675 8.00075C12.8446 7.69287 12.8196 7.21865 12.5117 6.94156C12.2038 6.66446 11.7296 6.68942 11.4525 6.99731L11.4425 7.00842C11.1654 7.3163 11.1904 7.79052 11.4983 8.06761C11.8062 8.34471 12.2804 8.31975 12.5575 8.01186L12.5675 8.00075Z" fill="#000000"></path></svg>'
+var Warning = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.61617 3.6419C10.6736 1.80296 13.3268 1.80296 14.3841 3.6419L22.4271 17.6296C23.4813 19.463 22.1579 21.7504 20.0431 21.7504H3.95721C1.84242 21.7504 0.519055 19.463 1.57322 17.6296L9.61617 3.6419ZM12 8.25C12.4142 8.25 12.75 8.58579 12.75 9V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V9C11.25 8.58579 11.5858 8.25 12 8.25ZM12.5675 17.5008C12.8446 17.1929 12.8196 16.7187 12.5117 16.4416C12.2038 16.1645 11.7296 16.1894 11.4525 16.4973L11.4425 16.5084C11.1654 16.8163 11.1904 17.2905 11.4983 17.5676C11.8062 17.8447 12.2804 17.8197 12.5575 17.5119L12.5675 17.5008Z" fill="#000000"></path></svg>'
+var Dangerous = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z" fill="#000000"></path></svg>'
+var Successful = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color=""><path d="M7 12.5L10 15.5L17 8.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+---
+
+<div id={"aside-" + Type} class="aside">
+    { 
+        ()=> {
+                 if (Type === "Note") {
+            return <h2><Fragment set:html={Note}></Fragment> Note</h2>
+          } else if (Type === "Warning") {
+            return <h2><Fragment set:html={Warning}></Fragment> Warning</h2>
+          }else if (Type === "Dangerous") {
+            return <h2><Fragment set:html={Dangerous}></Fragment> Dangerous</h2>
+          }else if (Type === "Successful") {
+            return <h2><Fragment set:html={Successful}></Fragment> Successful</h2>
+          }
+        }
+    }
+    <p>{Message}</p>
+</div>

src/content/docs/components.mdx

@@ -5,11 +5,21 @@ Title: Components
 
 import { Prism } from '@astrojs/prism';
 import { Zorn } from "@minpluto/zorn";
+import Aside from '../../components/Aside.astro'
 
 Documentation template for the Astro Web Framework.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. A cras semper auctor neque vitae tempus quam. Tempus quam pellentesque nec nam aliquam. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Quis commodo odio aenean sed adipiscing diam. Pharetra et ultrices neque ornare aenean euismod elementum. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh.
 
+## Aside
+
+It's the blockquote below.
+
+<Aside Type="Note" Message="This is an aside component in ButterflyVu."/>
+<Aside Type="Warning" Message="This is an aside component in ButterflyVu."/>
+<Aside Type="Dangerous" Message="This is an aside component in ButterflyVu."/>
+<Aside Type="Successful" Message="This is an aside component in ButterflyVu."/>
+
 ## Prism
 
 <Prism lang="jsx" code={