component-showcase

1import * as React from "react";
2import fs from "fs";
3import path from "path";
4import { CodeBlock } from "@/components/ui/code-block";
5import { CopyButton } from "@/components/ui/copy-button";
6import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
7import { ChevronDown, Terminal, WandSparkles, TerminalSquare, PictureInPicture2 } from "lucide-react";
8import { ComponentDocsSections } from "@/components/docs/component-docs-sections";
9import { FullscreenPreview } from "@/components/ui/fullscreen-preview";
10 
11interface ComponentShowcaseProps {
12  componentName: string; // The exact filename in the registry (without .tsx)
13  title: string;
14  description: string;
15  slug?: string;
16  children: React.ReactNode; // The live component itself
17}
18 
19/**
20 * Read the component source code from the filesystem (server-side only).
21 * Tries multiple candidate directories.
22 * The turbopackIgnore comment prevents Turbopack from tracing the entire project.
23 */
24function readComponentSource(componentName: string): string {
25  const fileName = `${componentName}.tsx`;
26 
27  try {
28    const p1 = path.join(process.cwd(), "src", "components", "ui", fileName);
29    if (fs.existsSync(p1)) return fs.readFileSync(p1, "utf8");
30  } catch {}
31 
32  try {
33    const p2 = path.join(process.cwd(), "src", "registry", fileName);
34    if (fs.existsSync(p2)) return fs.readFileSync(p2, "utf8");
35  } catch {}
36 
37  try {
38    const p3 = path.join(process.cwd(), "src", "components", "docs", fileName);
39    if (fs.existsSync(p3)) return fs.readFileSync(p3, "utf8");
40  } catch {}
41 
42  return `// Source code for ${componentName} not found`;
43}
44 
45export function ComponentShowcase({
46  componentName,
47  title,
48  description,
49  slug = componentName,
50  children,
51}: ComponentShowcaseProps) {
52  const installCommand = `npx shadcn@latest add @vengeanceui/${componentName}`;
53  const sourceCode = readComponentSource(componentName);
54 
55  return (
56    <div className="mb-8 space-y-4">
57      {/* Component Header */}
58      <div id="overview" className="space-y-1 scroll-mt-24">
59        <p className="text-sm font-medium text-neutral-500 dark:text-zinc-500">
60          Components <span className="mx-1 text-neutral-400 dark:text-zinc-700">/</span>
61          <span className="text-neutral-900 dark:text-zinc-200">{title}</span>
62        </p>
63        <h1 className="mb-2 text-3xl font-bold tracking-tight text-neutral-900 dark:text-zinc-100">{title}</h1>
64        <p className="text-neutral-500 dark:text-zinc-400 text-lg">{description}</p>
65// … truncated