1 files changed, 48 insertions, 0 deletions
diff --git a/docs/src/components/Note.astro b/docs/src/components/Note.astro
new file mode 100644
index 000000000..c3ae29cb4
--- /dev/null
+++ b/docs/src/components/Note.astro
@@ -0,0 +1,48 @@
+---
+const { type = 'tip', title } = Astro.props;
+---
+
+<aside class={`note type-${type}`}>
+  {title && <label>{title}</label>}
+  <slot />
+</aside>
+
+<style>
+  .note {
+    --padding-block: 1rem;
+    --padding-inline: 1.25rem;
+
+    display: flex;
+    flex-direction: column;
+
+    padding: var(--padding-block) var(--padding-inline);
+    margin-left: calc(var(--padding-inline) * -1);
+    margin-right: calc(var(--padding-inline) * -1);
+    
+    background: var(--theme-bg-offset);
+    border-left: calc(var(--padding-inline) / 2) solid var(--color);
+    border-radius: 0;
+  }
+
+  .note label {
+    font-weight: 500;
+    color: var(--color);
+  }
+
+  /* .note :global(a) {
+    color: var(--color);
+  } */
+
+  .note.type-tip {
+    --color: var(--color-green);
+    --color-rgb: var(--color-green-rgb);
+  }
+  .note.type-warning {
+    --color: var(--color-yellow);
+    --color-rgb: var(--color-yellow-rgb);
+  }
+  .note.type-error {
+    --color: var(--color-red);
+    --color-rgb: var(--color-red-rgb);
+  }
+</style>