aboutsummaryrefslogtreecommitdiffstats
path: root/code/app/src/routes/book/alerts/+page.svelte
blob: ed4c92bb3622b1542be99462e719233196057d21 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script>
    import Alert from "$components/alert.svelte";
</script>

<section>
    <h2>Info</h2>
    <Alert type="info" message="This is message" title="This is title"/>
</section>
<section>
    <h2>Warning</h2>
    <Alert type="warning" message="This is message" title="This is title"/>
</section>
<section>
    <h2>Error</h2>
    <Alert type="error" message="This is message" title="This is title"/>
</section>
<section>
    <h2>Success</h2>
    <Alert type="success" message="This is message" title="This is title"/>
</section>
<section>
    <h2>Actions</h2>
    <Alert
            type="info"
            message="This is message"
            title="This is title"
            closeable
            actions={[
            {
                id: "confirm",
                text: "Yes!",
            },
            {
                id: "cancel",
                text: "No!",
                color: "red",
            },
        ]}
    />
</section>
<section>
    <h2>Right link</h2>
    <Alert
            on:rightLinkCliked={() => alert("Right link clicked")}
            rightLinkText="Link or action"
            title="Go here"
            message="Hehe"
            type="error"
    />
</section>
<section>
    <h2>List</h2>
    <Alert
            title="This is title"
            listItems={["Message 1", "Message 2"]}
            type="error"
            message="This is bad dude"
            closeable
            closeableCooldown="60"
            id="alert-1"
            on:actrepeat={() => {
            alert("Repeat requested");
        }}
            actions={[{ id: "repeat", text: "Try again" }]}
    />
</section>
<section>
    <h2>Closeable</h2>
    <Alert message="This is message" closeable type="info"/>
</section>