block-display.tsx

import * as React from 'react';
import { registryItemFileSchema } from 'shadcn/registry';
import { z } from 'zod';

import { highlightCode } from '@/lib/highlight-code';
import { createFileTreeForRegistryItemFiles, getRegistryItem } from '@/lib/registry';
import { cn } from '@/lib/utils';
import { BlockViewer } from '@/components/common/block-viewer';
import { ComponentPreview } from '@/components/common/component-preview';

export async function BlockDisplay({ name }: { name: string }) {
  const item = await getCachedRegistryItem(name);

  if (!item?.files) {
    return null;
  }

  const [tree, highlightedFiles] = await Promise.all([
    getCachedFileTree(item.files),
    getCachedHighlightedFiles(item.files),
  ]);

  return (
    <BlockViewer item={item} tree={tree} highlightedFiles={highlightedFiles}>
      <ComponentPreview
        name={item.name}
        hideCode
        className={cn(
          'my-0 **:[.preview]:h-auto **:[.preview]:p-4 **:[.preview>.p-6]:p-0',
          item.meta?.containerClassName,
        )}
      />
    </BlockViewer>
  );
}

const getCachedRegistryItem = React.cache(async (name: string) => {
  return await getRegistryItem(name);
});

const getCachedFileTree = React.cache(async (files: Array<{ path: string; target?: string }>) => {
  if (!files) {
    return null;
  }

  return await createFileTreeForRegistryItemFiles(files);
});

const getCachedHighlightedFiles = React.cache(async (files: z.infer<typeof registryItemFileSchema>[]) => {
  return await Promise.all(
    files.map(async (file) => ({
      ...file,
      highlightedContent: await highlightCode(file.content ?? ''),
    })),
  );
});