@tscircuit/fake-snippets 0.0.1

package/src/pages/editor.tsx

@@ -0,0 +1,28 @@
+import { CodeAndPreview } from "@/components/CodeAndPreview"
+import Footer from "@/components/Footer"
+import Header from "@/components/Header"
+import { useCurrentSnippetId } from "@/hooks/use-current-snippet-id"
+import { useSnippet } from "@/hooks/use-snippet"
+
+export const EditorPage = () => {
+  const { snippetId } = useCurrentSnippetId()
+  const { data: snippet, isLoading, error } = useSnippet(snippetId)
+
+  return (
+    <div>
+      <Header />
+      {!error && <CodeAndPreview snippet={snippet} />}
+      {error && error.status === 404 && (
+        <div className="w-full h-[calc(100vh-20rem)] text-xl text-center flex justify-center items-center">
+          Snippet not found
+        </div>
+      )}
+      {error && error.status !== 404 && (
+        <div className="flex flex-col">
+          Something strange happened<div>{error.message}</div>
+        </div>
+      )}
+      <Footer />
+    </div>
+  )
+}

package/src/pages/landing.tsx

@@ -0,0 +1,236 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { OptimizedImage } from "@/components/OptimizedImage"
+import {
+  CircuitBoard,
+  Code2,
+  Cpu,
+  Layers,
+  CloudLightningIcon as Lightning,
+  Maximize2,
+  Zap,
+} from "lucide-react"
+import { Helmet } from "react-helmet"
+import { Header2 } from "@/components/Header2"
+import Footer from "@/components/Footer"
+import { useSignIn } from "@/hooks/use-sign-in"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { navigate } from "wouter/use-browser-location"
+import { FAQ } from "@/components/FAQ"
+import { TrendingSnippetCarousel } from "@/components/TrendingSnippetCarousel"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+
+export function LandingPage() {
+  const signIn = useSignIn()
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Helmet>
+        <link rel="preconnect" href="https://img.shields.io" />
+        <link rel="dns-prefetch" href="https://img.shields.io" />
+
+        <link rel="preconnect" href="https://shields.io" />
+        <link rel="dns-prefetch" href="https://shields.io" />
+
+        <link rel="preconnect" href="https://tscircuit.com" />
+        <link rel="dns-prefetch" href="https://tscircuit.com" />
+
+        <link rel="preconnect" href="https://registry-api.tscircuit.com" />
+        <link rel="dns-prefetch" href="https://registry-api.tscircuit.com" />
+      </Helmet>
+      <Header2 />
+      <main className="flex-1">
+        <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48">
+          <div className="container px-4 md:px-6 mx-auto">
+            <div className="container mx-auto max-w-7xl">
+              <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
+                <div className="flex flex-col justify-center space-y-4">
+                  <div className="space-y-2">
+                    <Badge variant="secondary" className="w-fit">
+                      Open-Source, MIT Licensed
+                    </Badge>
+                    <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
+                      The New Foundation for Electronic Design
+                    </h1>
+                    <p className="max-w-[600px] text-muted-foreground md:text-xl">
+                      Build electronics with code, AI, and drag'n'drop tools.
+                      <br />
+                      Render code into schematics, PCBs, 3D, fabrication files,
+                      and more.
+                    </p>
+                  </div>
+                  <div className="flex flex-col items-center gap-2 min-[400px]:flex-row">
+                    <Button
+                      onClick={() => {
+                        if (!isLoggedIn) {
+                          signIn()
+                        } else {
+                          navigate("/dashboard")
+                        }
+                      }}
+                      size="lg"
+                      aria-label="Get started with TSCircuit"
+                    >
+                      Get Started
+                    </Button>
+                    <PrefetchPageLink href="/quickstart">
+                      <Button
+                        size="lg"
+                        variant="outline"
+                        aria-label="Open online example of TSCircuit"
+                      >
+                        Open Online Example
+                      </Button>
+                    </PrefetchPageLink>
+                    <a
+                      href="https://github.com/tscircuit/tscircuit"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img
+                        alt="GitHub stars"
+                        src="https://img.shields.io/github/stars/tscircuit/tscircuit?style=social"
+                      />
+                    </a>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4 sm:flex items-center w-full text-sm">
+                    <div className="flex items-center space-x-1">
+                      <Zap className="h-4 w-4" />
+                      <span>Lightning Fast Autorouting</span>
+                    </div>
+                    <div className="flex items-center space-x-1">
+                      <Cpu className="h-4 w-4" />
+                      <span>Designed for AI</span>
+                    </div>
+                    <div className="flex items-center space-x-1">
+                      <Layers className="h-4 w-4" />
+                      <span>Export &amp; Manufacture</span>
+                    </div>
+                    <div className="flex items-center space-x-1 sm:hidden">
+                      <Code2 className="h-4 w-4" />
+                      <span>Open Web Standards</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full aspect-video relative">
+                  <OptimizedImage
+                    alt="Product preview"
+                    className="mx-auto overflow-hidden rounded-xl object-cover object-center absolute inset-0 w-full h-full"
+                    src="/assets/editor_example_1_more_square.webp"
+                    priority={true}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <TrendingSnippetCarousel />
+        <section
+          className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800"
+          id="features"
+        >
+          <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">
+                  The Modern Toolkit for Electronic Design
+                </h2>
+                <p className="max-w-[900px] text-muted-foreground md:text-xl">
+                  Typescript and React equipped with expertly-designed web-first
+                  electronics libraries
+                </p>
+              </div>
+            </div>
+            <div className="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-3">
+              <Card className="hover:shadow-lg transition-shadow duration-200 h-full">
+                <CardContent className="p-6">
+                  <Lightning className="h-12 w-12 mb-4" />
+                  <h3 className="text-xl font-bold">Version Control</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Collaborate on Github or wherever you keep source code.
+                    Utilize industry-standard continuous integration tooling
+                  </p>
+                </CardContent>
+              </Card>
+              <Card className="hover:shadow-lg transition-shadow duration-200 h-full">
+                <CardContent className="p-6">
+                  <Cpu className="h-12 w-12 mb-4" />
+                  <h3 className="text-xl font-bold">Robust Autorouting</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Near-instant local and cloud autorouters to give you a
+                    functional circuit board fast
+                  </p>
+                </CardContent>
+              </Card>
+              <Card className="hover:shadow-lg transition-shadow duration-200 h-full">
+                <CardContent className="p-6">
+                  <Maximize2 className="h-12 w-12 mb-4" />
+                  <h3 className="text-xl font-bold">
+                    Export &amp; Manufacture
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    Export to industry-standard formats like Gerber, SPICE
+                    netlists and more
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </section>
+        <div className="md:mt-8">
+          <OptimizedImage
+            alt="Product preview"
+            className="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center"
+            src="/assets/editor_example_2.webp"
+            height={310}
+            width={800}
+          />
+        </div>
+        <FAQ />
+        <div className="md:mt-8">
+          <OptimizedImage
+            alt="Product preview"
+            className="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center"
+            src="/assets/example_schematic.webp"
+            height={310}
+            width={800}
+          />
+        </div>
+        <section className="w-full py-12 md:py-24 lg:py-32 bg-primary" id="cta">
+          <div className="container px-4 md:px-6 mx-auto">
+            <div className="flex flex-col items-center justify-center space-y-4 text-center text-primary-foreground">
+              <div className="space-y-2">
+                <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
+                  Ready to build electronics with code?
+                </h2>
+                <p className="max-w-[600px] text-primary-foreground/80 md:text-xl">
+                  Join hundreds of engineers who are already using tscircuit to
+                  design complex electronics!
+                </p>
+              </div>
+              <div className="flex flex-col gap-2 min-[400px]:flex-row">
+                <Button
+                  onClick={() => {
+                    if (!isLoggedIn) {
+                      signIn()
+                    } else {
+                      navigate("/dashboard")
+                    }
+                  }}
+                  size="lg"
+                  variant="secondary"
+                  aria-label="Get started with TSCircuit now"
+                >
+                  Get Started
+                </Button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+      {/* <Footer2 /> */}
+    </div>
+  )
+}

