ui Architecture Docs
Home / File/ code-viewer.tsx — ui Source File

code-viewer.tsx — ui Source File

Architecture documentation for code-viewer.tsx, a tsx file in the ui codebase. 2 imports, 1 dependents.

File tsx ComponentRegistry UIPrimitives 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  48859566_1a54_c160_15d6_ebd1ee91cb56["code-viewer.tsx"]
  aa2f3ec6_f291_3763_88ec_65a3f5ad5939["button"]
  48859566_1a54_c160_15d6_ebd1ee91cb56 --> aa2f3ec6_f291_3763_88ec_65a3f5ad5939
  4dc8bbf9_c114_4bfa_0f89_4ae4ccd0ae1e["dialog"]
  48859566_1a54_c160_15d6_ebd1ee91cb56 --> 4dc8bbf9_c114_4bfa_0f89_4ae4ccd0ae1e
  f546dde4_68c5_f623_9286_65aeda13ccc5["page.tsx"]
  f546dde4_68c5_f623_9286_65aeda13ccc5 --> 48859566_1a54_c160_15d6_ebd1ee91cb56
  style 48859566_1a54_c160_15d6_ebd1ee91cb56 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { Button } from "@/registry/new-york/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/new-york/ui/dialog"

export function CodeViewer() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="secondary">View code</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[625px]">
        <DialogHeader>
          <DialogTitle>View code</DialogTitle>
          <DialogDescription>
            You can use the following code to start integrating your current
            prompt and settings into your application.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4">
          <div className="rounded-md bg-black p-6">
            <pre>
              <code className="grid gap-1 text-sm text-muted-foreground [&_span]:h-4">
                <span>
                  <span className="text-sky-300">import</span> os
                </span>
                <span>
                  <span className="text-sky-300">import</span> openai
                </span>
                <span />
                <span>
                  openai.api_key = os.getenv(
                  <span className="text-green-300">
                    &quot;OPENAI_API_KEY&quot;
                  </span>
                  )
                </span>
                <span />
                <span>response = openai.Completion.create(</span>
                <span>
                  {" "}
                  model=
                  <span className="text-green-300">&quot;davinci&quot;</span>,
                </span>
                <span>
                  {" "}
                  prompt=<span className="text-amber-300">&quot;&quot;</span>,
                </span>
                <span>
                  {" "}
                  temperature=<span className="text-amber-300">0.9</span>,
                </span>
                <span>
                  {" "}
                  max_tokens=<span className="text-amber-300">5</span>,
                </span>
                <span>
                  {" "}
                  top_p=<span className="text-amber-300">1</span>,
                </span>
                <span>
                  {" "}
                  frequency_penalty=<span className="text-amber-300">0</span>,
                </span>
                <span>
                  {" "}
                  presence_penalty=<span className="text-green-300">0</span>,
                </span>
                <span>)</span>
              </code>
            </pre>
          </div>
          <div>
            <p className="text-sm text-muted-foreground">
              Your API Key can be found here. You should use environment
              variables or a secret management tool to expose your key to your
              applications.
            </p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • dialog

Imported By

Source

Frequently Asked Questions

What does code-viewer.tsx do?
code-viewer.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in code-viewer.tsx?
code-viewer.tsx defines 1 function(s): CodeViewer.
What does code-viewer.tsx depend on?
code-viewer.tsx imports 2 module(s): button, dialog.
What files import code-viewer.tsx?
code-viewer.tsx is imported by 1 file(s): page.tsx.
Where is code-viewer.tsx in the architecture?
code-viewer.tsx is located at deprecated/www/app/(app)/examples/playground/components/code-viewer.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: deprecated/www/app/(app)/examples/playground/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free