@tscircuit/fake-snippets 0.0.1

package/src/components/ErrorTabContent.tsx

@@ -0,0 +1,122 @@
+import { GitHubLogoIcon, MagicWandIcon } from "@radix-ui/react-icons"
+import { ClipboardIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useAiApi } from "@/hooks/use-ai-api"
+import { useAsyncMemo } from "use-async-memo"
+import { TextBlock } from "@anthropic-ai/sdk/resources/messages.mjs"
+import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
+
+export const ErrorTabContent = ({
+  code,
+  isStreaming,
+  errorMessage,
+}: {
+  code?: string
+  isStreaming?: boolean
+  errorMessage?: string | null
+}) => {
+  const anthropic = useAiApi()
+  const simplifiedErrorMessage = useAsyncMemo(async () => {
+    if (isStreaming) return ""
+    if (!code) return ""
+    if (!errorMessage) return ""
+    // Only simplify for ZodErrors for now
+    if (!errorMessage.includes("ZodError")) return ""
+    const response = await anthropic.messages.create({
+      model: "claude-3-haiku-20240307",
+      max_tokens: 1000,
+      messages: [
+        {
+          role: "user",
+          content: `
+You are a helpful assistant that simplifies error messages. You only output the rewritten error message.
+
+Here is the code:
+${code}
+
+Here is the error message:
+${errorMessage}
+          `.trim(),
+        },
+      ],
+    })
+    return (response.content[0] as TextBlock).text
+  }, [code, errorMessage, isStreaming])
+
+  if (!errorMessage) {
+    return (
+      <div className="mt-4 bg-green-50 rounded-md border border-green-200">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold text-green-800 mb-3">
+            No Errors 👌
+          </h3>
+          <p className="text-sm text-green-700">
+            Your code is running without any errors.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="mt-4 bg-red-50 rounded-md border border-red-200 max-h-[500px] overflow-y-auto">
+        <div className="p-4">
+          <h3 className="text-lg font-semibold text-red-800 mb-3">Error</h3>
+          <p className="text-xs font-semibold font-mono whitespace-pre-wrap text-red-700">
+            {simplifiedErrorMessage}
+          </p>
+          <p className="text-xs font-mono whitespace-pre-wrap text-red-600 mt-2">
+            {errorMessage}
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-2 mt-4 justify-end">
+        <Button
+          variant="outline"
+          onClick={() => {
+            if (!errorMessage) return
+            navigator.clipboard.writeText(errorMessage)
+            alert("Error copied to clipboard!")
+          }}
+        >
+          <ClipboardIcon className="w-4 h-4 mr-2" />
+          Copy Error
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => {
+            const title = `Error: ${errorMessage
+              .replace("Render Error:", "")
+              .replace(/\"_errors\":\[\]/g, "")
+              .replace(/\{,/g, "{")
+              .replace(/"_errors":\[/g, "")
+              .replace(/[^a-zA-Z0-9 ]/g, " ")
+              .replace(/\s+/g, " ")
+              .replace(/ \d+ /g, " ")
+              .slice(0, 100)}`
+            const url = encodeTextToUrlHash(code ?? "").replace(
+              "http://localhost:5173",
+              "https://snippets.tscircuit.com",
+            )
+            let body = `[Snippet code to reproduce](${url})\n\n### Error\n\`\`\`\n${errorMessage.slice(0, 600)}\n\`\`\``
+            if (body.length > 4000) {
+              body = `\`\`\`tsx\n// Please paste the code here\`\`\`\n\n### Error\n\`\`\`\n${errorMessage.slice(0, 2000)}\n\`\`\``
+            }
+            window.open(
+              `https://github.com/tscircuit/snippets/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`,
+              "_blank",
+            )
+          }}
+        >
+          <GitHubLogoIcon className="w-4 h-4 mr-2" />
+          Report Issue
+        </Button>
+        <Button variant="outline">
+          <MagicWandIcon className="w-4 h-4 mr-2" />
+          Fix with AI
+        </Button>
+      </div>
+    </>
+  )
+}

package/src/components/FAQ.tsx

