mirror of
https://github.com/Fluffy-Bean/website.git
synced 2025-05-14 08:02:16 +00:00
40 lines
No EOL
1.2 KiB
Text
40 lines
No EOL
1.2 KiB
Text
---
|
|
interface Props {
|
|
text: string,
|
|
}
|
|
|
|
const { text } = Astro.props;
|
|
---
|
|
|
|
<div class="note">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>
|
|
<span>{text}</span>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import "../styles/vars.scss";
|
|
|
|
.note {
|
|
margin: 16px 0;
|
|
padding: 10px;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
|
|
font-weight: 500;
|
|
|
|
border-radius: $radius;
|
|
background-color: $accent;
|
|
color: $light;
|
|
|
|
> svg {
|
|
min-width: 24px;
|
|
}
|
|
|
|
> span {
|
|
padding-left: 8px;
|
|
}
|
|
}
|
|
</style> |