@tscircuit/fake-snippets 0.0.65 → 0.0.67

package/fake-snippets-api/routes/api/order_quotes/create.ts

@@ -4,29 +4,10 @@ import { z } from "zod"
 export default withRouteSpec({
   methods: ["POST"],
   auth: "session",
-  jsonBody: z
-    .object({
-      package_release_id: z.string().optional(),
-      circuit_json: z.any().optional(),
-      vendor_name: z.string(),
-    })
-    .superRefine((data, ctx) => {
-      if (data.circuit_json && data.package_release_id) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message:
-            "You must provide either circuit_json or package_release_id, but not both.",
-        })
-      }
-      if (!data.circuit_json && !data.package_release_id) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message:
-            "You must provide either circuit_json or package_release_id.",
-        })
-      }
-    }),
-
+  jsonBody: z.object({
+    package_release_id: z.string(),
+    vendor_name: z.literal("jlcpcb"),
+  }),
   jsonResponse: z.object({
     order_quote_id: z.string().optional(),
     error: z
@@ -37,22 +18,34 @@ export default withRouteSpec({
       .optional(),
   }),
 })(async (req, ctx) => {
-  const { package_release_id, vendor_name, circuit_json } = req.jsonBody
+  const { package_release_id, vendor_name } = req.jsonBody
+
+  // check package release exists
+  const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
+  if (!packageRelease) {
+    return ctx.json(
+      {
+        error: {
+          error_code: "package_release_not_found",
+          message: "Package release not found",
+        },
+      },
+      { status: 404 },
+    )
+  }
 
-  if (package_release_id) {
-    // check package release exists
-    const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
-    if (!packageRelease) {
-      return ctx.json(
-        {
-          error: {
-            error_code: "package_release_not_found",
-            message: "Package release not found",
-          },
+  const packageReleaseFiles =
+    ctx.db.getPackageFilesByReleaseId(package_release_id)
+  if (packageReleaseFiles.length === 0) {
+    return ctx.json(
+      {
+        error: {
+          error_code: "package_release_files_not_found",
+          message: "Package release files not found",
         },
-        { status: 404 },
-      )
-    }
+      },
+      { status: 404 },
+    )
   }
 
   const orderQuoteId = ctx.db.addOrderQuote({

package/fake-snippets-api/routes/api/order_quotes/get.ts

@@ -9,8 +9,7 @@ export default withRouteSpec({
     order_quote_id: z.string(),
   }),
   jsonResponse: z.object({
-    order_quote: orderQuoteSchema.optional(),
-    error: z.string().optional(),
+    order_quote: orderQuoteSchema,
   }),
 })(async (req, ctx) => {
   const { order_quote_id } = req.commonParams
@@ -18,12 +17,10 @@ export default withRouteSpec({
   const orderQuote = ctx.db.getOrderQuoteById(order_quote_id)
 
   if (!orderQuote) {
-    return ctx.json(
-      {
-        error: "Order quote not found",
-      },
-      { status: 404 },
-    )
+    return ctx.error(404, {
+      error_code: "order_quote_not_found",
+      message: "Order quote not found",
+    })
   }
 
   return ctx.json({

package/fake-snippets-api/routes/api/packages/images/[owner_github_username]/[unscoped_name]/[view_format].ts

@@ -11,9 +11,9 @@ import { z } from "zod"
 const VIEW_TYPES = ["schematic", "pcb", "assembly", "3d"] as const
 const EXTENSIONS = ["svg", "png"] as const
 
-// Create a regex pattern for the view format
+// Create a regex pattern for the view format that includes optional width suffix
 const viewFormatPattern = new RegExp(
-  `^(${VIEW_TYPES.join("|")})\\.(${EXTENSIONS.join("|")})$`,
+  `^(${VIEW_TYPES.join("|")})-?(\\d+w)?\\.(${EXTENSIONS.join("|")})$`,
 )
 
 export default withRouteSpec({
@@ -23,7 +23,7 @@ export default withRouteSpec({
     owner_github_username: z.string(),
     unscoped_name: z.string(),
     view_format: z.string().regex(viewFormatPattern, {
-      message: `Invalid view format. Must be one of: ${VIEW_TYPES.join(", ")}.${EXTENSIONS.join(" or ")}`,
+      message: `Invalid view format. Must be one of: ${VIEW_TYPES.join(", ")} with optional width suffix (e.g. -800w).${EXTENSIONS.join(" or ")}`,
     }),
   }),
   queryParams: z.object({

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tscircuit/snippets"
+    "url": "https://github.com/tscircuit/tscircuit.com"
   },
   "main": "dist/index.js",
   "exports": {
@@ -24,6 +24,7 @@
     "preview": "vite preview",
     "format": "biome format --write .",
     "lint": "biome format .",
+    "build:vite:analyze": "VITE_BUNDLE_ANALYZE=true vite build",
     "build:fake-api:tsup": "tsup-node ./fake-snippets-api/lib/index.ts --format esm --dts",
     "build:fake-api:bundle": "winterspec bundle -o dist/bundle.js",
     "build:fake-api": "bun run build:fake-api:tsup && bun run build:fake-api:bundle && bun run build:fake-api:schema",
@@ -70,7 +71,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tscircuit/3d-viewer": "^0.0.142",
-    "@tscircuit/eval": "^0.0.170",
+    "@tscircuit/eval": "^0.0.198",
     "@tscircuit/footprinter": "^0.0.124",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
@@ -85,7 +86,7 @@
     "change-case": "^5.4.4",
     "circuit-json": "^0.0.164",
     "circuit-json-to-bom-csv": "^0.0.6",
-    "circuit-json-to-gerber": "^0.0.19",
+    "circuit-json-to-gerber": "^0.0.21",
     "circuit-json-to-pnp-csv": "^0.0.6",
     "circuit-json-to-readable-netlist": "^0.0.8",
     "circuit-json-to-tscircuit": "^0.0.4",
@@ -127,6 +128,7 @@
     "recharts": "^2.12.7",
     "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
+    "schematic-symbols": "^0.0.132",
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
     "states-us": "^1.1.1",
@@ -146,7 +148,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.384",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.427",
+    "@tscircuit/runframe": "^0.0.461",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/App.tsx

@@ -49,7 +49,6 @@ const lazyImport = (importFn: () => Promise<any>) =>
     }
   })
 
-const AiPage = lazyImport(() => import("@/pages/ai"))
 const AuthenticatePage = lazyImport(() => import("@/pages/authorize"))
 const DashboardPage = lazyImport(() => import("@/pages/dashboard"))
 const EditorPage = lazyImport(async () => {
@@ -68,7 +67,6 @@ const SearchPage = lazyImport(() => import("@/pages/search"))
 const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
 const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
-const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const BetaPage = lazyImport(() => import("@/pages/beta"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
@@ -119,7 +117,6 @@ function App() {
             <Route path="/legacy-editor" component={EditorPage} />
             <Route path="/quickstart" component={QuickstartPage} />
             <Route path="/dashboard" component={DashboardPage} />
-            <Route path="/ai" component={AiPage} />
             <Route path="/latest" component={LatestPage} />
             <Route path="/settings" component={SettingsPage} />
             <Route path="/search" component={SearchPage} />
@@ -131,10 +128,6 @@ function App() {
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
-            <Route
-              path="/snippets/:author/:snippetName"
-              component={ViewSnippetPage}
-            />
             <Route component={lazyImport(() => import("@/pages/404"))} />
           </Switch>
         </Suspense>

package/src/ContextProviders.tsx

@@ -3,6 +3,7 @@ import { HelmetProvider } from "react-helmet-async"
 import { useEffect } from "react"
 import { useGlobalStore } from "./hooks/use-global-store"
 import { posthog } from "./lib/posthog"
+import { Toaster } from "react-hot-toast"
 
 const staffGithubUsernames = [
   "imrishabh18",
@@ -61,6 +62,7 @@ export const ContextProviders = ({ children }: any) => {
       <HelmetProvider>
         <PostHogIdentifier />
         {children}
+        <Toaster />
       </HelmetProvider>
     </QueryClientProvider>
   )

package/src/components/DownloadButtonAndMenu.tsx

@@ -83,10 +83,7 @@ export function DownloadButtonAndMenu({
             className="text-xs"
             onClick={async () => {
               try {
-                await downloadGltf(
-                  circuitJson,
-                  snippetUnscopedName || "circuit",
-                )
+                await downloadGltf(snippetUnscopedName || "circuit")
               } catch (error: any) {
                 toast({
                   title: "Error Downloading 3D Model",

package/src/components/ErrorTabContent.tsx

@@ -104,7 +104,7 @@ ${errorMessage}
               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)}`,
+              `https://github.com/tscircuit/tscircuit.com/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`,
               "_blank",
             )
           }}

package/src/components/Footer.tsx

@@ -57,10 +57,13 @@ export default function Footer() {
             <h3 className="font-semibold uppercase">Explore</h3>
             <footer className="flex flex-col space-y-2">
               <PrefetchPageLink href="/latest" className="hover:underline">
-                Latest Snippets
+                Latest Packages
               </PrefetchPageLink>
               <PrefetchPageLink href="/trending" className="hover:underline">
-                Trending Snippets
+                Trending Packages
+              </PrefetchPageLink>
+              <PrefetchPageLink href="/search" className="hover:underline">
+                Search Packages
               </PrefetchPageLink>
               <a href="https://docs.tscircuit.com" className="hover:underline">
                 Docs

package/src/components/HeaderLogin.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React from "react"
 import { Button } from "@/components/ui/button"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
@@ -7,39 +7,19 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { Link, useLocation, useRouter } from "wouter"
 import { User } from "lucide-react"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useAccountBalance } from "@/hooks/use-account-balance"
-import { useIsUsingFakeApi } from "@/hooks/use-is-using-fake-api"
 import { useSignIn } from "@/hooks/use-sign-in"
 
-interface HeaderLoginProps {}
-
-export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
-  const [, setLocation] = useLocation()
+export const HeaderLogin = () => {
   const session = useGlobalStore((s) => s.session)
   const isLoggedIn = Boolean(session)
   const setSession = useGlobalStore((s) => s.setSession)
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
-  const isUsingFakeApi = useIsUsingFakeApi()
   const signIn = useSignIn()
   const { data: accountBalance } = useAccountBalance()
 
   if (!isLoggedIn) {
-    const handleLogin = () => {
-      if (isUsingFakeApi) {
-        setSession({
-          account_id: "account-1234",
-          github_username: "testuser",
-          token: "1234",
-          session_id: "session-1234",
-        })
-      } else {
-        signIn()
-      }
-    }
     return (
       <div className="flex items-center md:space-x-2 justify-end">
         <Button onClick={() => signIn()} variant="ghost">
@@ -51,44 +31,47 @@ export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
   }
 
   return (
-    <div className="flex justify-end items-center">
-      <DropdownMenu>
-        <DropdownMenuTrigger>
-          <Avatar className="w-8 h-8 login-avatar">
-            <AvatarImage
-              src={`https://github.com/${session?.github_username}.png`}
-              alt={`${session?.github_username}'s profile picture`}
-            />
-            <AvatarFallback aria-label="User avatar fallback">
-              <User size={16} aria-hidden="true" />
-            </AvatarFallback>
-          </Avatar>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem className="text-gray-500 text-xs" disabled>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Avatar className="w-8 h-8 login-avatar">
+          <AvatarImage
+            src={`https://github.com/${session?.github_username}.png`}
+            alt={`${session?.github_username}'s profile picture`}
+          />
+          <AvatarFallback aria-label="User avatar fallback">
+            <User size={16} aria-hidden="true" />
+          </AvatarFallback>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
+          <div>
             AI Usage $
             {accountBalance?.monthly_ai_budget_used_usd.toFixed(2) ?? "0.00"} /
             $5.00
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => setLocation(`/${session?.github_username}`)}
-          >
+          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href={`/${session?.github_username}`} className="cursor-pointer">
             My Profile
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setLocation("/dashboard")}>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href="/dashboard" className="cursor-pointer">
             Dashboard
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setLocation("/my-orders")}>
-            My Orders
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setLocation("/settings")}>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <a href="/settings" className="cursor-pointer">
             Settings
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => setSession(null)}>
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild onClick={() => setSession(null)}>
+          <a href="/sign-out" className="cursor-pointer">
             Sign out
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }

package/src/components/ImageWithFallback.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react"
+
+interface ImageWithFallbackProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string
+  alt: string
+  className?: string
+  fallbackSrc?: string
+}
+
+export function ImageWithFallback({
+  src,
+  alt,
+  className = "",
+  fallbackSrc = "/assets/fallback-image.svg",
+  ...props
+}: ImageWithFallbackProps) {
+  const [loading, setLoading] = useState(true)
+  const [currentSrc, setCurrentSrc] = useState(src)
+
+  return (
+    <img
+      src={currentSrc}
+      alt={alt}
+      className={`object-contain h-full w-full ${
+        loading ? "animate-pulse bg-gray-200" : ""
+      } ${className}`}
+      onLoad={() => setLoading(false)}
+      onError={() => {
+        console.error("PCB image failed to load:", src)
+        setCurrentSrc(fallbackSrc)
+        setLoading(false)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/JLCPCBImportDialog.tsx

@@ -27,6 +27,9 @@ export function JLCPCBImportDialog({
   const [partNumber, setPartNumber] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [alreadyImportedPackageId, setAlreadyImportedPackageId] = useState<
+    string | null
+  >(null)
   const axios = useAxios()
   const { toast } = useToast()
   const [, navigate] = useLocation()
@@ -45,29 +48,20 @@ export function JLCPCBImportDialog({
 
     setIsLoading(true)
     setError(null)
+    setAlreadyImportedPackageId(null)
+
     try {
-      // Check that module doesn't already exist
-      const existingSnippetRes = await axios.get(
+      const existingPackageRes = await axios.get(
         `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`,
         {
           validateStatus: (status) => true,
         },
       )
 
-      if (existingSnippetRes.status !== 404) {
-        toast({
-          title: "JLCPCB Part Already Imported",
-          description: (
-            <div>
-              <PrefetchPageLink
-                className="text-blue-500 hover:underline"
-                href={`/editor?package_id=${existingSnippetRes.data.snippet.snippet_id}`}
-              >
-                View {partNumber}
-              </PrefetchPageLink>
-            </div>
-          ),
-        })
+      if (existingPackageRes.status !== 404) {
+        const packageId = existingPackageRes.data.snippet.snippet_id
+        setAlreadyImportedPackageId(packageId)
+        setIsLoading(false)
         return
       }
 
@@ -76,16 +70,20 @@ export function JLCPCBImportDialog({
           jlcpcb_part_number: partNumber,
         })
         .catch((e) => e)
+
       const { snippet, error } = response.data
+
       if (error) {
         setError(error.message)
         setIsLoading(false)
         return
       }
+
       toast({
         title: "Import Successful",
         description: "JLCPCB component has been imported successfully.",
       })
+
       onOpenChange(false)
       navigate(`/editor?package_id=${snippet.snippet_id}`)
     } catch (error) {
@@ -121,10 +119,17 @@ export function JLCPCBImportDialog({
             className="mt-3"
             placeholder="Enter JLCPCB part number (e.g., C46749)"
             value={partNumber}
-            onChange={(e) => setPartNumber(e.target.value)}
+            onChange={(e) => {
+              setPartNumber(e.target.value)
+              setError(null)
+              setAlreadyImportedPackageId(null)
+            }}
           />
-          {error && <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>}
-          {error && (
+          {error && !alreadyImportedPackageId && (
+            <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
+          )}
+
+          {error && !alreadyImportedPackageId && (
             <div className="flex justify-end mt-2">
               <Button
                 variant="default"
@@ -132,21 +137,35 @@ export function JLCPCBImportDialog({
                   const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
                   const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
                   const issueLabels = "snippets,good first issue"
-                  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(issueTitle)}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
-
-                  // Open the issue in a new tab
+                  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
+                    issueTitle,
+                  )}&body=${encodeURIComponent(
+                    issueBody,
+                  )}&labels=${encodeURIComponent(issueLabels)}`
                   window.open(url, "_blank")
                 }}
               >
-                File Issue on Github (prefilled)
+                File Issue on GitHub (prefilled)
               </Button>
             </div>
           )}
+
+          {alreadyImportedPackageId && (
+            <p className="p-2 mt-2 pre-wrap text-md text-green-600">
+              This part number has already been imported to your profile.{" "}
+              <PrefetchPageLink
+                className="text-blue-500 hover:underline"
+                href={`/${session?.github_username}/${partNumber}`}
+              >
+                View it here
+              </PrefetchPageLink>
+            </p>
+          )}
         </div>
         <DialogFooter>
           <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
             {!isLoggedIn
-              ? "Must be logged in for jlcpcb import"
+              ? "You must be logged in to import from JLCPCB"
               : isLoading
                 ? "Importing..."
                 : "Import"}

package/src/components/PackageCard.tsx

@@ -10,9 +10,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { OptimizedImage } from "./OptimizedImage"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
+import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
+import { ImageWithFallback } from "./ImageWithFallback"
 
 export interface PackageCardProps {
   /** The package data to display */
@@ -56,6 +57,10 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     }
   }
 
+  const fsMapHash = useGetFsMapHashForPackage(
+    pkg.latest_package_release_id ?? "",
+  )
+
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -64,8 +69,12 @@ export const PackageCard: React.FC<PackageCardProps> = ({
         <div
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
         >
-          <OptimizedImage
-            src={`${baseUrl}/snippets/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg`}
+          <ImageWithFallback
+            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
+              {
+                fs_sha: fsMapHash ?? "",
+              },
+            ).toString()}`}
             alt={`${pkg.unscoped_name} PCB image`}
             className={`object-cover h-full w-full ${imageTransform}`}
           />

package/src/components/{SnippetLink.tsx → PackageLink.tsx}

@@ -1,35 +1,27 @@
 import { Link } from "wouter"
 import { Star } from "lucide-react"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
-export const SnippetLink = ({
-  snippet,
-}: {
-  snippet: {
-    owner_name: string
-    name: string
-    unscoped_name: string
-    star_count?: number
-  }
-}) => {
+export const PackageLink = (pkg: Package) => {
   return (
     <>
       <Link
         className="text-blue-500 font-semibold hover:underline"
-        href={`/${snippet.owner_name}`}
+        href={`/${pkg.owner_github_username}`}
       >
-        {snippet.owner_name}
+        {pkg.owner_github_username}
       </Link>
       <span className="px-0.5 text-gray-500">/</span>
       <Link
         className="text-blue-500  font-semibold hover:underline"
-        href={`/${snippet.name}`}
+        href={`/${pkg.unscoped_name}`}
       >
-        {snippet.unscoped_name}
+        {pkg.unscoped_name}
       </Link>
-      {snippet.star_count !== undefined && (
+      {pkg.star_count !== undefined && (
         <span className="ml-2 text-gray-500 text-xs flex items-center">
           <Star className="w-3 h-3 mr-1" />
-          {snippet.star_count}
+          {pkg.star_count}
         </span>
       )}
     </>