korbs/Pandora
1
0
Fork 0
mirror of https://ark.sudovanilla.org/Korbs/Pandora.git synced 2024-12-22 19:13:52 +00:00
Code Activity

Add Banner component

Browse source
This commit is contained in:
Korbs 2024-12-10 00:52:46 -05:00
parent 9468de6166
commit a57fed98de
2 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
index.ts
View file

@ -3,7 +3,8 @@ import CallToAction from "./src/blocks/CallToAction.astro";
import Hero from "./src/blocks/Hero.astro"
// Components
import Banner from "./src/Banner.astro"
import Image from "./src/Image.astro";
// Export
export {CallToAction, Image, Hero}
export {Banner, CallToAction, Image, Hero}

48
src/Banner.astro Normal file
View file

@ -0,0 +1,48 @@
---
const {
Title,
Message,
Type,
Link
} = Astro.props
---
<a href={Link} class={"pd-banner pd-banner-type-" + Type}>
<p class="pd-banner-title"><slot name="icon"/> {Title}</p>
<p class="pd-banner-message">{Message}</p>
</a>
<style>
.pd-banner {
background: gray;
color: white;
display: flex;
align-items: center;
border-radius: 6px;
margin-bottom: 24px;
@media screen and (max-width: 800px) {
flex-direction: column;
.pd-banner-message {padding: 24px}
}
p {
margin: 0px;
}
.pd-banner-title {
@media screen and (max-width: 800px) {
border-radius: 6px 6px 0px 0px !important;
width: 100%;
padding: 12px 0px 12px 50px !important;
}
display: flex;
gap: 12px;
align-items: center;
background: #00000038;
padding: 12px 16px;
border-radius: 6px 0px 0px 6px;
margin-right: 12px;
}
}
.pd-banner-type-Dangerous {background: #a42626; color: white}
.pd-banner-type-Update {background: #3a66b9; color: white}
.pd-banner-type-Warning {background: #e6e680; color: black}
</style>