1
Fork 0

Add generic components

This commit is contained in:
Korbs 2024-06-21 21:33:54 -04:00
parent 283bcbef61
commit da12b5d8b7
No known key found for this signature in database
2 changed files with 61 additions and 0 deletions

View file

@ -0,0 +1,53 @@
---
const {
// Primary Options
Icon,
Link,
// Style
Color = "white",
Background = "#222222",
BorderColor = "#222222",
BorderWidth = "1px",
BorderRadius = "4px",
// Optionals Options
Target = "_self",
Onclick = "null",
} = Astro.props
---
<a
href={Link}
target={Target}
onclick={Onclick}
class="generic-button"
style={
' color: ' + Color
+ '; background: ' + Background
+ '; border-color: ' + BorderColor
+ '; border-width: ' + BorderWidth
+ '; border-radius: ' + BorderRadius
}
>
<slot/>
</a>
<style lang="scss" is:global>
.generic-button {
display: flex;
align-items: center;
gap: 6px;
padding-right: 12px;
border-style: solid;
text-decoration: none;
max-width: max-content;
svg {
background: rgba(255,255,255,0.1);
border-radius: 4px 0px 0px 4px;
padding: 6px;
margin: -1px;
margin-right: 6px;
}
}
</style>

View file

@ -0,0 +1,8 @@
---
const {
Text,
Align = "left"
} = Astro.props
---
<h1 style={'text-align: ' + Align} class="page-title">{Text}</h1>