48 lines
873 B
Plaintext
48 lines
873 B
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
interface Props {
|
|
title: string;
|
|
description?: string;
|
|
}
|
|
|
|
const { title, description } = Astro.props;
|
|
---
|
|
|
|
<div>
|
|
<Icon name="material-symbols:error-outline" width={32} height={32} />
|
|
<p id="title">{title}</p>
|
|
{description && <p>{description}</p>}
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes flashingRed {
|
|
from {
|
|
background-color: #ff000022;
|
|
}
|
|
|
|
to {
|
|
background-color: #ff000033;
|
|
}
|
|
}
|
|
|
|
div {
|
|
color: var(--color-critical-error) !important;
|
|
padding: 2em 2em !important;
|
|
margin-block: 4em !important;
|
|
border-radius: 1em;
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
animation: flashingRed;
|
|
animation-duration: 0.5s;
|
|
animation-direction: alternate;
|
|
animation-iteration-count: infinite;
|
|
|
|
& > #title {
|
|
font-weight: 600;
|
|
font-size: 120%;
|
|
}
|
|
}
|
|
</style>
|