@@ -0,0 +1,113 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+
+const QUESTIONS = [
+  {
+    question: "Can I use tscircuit commercially?",
+    answer:
+      "You can use tscircuit for commercial purposes. tscircuit is under the same permissive MIT license as Node.js, React, and thousands of other popular projects you are likely already using! ",
+  },
+  {
+    question: "Can I import designs from other software?",
+    answer:
+      "tscircuit has some support for importing designs from other software, but it's not yet fully featured. You should file an issue on our Github if you'd like to see a specific format supported.",
+  },
+  {
+    question: "Can I use tscircuit locally?",
+    answer:
+      "Yes, you can use tscircuit locally using the tscircuit CLI, but we recommend starting with the web-based application for simplicity.",
+  },
+  {
+    question: "Can tscircuit make schematics? Is it extra effort?",
+    answer:
+      "tscircuit always renders both a schematic and PCB. Unlike traditional EDA where the schematic capture and PCB layout are separate processes, tscircuit combines them by allowing a user to specify constraints and automations. This means that you can design a schematic and then immediately see a PCB layout or vice versa.",
+  },
+  {
+    question: "What exactly is tscircuit?",
+    answer:
+      "tscircuit is first and foremost a framework, but it also can be used to refer to the tscircuit platform, the tscircuit company, the tscircuit registry or ecosystem of components and packages for working with tscircuit. When you use tscircuit, you're becoming compatible with a growing ecosystem of web-first electronics technologies.",
+  },
+  {
+    question: "Can I use tscircuit programmatically?",
+    answer: (
+      <span>
+        Yes, use the{" "}
+        <a href="https://github.com/tscircuit/core">@tscircuit/core</a> module
+        to use classes and/or React and build to various formats. If you'd like
+        to dynamically evaluate tscircuit code with automatic import handling,
+        you can use{" "}
+        <a href="https://github.com/tscircuit/eval-webworker">
+          @tscircuit/eval-webworker
+        </a>
+        . You can use{" "}
+        <a href="https://github.com/tscircuit/runframe">@tscircuit/runframe</a>{" "}
+        to any view (schematic, PCB etc.) of your compiled Circuit JSON.
+      </span>
+    ),
+  },
+  {
+    question: "How do I display tscircuit circuits on my website?",
+    answer: (
+      <span>
+        You can use our React components to display tscircuit on a webpage. For
+        simple cases, you can use{" "}
+        <a href="https://github.com/tscircuit/pcb-viewer">
+          @tscircuit/pcb-viewer
+        </a>
+        ,{" "}
+        <a href="https://github.com/tscircuit/schematic-viewer">
+          @tscircuit/schematic-viewer
+        </a>
+        , or{" "}
+        <a href="https://github.com/tscircuit/3d-viewer">
+          @tscircuit/3d-viewer
+        </a>{" "}
+        directly. For more complex use cases,{" "}
+        <a href="https://github.com/tscircuit/runframe">@tscircuit/runframe</a>{" "}
+        is recommended as it provides a unified interface for all viewers.
+      </span>
+    ),
+  },
+  {
+    question: "What is Circuit JSON?",
+    answer: (
+      <span>
+        <a href="https://github.com/tscircuit/circuit-json">Circuit JSON</a> is
+        a JSON format for representing electronic circuits. It is a sort of
+        assembly language electronic circuits. All tscircuit designs are
+        compiled to Circuit JSON as the intermediary format.
+      </span>
+    ),
+  },
+]
+
+export const FAQ = () => (
+  <section className="w-full py-12 md:py-24 lg:py-32" id="faq">
+    <div className="container px-4 md:px-6 mx-auto">
+      <div className="flex flex-col items-center justify-center space-y-4 text-center">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
+            Frequently Asked Questions
+          </h2>
+          <p className="max-w-[900px] text-muted-foreground md:text-xl">
+            Got questions? We've got answers.
+          </p>
+        </div>
+      </div>
+      <div className="mx-auto max-w-3xl space-y-4 py-12">
+        <Accordion type="single" collapsible>
+          {QUESTIONS.map((q, i) => (
+            <AccordionItem key={i} value={`item-${i + 1}`}>
+              <AccordionTrigger>{q.question}</AccordionTrigger>
+              <AccordionContent>{q.answer}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </div>
+  </section>
+)

package/src/components/Footer.tsx

@@ -0,0 +1,134 @@
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { CircuitBoard } from "lucide-react"
+import { Link } from "wouter"
+import { PrefetchPageLink } from "./PrefetchPageLink"
+
+export default function Footer() {
+  const session = useGlobalStore((s) => s.session)
+  const isLoggedIn = Boolean(session)
+
+  return (
+    <footer className="bg-white text-black py-12 border-t mt-8">
+      <div className="container mx-auto px-4">
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <CircuitBoard className="h-6 w-6" />
+            <span className="text-lg font-bold">tscircuit</span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            The New Foundation for Electronic Design
+          </p>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-8 text-sm text-gray-600 mt-8">
+          <div className="space-y-4">
+            <footer className="flex flex-col space-y-2">
+              {[
+                { name: "Home", href: "/" },
+                { name: "Dashboard", href: "/dashboard" },
+                { name: "Editor", href: "/editor" },
+                { name: "Create with AI", href: "/ai" },
+                {
+                  name: "My Profile",
+                  href: `/${session?.github_username}`,
+                  hidden: !isLoggedIn,
+                },
+                { name: "Settings", href: "/settings" },
+              ]
+                .filter((item) => !item.hidden)
+                .map((item) => (
+                  <PrefetchPageLink
+                    key={item.name}
+                    href={item.href}
+                    className="hover:underline"
+                  >
+                    {item.name}
+                  </PrefetchPageLink>
+                ))}
+            </footer>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="font-semibold uppercase">Explore</h3>
+            <footer className="flex flex-col space-y-2">
+              <PrefetchPageLink href="/newest" className="hover:underline">
+                Newest Snippets
+              </PrefetchPageLink>
+              <a href="https://docs.tscircuit.com" className="hover:underline">
+                Docs
+              </a>
+            </footer>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="font-semibold uppercase">Follow</h3>
+            <footer className="flex flex-col space-y-2">
+              <a href="https://blog.tscircuit.com" className="hover:underline">
+                Blog
+              </a>
+              <a href="https://x.com/tscircuit" className="hover:underline">
+                Twitter
+              </a>
+              <a href="https://tscircuit.com/join" className="hover:underline">
+                Discord
+              </a>
+              <a
+                href="https://github.com/tscircuit/tscircuit"
+                className="hover:underline"
+              >
+                GitHub
+              </a>
+              <a
+                href="https://youtube.com/@seveibar"
+                className="hover:underline"
+              >
+                YouTube
+              </a>
+            </footer>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="font-semibold uppercase">Company</h3>
+            <nav className="flex flex-col space-y-2">
+              <a
+                href="https://tscircuit.com/legal/terms-of-service"
+                className="hover:underline"
+              >
+                Terms of Service
+              </a>
+              <a
+                href="https://tscircuit.com/legal/privacy-policy"
+                className="hover:underline"
+              >
+                Privacy Policy
+              </a>
+              <a
+                href="mailto:contact@tscircuit.com"
+                className="hover:underline"
+              >
+                contact@tscircuit.com
+              </a>
+              <div className="flex-grow" />
+              <div className="text-xs text-gray-500">
+                we are inspired by{" "}
+                <a href="https://val.town" className="underline">
+                  val.town
+                </a>
+                ,{" "}
+                <a href="https://codesandbox.io/" className="underline">
+                  codesandbox
+                </a>{" "}
+                and{" "}
+                <a href="https://v0.dev" className="underline">
+                  v0.dev
+                </a>
+              </div>
+              <div className="text-xs text-gray-500">
+                &copy; {new Date().getFullYear()} tscircuit Inc.
+              </div>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/components/Footer2.tsx

@@ -0,0 +1,100 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import {
+  CircuitBoard,
+  Cpu,
+  Layers,
+  CloudLightningIcon as Lightning,
+  Maximize2,
+  Zap,
+} from "lucide-react"
+import { Link } from "wouter"
+import { Header2 } from "@/components/Header2"
+
+export const Footer2 = () => (
+  <footer className="w-full py-6 bg-background">
+    <div className="container px-4 md:px-6 mx-auto">
+      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <CircuitBoard className="h-6 w-6" />
+            <span className="text-lg font-bold">tscircuit</span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Transforming electronic design with AI-powered tools.
+          </p>
+        </div>
+        <div className="space-y-4">
+          <h4 className="text-sm font-bold">Product</h4>
+          <ul className="space-y-2 text-sm">
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Features
+              </Link>
+            </li>
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Pricing
+              </Link>
+            </li>
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Tutorials
+              </Link>
+            </li>
+          </ul>
+        </div>
+        <div className="space-y-4">
+          <h4 className="text-sm font-bold">Company</h4>
+          <ul className="space-y-2 text-sm">
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                About
+              </Link>
+            </li>
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Blog
+              </Link>
+            </li>
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Careers
+              </Link>
+            </li>
+          </ul>
+        </div>
+        <div className="space-y-4">
+          <h4 className="text-sm font-bold">Legal</h4>
+          <ul className="space-y-2 text-sm">
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Privacy
+              </Link>
+            </li>
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Terms
+              </Link>
+            </li>
+            <li>
+              <Link className="text-muted-foreground hover:underline" href="#">
+                Cookie Policy
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="mt-8 border-t pt-8 text-center text-sm text-muted-foreground">
+        © {new Date().getFullYear()} tscircuit. All rights reserved.
+      </div>
+    </div>
+  </footer>
+)