fix: add pro preview blocks

apps/www/app/(blog)/blog/page.tsx

@@ -30,8 +30,8 @@ export default async function Page({
   const selectedTag = params?.tag ?? "";
 
   const posts = blogSource.getPages().sort((a, b) => {
-    const dateA = new Date(a.data?.publishedOn || 0).getTime();
-    const dateB = new Date(b.data?.publishedOn || 0).getTime();
+    const dateA = new Date(a.data?.publishedOn).getTime();
+    const dateB = new Date(b.data?.publishedOn).getTime();
     return dateB - dateA;
   });
 

apps/www/app/(docs)/blocks/layout.tsx

@@ -0,0 +1,17 @@
+import { DocsSidebar } from "@/components/docs-sidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="container-wrapper flex flex-1 flex-col px-2">
+      <SidebarProvider className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]">
+        <DocsSidebar />
+        <div className="h-full w-full">{children}</div>
+      </SidebarProvider>
+    </div>
+  );
+}

apps/www/app/(docs)/blocks/page.tsx

@@ -0,0 +1,53 @@
+import Link from "next/link";
+
+import { BlockDisplay } from "@/components/block-display";
+import { Button } from "@/components/ui/button";
+
+export const dynamic = "force-static";
+export const revalidate = false;
+
+const FEATURED_BLOCKS = [
+  "animated-feature-card-1",
+  "animated-feature-card-2",
+  "animated-feature-card-3",
+  "animated-feature-card-4",
+  "animated-feature-card-5",
+  "animated-feature-card-6",
+  "animated-feature-card-7",
+  "animated-feature-card-8",
+  "animated-feature-card-9",
+  "animated-feature-card-10",
+  "animated-feature-card-11",
+
+  "feature-1",
+  "footer-1",
+  "faq-3",
+  "header-1",
+  "header-2",
+  "header-3",
+  "hero-1",
+  "hero-2",
+  // "hero-3",
+  // "dashboard-01",
+  // "sidebar-07",
+  // "sidebar-03",
+  // "login-03",
+  // "login-04",
+];
+
+export default async function BlocksPage() {
+  return (
+    <div className="flex flex-col gap-12 md:gap-16">
+      {FEATURED_BLOCKS.map((name) => (
+        <BlockDisplay name={name} key={name} />
+      ))}
+      <div className="container-wrapper">
+        <div className="container flex justify-center py-6">
+          <Button asChild variant="outline">
+            <Link href="/blocks/sidebar">Browse more blocks</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/www/components/block-display.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { registryItemFileSchema } from "shadcn/schema";
+import { z } from "zod";
+
+import { BlockViewer } from "@/components/block-viewer";
+import { ComponentPreview } from "@/components/component-preview";
+import { highlightCode } from "@/lib/highlight-code";
+import {
+  createFileTreeForRegistryItemFiles,
+  getRegistryItem,
+} from "@/lib/registry";
+import { cn } from "@/lib/utils";
+
+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
+      name={name}
+      // item={item}
+      // tree={tree}
+      // highlightedFiles={highlightedFiles}
+    >
+      <ComponentPreview
+        name={name}
+        // 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 ?? ""),
+      })),
+    );
+  },
+);