pro view

Author: felixfeng33

apps/www/content/docs/(plugins)/(ai)/ai.mdx

@@ -8,7 +8,7 @@ docs:
 
 
 
-<BlockDisplay name="ai-demo" />
+{/* <BlockDisplay name="ai-demo" /> */}
 
 
-{/* <ComponentPreviewPro name="ai-pro" /> */}
+<ComponentPreviewPro name="ai-pro" />

apps/www/src/components/block-display.tsx

@@ -1,56 +1,26 @@
 import * as React from "react"
 
-import type { registryItemFileSchema } from "shadcn/registry"
+import type { RegistryItem, registryItemFileSchema } from "shadcn/registry"
 import type { z } from "zod"
 
-import { Index } from "@/__registry__"
 import { BlockViewer } from "@/components/block-viewer"
 import { ComponentPreview } from "@/components/component-preview"
 import { highlightCode } from "@/lib/highlight-code"
 import { createFileTreeForRegistryItemFiles, getRegistryItem } from "@/lib/rehype-utils"
 import { cn } from "@/lib/utils"
 
-import { Icons } from "./icons"
 
-export async function BlockDisplay({ align, name, padding, ...props }: { id: string, name: string, align?: string, padding?: string, }) {
-  const item = await getCachedRegistryItem(name)
+export async function BlockDisplay({ item: itemProp, name, ...props }: { id: string, item: RegistryItem; name: string, block?: boolean, }) {
+  const item = itemProp ?? await getCachedRegistryItem(name)
 
-
-  const Preview = () => {
-    const Component = Index[name]?.component;
-
-    if (!Component) {
-      return (
-        <p className="text-sm text-muted-foreground">
-          Component{' '}
-          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
-            {name}
-          </code>{' '}
-          not found in registry.
-        </p>
-      );
-    }
-
-    // DIFF
-    return <Component {...props} id={props.id ?? name.replace('-demo', '')} />;
-  }
-
-  const loadingPreview = (
-    <div className="preview flex size-full min-h-[350px] items-center justify-center p-0 text-sm text-muted-foreground">
-      <Icons.spinner className="mr-2 size-4 animate-spin" />
-      Loading...
-    </div>
-  );
-
-
-  if (!item?.files) {
+  if (!item?.files && !item.meta?.isPro) {
     return null
   }
 
-  const [tree, highlightedFiles] = await Promise.all([
+  const [tree, highlightedFiles] = item.files ? await Promise.all([
     getCachedFileTree(item.files),
     getCachedHighlightedFiles(item.files),
-  ])
+  ]) : [null, null]
 
   return (
     <BlockViewer highlightedFiles={highlightedFiles} item={item} tree={tree}

apps/www/src/components/block-viewer.tsx

@@ -202,14 +202,19 @@ function BlockViewerToolbar() {
   )
 }
 
-function BlockViewerIframe({ preview }: { preview?: React.ReactNode; }) {
+function BlockViewerIframe() {
   const { iframeKey, item } = useBlockViewer()
 
+  console.log("🚀 ~ BlockViewerIframe ~ item:", item)
+
 
   const Preview = React.useMemo(() => {
+
+    if(item.meta?.isPro) return null
+
     const Component = Index[item.name]?.component;
 
-    if (!Component) {
+    if (!Component ) {
       return (
         <p className="text-sm text-muted-foreground">
           Component{' '}
@@ -223,7 +228,7 @@ function BlockViewerIframe({ preview }: { preview?: React.ReactNode; }) {
 
     // DIFF
     return <Component id={item.name.replace('-demo', '')} key={iframeKey} />;
-  }, [item.name, iframeKey]);
+  }, [item.name, item.meta?.isPro, iframeKey]);
 
   return (
     Preview ?? <iframe
@@ -237,7 +242,7 @@ function BlockViewerIframe({ preview }: { preview?: React.ReactNode; }) {
   )
 }
 
-function BlockViewerView({ preview }: { preview?: React.ReactNode; }) {
+function BlockViewerView() {
   const { resizablePanelRef } = useBlockViewer()
 
   return (
@@ -254,7 +259,7 @@ function BlockViewerView({ preview }: { preview?: React.ReactNode; }) {
             defaultSize={100}
             minSize={30}
           >
-            <BlockViewerIframe preview={preview} />
+            <BlockViewerIframe />
           </ResizablePanel>
           <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
           <ResizablePanel defaultSize={0} minSize={0} />
@@ -485,7 +490,7 @@ function BlockViewer({
       {...props}
     >
       <BlockViewerToolbar />
-      <BlockViewerView preview={preview} />
+      <BlockViewerView />
       <BlockViewerCode />
       <BlockViewerMobile>{children}</BlockViewerMobile>
     </BlockViewerProvider>

apps/www/src/components/component-preview-pro.tsx

@@ -1,12 +1,11 @@
-'use client';
-
 import * as React from 'react';
 
-import { BlockViewer } from '@/components/block-viewer';
 import { Markdown } from '@/components/markdown';
 import { siteConfig } from '@/config/site';
 import { cn } from '@/lib/utils';
 
+import { BlockDisplay } from './block-display';
+
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   id: string;
   description?: string;
@@ -31,11 +30,11 @@ export function ComponentPreviewPro({
       {...props}
     >
       {description && <Markdown>{description}</Markdown>}
-
-      <BlockViewer
+123
+      <BlockDisplay
+        id={id}
+        name={name ?? ''}
         block={false}
-        dependencies={[]}
-        highlightedFiles={[]}
         item={{
           meta: {
             descriptionSrc: siteConfig.links.plateProExample(id),
@@ -45,7 +44,6 @@ export function ComponentPreviewPro({
           name: id,
           type: 'registry:example',
         }}
-        tree={[]}
       />
     </div>
   );