Pros & Cons Block

"use client";

import ProsConsBlock from "@/components/ui/pros-cons";
import { genericBlocks } from "@contentbit/blocks";
import {
  assertValidDocument,
  compileDocument,
  createBlockRegistry,
} from "@contentbit/core";
import { ContentBlocks } from "@contentbit/react";

const markdown = `:::pros-cons
+ Cheap to run on serverless infrastructure
+ Near-instant setup with zero configuration
+ Scales automatically with traffic spikes
- No offline mode for local development
- Cold starts add noticeable latency
:::`;

const registry = createBlockRegistry().use(genericBlocks());
const document = assertValidDocument(
  compileDocument(markdown, registry),
  "pros-cons-demo.md",
);

export default function ProsConsDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl px-4 py-8">
      <ContentBlocks
        document={document}
        components={{ "pros-cons": ProsConsBlock }}
        renderMarkdown={(md) => <p>{md}</p>}
      />
    </div>
  );
}