slowreader/web/ui/note.svelte at main · Ledchig/slowreader · GitHub

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
71
72
73
74
<script lang="ts">
  import type { Snippet } from 'svelte'

  import Icon from './icon.svelte'

  let {
    children,
    icon,
    title,
    variant
  }: {
    children: Snippet
    icon: string
    title?: string
    variant: 'dangerous' | 'good' | 'neutral'
  } = $props()
</script>

<section
  class="note"
  class:is-dangerous={variant === 'dangerous'}
  class:is-good={variant === 'good'}
>
  <div class="note_icon">
    <Icon path={icon} />
  </div>
  {#if title}
    <string class="note_title">{title}</string>
  {/if}
  {@render children()}
</section>

<style lang="postcss">
  :global {
    .note {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.312rem;
      align-items: flex-start;
      padding: 0.625rem 0.625rem 0.625rem calc(2rem + 0.312rem + 0.312rem);
      font: var(--secondary-font);
      border: 0.125rem solid;
      border-color: --tune-background(--note);
      border-radius: var(--base-radius);

      &.is-dangerous {
        @mixin background var(--note-dangerous-background);
      }

      &.is-good {
        @mixin background var(--note-good-background);
      }

      & + & {
        margin-top: 0.625rem;
      }
    }

    .note_icon {
      --icon-size: 2rem;

      position: absolute;
      inset-inline-start: 0.312rem;
      top: 0.312rem;
      color: --tune-background(--note);
    }

    .note_title {
      display: block;
      font: var(--secondary-title-font);
    }
  }
</style>