More customzation

src/components/notion/Callout.astro

@@ -0,0 +1,73 @@
+---
+import * as interfaces from '../../lib/interfaces.ts'
+import { snakeToKebab } from '../../lib/style-helpers.ts'
+import RichText from './RichText.astro'
+import NotionBlocks from '../NotionBlocks.astro'
+
+export interface Props {
+  block: interfaces.Block
+  headings: interfaces.Block[]
+}
+
+const { block, headings }: Props = Astro.props
+
+if (!block.Callout) {
+  return null
+}
+
+const callout = block.Callout
+---
+
+<div class={`callout ${snakeToKebab(callout.Color)}`}>
+  {
+    callout.Icon && (
+      <div class="icon">
+        {callout.Icon.Type === 'emoji' ? (
+          callout.Icon.Emoji
+        ) : callout.Icon.Type === 'external' ? (
+          <img src={callout.Icon.Url} alt="Icon in a callout block" />
+        ) : null}
+      </div>
+    )
+  }
+  <div>
+    {
+      callout.RichTexts.map((richText: interfaces.RichText) => (
+        <RichText richText={richText} />
+      ))
+    }
+    {
+      callout.Children && (
+        <NotionBlocks blocks={callout.Children} headings={headings} />
+      )
+    }
+  </div>
+</div>
+
+<style>
+  .callout {
+    display: flex;
+    margin: 0.4rem auto;
+    padding: 16px 12px;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6rem;
+    border-radius: 3px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    background: rgba(235, 236, 237, 0.6);
+  }
+  .callout > div {
+    margin: 0;
+    line-height: 1.5rem;
+  }
+  .callout > div.icon {
+    margin-right: 0.7rem;
+  }
+  .callout > div.icon > img {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+</style>