mirror of
https://github.com/lbr77/blog-astro.git
synced 2026-04-08 16:11:56 +00:00
79 lines
1.6 KiB
Plaintext
79 lines
1.6 KiB
Plaintext
---
|
|
import * as interfaces from '../../lib/interfaces.ts'
|
|
import { snakeToKebab } from '../../lib/style-helpers.ts'
|
|
import '../../styles/notion-color.css'
|
|
import NotionBlocks from '../NotionBlocks.astro'
|
|
import RichText from './RichText.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;
|
|
align-items: flex-start;
|
|
box-sizing: border-box;
|
|
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: var(--notion-border);
|
|
background: var(--notion-surface);
|
|
}
|
|
.callout > div {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
margin: 0;
|
|
line-height: 1.5rem;
|
|
}
|
|
.callout > div.icon {
|
|
margin-right: 0.7rem;
|
|
}
|
|
.callout > div.icon > img {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
}
|
|
</style>
|