Korbs/butterflyvu
Korbs/butterflyvu
1
Fork 0
Code Issues Pull requests Activity

Create Aside component

Browse source
This commit is contained in:
Korbs 2024-12-11 20:41:18 -05:00
parent a8c2c5324a
commit 2007ea37a6
2 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/Aside.astro Normal file
View file

@ -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>

10
src/content/docs/components.mdx
View file

@ -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={