diff --git a/src/pages/test/[slug].tsx b/src/pages/test/[slug].tsx index afda2c2..16c078e 100644 --- a/src/pages/test/[slug].tsx +++ b/src/pages/test/[slug].tsx @@ -36,6 +36,27 @@ function Heading({ text, level }: { text: string, level: number }) { } } +function Column({ blocksData }: { blocksData: Block[][] }) { + if (blocksData.length === 0) return null; + + return ( +
+ {blocksData.map((blocks, i) => { + return (
{blocks.map(block => { + switch (block.type) { + case 'paragraph': + return + case 'header': + return + default: + return null; + } + })}
) + })} +
+ ) +} + type ParagraphBlock = { type: 'paragraph', data: { @@ -53,7 +74,15 @@ type HeaderBlock = { id: string, } -type Block = ParagraphBlock | HeaderBlock; +type ColumnBlock = { + type: 'column', + data: { + blocksData: Block[][], + }, + id: string, +} + +type Block = ParagraphBlock | HeaderBlock | ColumnBlock; type Content = { blocks: Block[], @@ -73,6 +102,8 @@ export default function Page({ data }: { slug: string, data: PagesRecord case 'header': return + case 'column': + return default: return

Unknown block type:

{JSON.stringify(block, null, 2)}

} diff --git a/src/pages/test/editor.tsx b/src/pages/test/editor.tsx index 2260b34..b4163f2 100644 --- a/src/pages/test/editor.tsx +++ b/src/pages/test/editor.tsx @@ -9,7 +9,7 @@ const ReactEditorJS = dynamic(() => import('@/components/ReactEditor'), { ssr: false }) -export default function Editor({data: pbData}: {data: OutputData}) { +export default function Editor({data: pbData, slug, title}: {data: OutputData, slug: string, title: string}) { const [data, setData] = useState(pbData); const {mutate, isLoading, data: data2, isError} = api.pages.updatePage.useMutation(); @@ -18,14 +18,14 @@ export default function Editor({data: pbData}: {data: OutputData}) { const handleSubmit = () => { if (!data) return mutate({ - slug: 'test', - title: 'Test', + slug, + title, content: data }) } return ( - + {isLoading &&

Loading...

} {data2 && !isError &&

Saved!

} @@ -53,7 +53,9 @@ export async function getServerSideProps({query}: {query: {[key: string]: string return { props: { - data: data.data.content + data: data.data.content, + slug: query.page, + title: data.data.title } } }