<script>
import Alert from "./Alert.svelte";
import { alerts } from "./store";
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<Alert></Alert>
<h1>Svelte Alerts!</h1>
<button on:click="{() => alerts.add({message:"INFO", type:"info", timeout:5000})}" class="btn btn-secondary">INFO</button>
<button on:click="{() => alerts.add({message:"OK", type:"success", timeout:5000})}" class="btn btn-success">OK</button>
<button on:click="{() => alerts.add({message:"OOPS", type:"warning", timeout:5000})}" class="btn btn-warning">OOPS</button>
<button on:click="{() => alerts.add({message:"FAIL", type:"danger", timeout:5000})}" class="btn btn-danger">FAIL</button>
<div>
<a href="https://github.com/rgglez/svelte-alerts">https://github.com/rgglez/svelte-alerts</a>
</div>