bug/#32 BlockTypes: かなるs TypeBlocks マージ

- かなるs方法の方ではネストされた
  - Number/BulletedListItem, Paragraph が鍵。
    BlockTypeにblock.childrenを記述した。
- ジェネリクスBlockWithChildrenを記述した

## Feature
- Ram Gorila 会話

src/components/notion/blocks/Bookmark/Bookmark.tsx

@@ -1,15 +1,16 @@
 /* eslint-disable @next/next/no-img-element */
 import type { BookmarkBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from '~/types/notion';
 import type { Ogp } from '~/types/ogp';
 
 import { Skeleton } from '@mantine/core';
 
 type Props = {
-  block: BookmarkBlockObjectResponse & { ogp?: Ogp };
+  block: BlockWithChildren<BookmarkBlockObjectResponse> & { ogp?: Ogp };
 };
 
-export const Bookmark: FC<Props> = ({ block }) => {
+export const Bookmark: FC<Props> = ({ block }: Props) => {
   const ogp = block.ogp
     ? block.ogp
     : {

src/components/notion/blocks/BulletedListItem/BulletedListItem.tsx

@@ -1,16 +1,21 @@
 import type { BulletedListItemBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from '~/types/notion';
 
+import { NotionBlock } from '~/components/notion';
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: BulletedListItemBlockObjectResponse;
+  block: BlockWithChildren<BulletedListItemBlockObjectResponse>;
 };
 
-export const BulletedListItem: FC<Props> = ({ block }) => {
+export const BulletedListItem: FC<Props> = ({ block }: Props) => {
   return (
     <li className="sp:text-sm">
       <RichText text={block.bulleted_list_item.rich_text} />
+      {block.children?.map((child) => (
+        <NotionBlock block={child} key={child.id} />
+      ))}
     </li>
   );
 };

src/components/notion/blocks/Callout/Callout.tsx

@@ -1,22 +1,39 @@
 import type { CalloutBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
-import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { useMemo } from 'react';
 
+import { SpeechBubble } from '~/components/notion/blocks/SpeechBubble';
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: CalloutBlockObjectResponse;
+  block: BlockWithChildren<CalloutBlockObjectResponse>;
 };
 
-export const Callout: FC<Props> = ({ block }) => {
+export const Callout = ({ block }: Props) => {
   const emoji = useMemo(() => {
     if (!!block.callout.icon && block.callout.icon.type === 'emoji')
       return block.callout.icon.emoji;
 
     return '📣';
   }, [block.callout.icon]);
 
+  if (block.callout.icon?.type === "emoji") {
+    const isRam = block.callout.icon.emoji === "🐏";
+    const isGorilla = block.callout.icon.emoji === "🦍";
+    if (isRam || isGorilla)
+      return (
+        <div className="my-4">
+          <SpeechBubble
+            iconImageSrc={isRam ? "/images/ram.png" : "/images/gorilla.png"}
+            isReverse={isGorilla}
+          >
+            <RichText text={block.callout.rich_text} />
+          </SpeechBubble>
+        </div>
+      );
+  }
+
   return (
     <div className="flex items-center gap-4 rounded border border-solid border-slate-300 p-4 shadow">
       <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-200">

src/components/notion/blocks/Code/Code.tsx

@@ -1,13 +1,14 @@
 import type { PrismProps } from '@mantine/prism';
 import type { CodeBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { Prism } from '@mantine/prism';
 
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: CodeBlockObjectResponse;
+  block: BlockWithChildren<CodeBlockObjectResponse>;
 };
 
 /* Notion の language を Prism の language に変換 */
@@ -21,7 +22,7 @@ const languageCompiled = (
 };
 
 /* type code */
-export const Code: FC<Props> = ({ block }) => {
+export const Code: FC<Props> = ({ block }: Props) => {
   const language = languageCompiled(block.code.language) as Extract<
     PrismProps['language'],
     string

src/components/notion/blocks/Heading1/Heading1.tsx

@@ -1,14 +1,15 @@
 import type { Heading1BlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { OutlineBlockIcon } from '~/components/@commons/icons';
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: Heading1BlockObjectResponse;
+  block: BlockWithChildren<Heading1BlockObjectResponse>;
 };
 
-export const Heading1: FC<Props> = ({ block }) => {
+export const Heading1: FC<Props> = ({ block }: Props) => {
   return (
     <h1 
       className="my-2 flex items-center gap-2 px-3 text-2xl shadow-[-1px_-1px_6px_#ccc,4px_4px_1px_#1E293B] sp:text-lg"

src/components/notion/blocks/Heading2/Heading2.tsx

@@ -1,5 +1,6 @@
 import type { Heading2BlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { useIntersection } from '@mantine/hooks';
 import { useEffect } from 'react';
@@ -10,10 +11,10 @@ import { RichText } from '~/components/notion/RichText';
 import { inViewHeadingIdsAtom } from '~/recoil/atoms';
 
 type Props = {
-  block: Heading2BlockObjectResponse;
+  block: BlockWithChildren<Heading2BlockObjectResponse>;
 };
 
-export const Heading2: FC<Props> = ({ block }) => {
+export const Heading2: FC<Props> = ({ block }: Props) => {
   const setInViewHeading = useSetRecoilState(inViewHeadingIdsAtom);
   const { ref, entry } = useIntersection({
     threshold: 1,

src/components/notion/blocks/Heading3/Heading3.tsx

@@ -1,5 +1,6 @@
 import type { Heading3BlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { useIntersection } from '@mantine/hooks';
 import { useEffect } from 'react';
@@ -10,10 +11,10 @@ import { RichText } from '~/components/notion/RichText';
 import { inViewHeadingIdsAtom } from '~/recoil/atoms';
 
 type Props = {
-  block: Heading3BlockObjectResponse;
+  block: BlockWithChildren<Heading3BlockObjectResponse>;
 };
 
-export const Heading3: FC<Props> = ({ block }) => {
+export const Heading3: FC<Props> = ({ block }: Props) => {
   const setInViewHeading = useSetRecoilState(inViewHeadingIdsAtom);
   const { ref, entry } = useIntersection({
     threshold: 1,

src/components/notion/blocks/Image/Image.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import type { ImageBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { Button } from '@mantine/core';
 import NextImage from 'next/image';
@@ -9,10 +10,10 @@ import { useState } from 'react';
 import { DangerIcon, UpdateIcon } from '~/commons/icons';
 
 type Props = {
-  block: ImageBlockObjectResponse;
+  block: BlockWithChildren<ImageBlockObjectResponse>;
 };
 
-export const Image: FC<Props> = ({ block }) => {
+export const Image: FC<Props> = ({ block }: Props) => {
   const url = block.image.type === 'file' ? block.image.file.url : '';
   const caption =
     block.image.caption.length > 0 ? block.image.caption[0].plain_text : '';

src/components/notion/blocks/LinkPreview/LinkPreview.tsx

@@ -1,13 +1,14 @@
 import type { LinkPreviewBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { TbExternalLinkIcon } from '~/commons/icons';
 
 type Props = {
-  block: LinkPreviewBlockObjectResponse;
+  block: BlockWithChildren<LinkPreviewBlockObjectResponse>;
 };
 
-export const LinkPreview: FC<Props> = ({ block }) => {
+export const LinkPreview: FC<Props> = ({ block }: Props) => {
   return (
     <div className="">
       <a

src/components/notion/blocks/NumberedListItem/NumberedListItem.tsx

@@ -1,16 +1,21 @@
 import type { NumberedListItemBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
+import { NotionBlock } from '~/components/notion';
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: NumberedListItemBlockObjectResponse;
+  block: BlockWithChildren<NumberedListItemBlockObjectResponse>;
 };
 
-export const NumberedListItem: FC<Props> = ({ block }) => {
+export const NumberedListItem: FC<Props> = ({ block }: Props) => {
   return (
     <li className="pl-2 list-decimal sp:text-sm">
       <RichText text={block.numbered_list_item.rich_text} />
+      {block.children?.map((child) => (
+        <NotionBlock block={child} key={child.id} />
+      ))}
     </li>
   );
 };

src/components/notion/blocks/Paragraph/Paragraph.tsx

@@ -1,16 +1,27 @@
 import type { ParagraphBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from '~/types/notion';
 
+import { NotionBlock } from '~/components/notion';
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: ParagraphBlockObjectResponse;
+  block: BlockWithChildren<ParagraphBlockObjectResponse>;
 };
 
-export const Paragraph: FC<Props> = ({ block }) => {
+export const Paragraph: FC<Props> = ({ block }: Props) => {
   return (
-    <div>
-      <RichText text={block.paragraph.rich_text} />
-    </div>
+    <>
+      <p className="mt-1 min-h-[18px]">
+        <RichText text={block.paragraph.rich_text} />
+      </p>
+      {block.children && (
+        <div className="ml-4">
+          {block.children.map((child) => (
+            <NotionBlock block={child} key={child.id} />
+          ))}
+        </div>
+      )}
+    </>
   );
 };

src/components/notion/blocks/Quote/Quote.tsx

@@ -1,15 +1,16 @@
 import type { QuoteBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { clsx } from '@mantine/core';
 
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: QuoteBlockObjectResponse;
+  block: BlockWithChildren<QuoteBlockObjectResponse>;
 };
 
-export const Quote: FC<Props> = ({ block }) => {
+export const Quote: FC<Props> = ({ block }: Props) => {
   return (
     <blockquote
       className={clsx(

src/components/notion/blocks/Table.tsx

@@ -3,7 +3,7 @@ import type { BlockWithChildren } from '~/types/notion';
 
 import { Fragment } from "react";
 
-import { RichText } from "../RichText";
+import { RichText } from '~/components/notion/RichText';
 
 type Props = {
   block: BlockWithChildren<TableBlockObjectResponse>;

src/components/notion/blocks/ToDo.tsx

@@ -1,7 +1,7 @@
 import type { ToDoBlockObjectResponse } from "@notionhq/client/build/src/api-endpoints";
 import type { BlockWithChildren } from '~/types/notion';
 
-import { RichText } from "../RichText";
+import { RichText } from '~/components/notion/RichText';
 
 type Props = {
   block: BlockWithChildren<ToDoBlockObjectResponse>;

src/components/notion/blocks/ToDo/ToDo.tsx

@@ -1,14 +1,15 @@
 import type { ToDoBlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { FC } from 'react';
+import type { BlockWithChildren } from "~/types/notion";
 
 import { CheckedBoxIcon, UnCheckedBoxIcon } from '~/commons/icons';
 import { RichText } from '~/components/notion/RichText';
 
 type Props = {
-  block: ToDoBlockObjectResponse;
+  block: BlockWithChildren<ToDoBlockObjectResponse>;
 };
 
-export const ToDo: FC<Props> = ({ block }) => {
+export const ToDo: FC<Props> = ({ block }: Props) => {
   return (
     <li className="flex list-none items-center">
       <input

src/components/notion/blocks/Toggle.tsx

@@ -2,8 +2,7 @@ import type { ToggleBlockObjectResponse } from "@notionhq/client/build/src/api-e
 import type { BlockWithChildren } from '~/types/notion';
 
 import { NotionBlock } from '~/components/notion';
-
-import { RichText } from "../RichText";
+import { RichText } from '~/components/notion/RichText';
 
 type Props = {
   block: BlockWithChildren<ToggleBlockObjectResponse>;