package/src/pages/my-orders.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Order } from "fake-snippets-api/lib/db/schema"
+import { Link } from "wouter"
+import { Button } from "@/components/ui/button"
+
+export const MyOrdersPage = () => {
+  const axios = useAxios()
+
+  const { data: orders, isLoading } = useQuery<Order[]>(
+    "userOrders",
+    async () => {
+      const response = await axios.get("/orders/list")
+      return response.data.orders
+    },
+  )
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">My Orders</h1>
+        {isLoading ? (
+          <div>Loading orders...</div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {orders?.map((order) => (
+              <div key={order.order_id} className="border p-4 rounded-md">
+                <h3 className="text-lg font-semibold">
+                  Order #{order.order_id}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  Created: {new Date(order.created_at).toLocaleString()}
+                </p>
+                <p className="text-sm text-gray-500">
+                  Status: {order.is_shipped ? "Shipped" : "Processing"}
+                </p>
+                <Link href={`/orders/${order.order_id}`}>
+                  <Button className="mt-2" variant="outline">
+                    View Details
+                  </Button>
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/newest.tsx

@@ -0,0 +1,16 @@
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { LatestSnippets } from "@/components/LatestSnippets"
+
+export const NewestPage = () => {
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Newest Snippets</h1>
+        <LatestSnippets />
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/preview.tsx

@@ -0,0 +1,70 @@
+import { CircuitToSvgWithMouseControl } from "@/components/CircuitToSvgWithMouseControl"
+import { useSnippet } from "@/hooks/use-snippet"
+import { useUrlParams } from "@/hooks/use-url-params"
+import { CadViewer } from "@tscircuit/3d-viewer"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { Loader2 } from "lucide-react"
+
+export const PreviewPage = () => {
+  const urlParams = useUrlParams()
+  const snippetId = urlParams.snippet_id
+  const view = urlParams.view || "pcb"
+  const { data: snippet, isLoading, error } = useSnippet(snippetId)
+
+  if (isLoading) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center text-red-500">
+        Error loading snippet: {error.message}
+      </div>
+    )
+  }
+
+  if (!snippet) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center text-gray-500">
+        Snippet not found
+      </div>
+    )
+  }
+
+  if (!snippet.circuit_json) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center text-gray-500">
+        No circuit data available
+      </div>
+    )
+  }
+
+  const validViews = ["pcb", "3d", "schematic"]
+  if (!validViews.includes(view)) {
+    return (
+      <div className="w-full h-screen">
+        {view === "pcb" && (
+          <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full h-screen">
+      {view === "pcb" && (
+        <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
+      )}
+      {view === "3d" && <CadViewer soup={snippet.circuit_json as any} />}
+      {view === "schematic" && (
+        <CircuitToSvgWithMouseControl
+          circuitJson={snippet.circuit_json as any}
+        />
+      )}
+    </div>
+  )
+}

package/src/pages/quickstart.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { TypeBadge } from "@/components/TypeBadge"
+import { JLCPCBImportDialog } from "@/components/JLCPCBImportDialog"
+import { useNotImplementedToast } from "@/hooks/use-toast"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { cn } from "@/lib/utils"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+
+export const QuickstartPage = () => {
+  const axios = useAxios()
+  const [isJLCPCBDialogOpen, setIsJLCPCBDialogOpen] = useState(false)
+  const toastNotImplemented = useNotImplementedToast()
+  const currentUser = useGlobalStore((s) => s.session?.github_username)
+  const { data: mySnippets, isLoading } = useQuery<Snippet[]>(
+    "userSnippets",
+    async () => {
+      const response = await axios.get(
+        `/snippets/list?owner_name=${currentUser}`,
+      )
+      return response.data.snippets
+    },
+  )
+
+  const blankTemplates = [
+    { name: "Blank Circuit Board", type: "board" },
+    { name: "Blank Circuit Module", type: "package" },
+    { name: "Blank 3D Model", type: "model", disabled: true },
+    { name: "Blank Footprint", type: "footprint", disabled: true },
+  ]
+
+  const templates = [
+    { name: "Blinking LED Board", type: "board" },
+    { name: "USB-C LED Flashlight", type: "board" },
+  ]
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <div className="mb-8 hidden md:block">
+          <h2 className="text-xl font-semibold mb-4">Recent Snippets</h2>
+          {isLoading ? (
+            <div>Loading...</div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              {mySnippets
+                ?.sort(
+                  (a, b) =>
+                    new Date(b.created_at).getTime() -
+                    new Date(a.created_at).getTime(),
+                )
+                .slice(0, 4)
+                .map((snippet) => (
+                  <PrefetchPageLink
+                    key={snippet.snippet_id}
+                    href={`/editor?snippet_id=${snippet.snippet_id}`}
+                  >
+                    <Card className="hover:shadow-md transition-shadow rounded-md">
+                      <CardHeader className="pb-0 p-4">
+                        <CardTitle className="text-md">
+                          {snippet.unscoped_name}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent className="p-4 pt-0">
+                        <p className="text-sm text-gray-500">
+                          Last edited:{" "}
+                          {new Date(snippet.updated_at).toLocaleDateString()}
+                        </p>
+                      </CardContent>
+                    </Card>
+                  </PrefetchPageLink>
+                ))}
+            </div>
+          )}
+        </div>
+
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold mb-4">Start Blank Snippet</h2>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            {blankTemplates.map((template, index) => (
+              <PrefetchPageLink
+                key={index}
+                href={
+                  template.disabled
+                    ? "#"
+                    : `/editor?template=${template.name
+                        .toLowerCase()
+                        .replace(/ /g, "-")}`
+                }
+              >
+                <Card
+                  className={cn(
+                    "hover:shadow-md transition-shadow rounded-md h-full flex flex-col",
+                    template.disabled && "opacity-50 cursor-not-allowed",
+                  )}
+                >
+                  <CardHeader className="p-4 flex-grow flex flex-col justify-between">
+                    <CardTitle className="text-md">{template.name}</CardTitle>
+                    <div className="mt-2 flex">
+                      <TypeBadge type={template.type as any} />
+                    </div>
+                  </CardHeader>
+                </Card>
+              </PrefetchPageLink>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-12">
+          <h2 className="text-xl font-semibold mb-4">Import as Snippet</h2>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            {[
+              { name: "KiCad Footprint", type: "footprint" },
+              { name: "KiCad Project", type: "board" },
+              { name: "KiCad Module", type: "package" },
+            ].map((template, index) => (
+              <Card
+                key={index}
+                className="hover:shadow-md transition-shadow rounded-md opacity-50"
+              >
+                <CardHeader className="p-4 pb-0">
+                  <CardTitle className="text-lg flex items-center justify-between">
+                    {template.name}
+                    <TypeBadge type={template.type as any} className="ml-2" />
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-4">
+                  <Button
+                    className="w-full"
+                    onClick={() => {
+                      toastNotImplemented("Kicad Imports")
+                    }}
+                  >
+                    Import {template.name}
+                  </Button>
+                </CardContent>
+              </Card>
+            ))}
+            <Card className="hover:shadow-md transition-shadow rounded-md">
+              <CardHeader className="p-4 pb-0">
+                <CardTitle className="text-lg flex items-center justify-between">
+                  JLCPCB Component
+                  <TypeBadge type="package" className="ml-2" />
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="p-4">
+                <Button
+                  className="w-full"
+                  onClick={() => setIsJLCPCBDialogOpen(true)}
+                >
+                  Import JLCPCB Component
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <JLCPCBImportDialog
+          open={isJLCPCBDialogOpen}
+          onOpenChange={setIsJLCPCBDialogOpen}
+        />
+
+        <div>
+          <h2 className="text-xl font-semibold mb-4 mt-12">
+            Start from a Template
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            {templates.map((template, index) => (
+              <PrefetchPageLink
+                key={index}
+                href={`/editor?template=${template.name
+                  .toLowerCase()
+                  .replace(/ /g, "-")}`}
+              >
+                <Card className="hover:shadow-md transition-shadow rounded-md">
+                  <CardHeader className="p-4">
+                    <CardTitle className="text-lg flex items-center justify-between">
+                      {template.name}
+                      <TypeBadge type={template.type as any} className="ml-2" />
+                    </CardTitle>
+                  </CardHeader>
+                </Card>
+              </PrefetchPageLink>
+            ))}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/search.tsx

@@ -0,0 +1,26 @@
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+
+export const SearchPage = () => {
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Search Snippets</h1>
+        {/* Add search functionality and results display here */}
+        <input
+          type="text"
+          placeholder="Search snippets..."
+          className="w-full p-2 border rounded mb-4"
+        />
+        <div>
+          {/* Search results will be displayed here */}
+          <p className="text-gray-600">
+            No results found. Try a different search term.
+          </p>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/settings.tsx

@@ -0,0 +1,25 @@
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import ShippingInformationForm from "@/components/ShippingInformationForm"
+
+export const SettingsPage = () => {
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Settings</h1>
+        <div className="flex">
+          <div className="lg:w-1/2 sm:w-full pr-4">
+            <div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+              <h2 className="text-2xl font-semibold mb-4">
+                Shipping Information
+              </h2>
+              <ShippingInformationForm />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}