@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/pages/preview-release.tsx

@@ -1,19 +1,17 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useParams } from "wouter"
 import { Loader2, ChevronLeft, ChevronRight } from "lucide-react"
 import Header from "@/components/Header"
-import { SuspenseRunFrame } from "@/components/SuspenseRunFrame"
-import { TreeView } from "@/components/ui/tree-view"
-import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
 import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import NotFoundPage from "./404"
 import { getBuildStatus } from "@/components/preview"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
-import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
 import { usePackageBuild } from "@/hooks/use-package-builds"
 import { PackageBuild } from "fake-snippets-api/lib/db/schema"
 import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { RunFrameStaticBuildViewer } from "@tscircuit/runframe/runner"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 
 const StatusPill = ({ status }: { status: string }) => {
   const color =
@@ -27,6 +25,17 @@ const StatusPill = ({ status }: { status: string }) => {
   return <span className={cn("inline-block w-2 h-2 rounded-full", color)} />
 }
 
+const fetchCircuitJson = async (fileRef: {
+  filePath: string
+  fileStaticAssetUrl: string
+}): Promise<object> => {
+  const res = await fetch(String(fileRef.fileStaticAssetUrl))
+  const resJson = await res.json()
+  const circuitJson = JSON.parse(resJson.package_file.content_text)
+  console.log(circuitJson)
+  return circuitJson
+}
+
 export default function PreviewBuildPage() {
   const params = useParams<{
     packageReleaseId: string
@@ -38,9 +47,8 @@ export default function PreviewBuildPage() {
   const packageName = params?.packageName || null
 
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
-  const [selectedFile, setSelectedFile] = useState<string | null>("index.tsx")
-  const [selectedItemId, setSelectedItemId] = useState<string>("")
 
+  const apiUrl = useApiBaseUrl()
   const { data: packageRelease, isLoading: isLoadingRelease } =
     usePackageReleaseById(packageReleaseId)
   const { data: pkg, isLoading: isLoadingPackage } = usePackageByName(
@@ -49,12 +57,8 @@ export default function PreviewBuildPage() {
   const { data: build, isLoading: isLoadingBuild } = usePackageBuild(
     packageRelease?.latest_package_build_id || null,
   )
-  const { data: buildFiles = [], isLoading: isLoadingFiles } =
-    usePackageFilesLoader(pkg)
 
-  const buildFsMap = Object.fromEntries(
-    buildFiles.map((f) => [f.path, f.content]),
-  )
+  const isLoading = isLoadingRelease || isLoadingPackage || isLoadingBuild
 
   if (!packageReleaseId) {
     return <NotFoundPage heading="Package Release Not Found" />
@@ -63,29 +67,8 @@ export default function PreviewBuildPage() {
   if (!packageRelease && !isLoadingRelease) {
     return <NotFoundPage heading="Package Release Not Found" />
   }
-  const isLoading =
-    isLoadingRelease || isLoadingPackage || isLoadingFiles || isLoadingBuild
-
-  if (!build && !isLoading) {
-    return <NotFoundPage heading="Package Build Not Found" />
-  }
-
   const { status } = getBuildStatus(build as PackageBuild)
 
-  const treeData = transformFilesToTreeData({
-    files: buildFsMap,
-    currentFile: selectedFile,
-    renamingFile: null,
-    handleRenameFile: () => ({ fileRenamed: false }),
-    handleDeleteFile: () => ({ fileDeleted: false }),
-    setRenamingFile: () => {},
-    onFileSelect: setSelectedFile,
-    onFolderSelect: () => {},
-    canModifyFiles: false,
-    setErrorMessage: () => {},
-    setSelectedFolderForCreation: () => {},
-  })
-
   return (
     <>
       <Header />
@@ -109,103 +92,66 @@ export default function PreviewBuildPage() {
             </button>
 
             {!sidebarCollapsed && (
-              <>
-                <div className="p-4 border-b border-gray-200">
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between">
-                      <h2 className="text-lg font-semibold text-gray-900">
-                        Deployment
-                      </h2>
-                      <StatusPill status={status} />
-                    </div>
+              <div className="p-4">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <h2 className="text-lg font-semibold text-gray-900">
+                      Deployment
+                    </h2>
+                    <StatusPill status={status} />
+                  </div>
 
-                    <div className="space-y-2">
+                  <div className="space-y-2">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                      <span className="text-xs text-gray-500 uppercase tracking-wide">
+                        ID
+                      </span>
+                      <Link
+                        href={`/${pkg?.name}/releases/${build?.package_release_id}`}
+                        title={build?.package_build_id}
+                        className="font-mono text-sm truncate text-gray-900 bg-gray-100 w-full px-2 py-1 rounded"
+                      >
+                        {build?.package_build_id}
+                      </Link>
+                    </div>
+                    {packageRelease?.commit_message && (
                       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                         <span className="text-xs text-gray-500 uppercase tracking-wide">
-                          ID
+                          Commit
                         </span>
-                        <PrefetchPageLink
-                          href={`/${pkg?.name}/releases/${build?.package_release_id}`}
-                          title={build?.package_build_id}
-                          className="font-mono text-sm truncate text-gray-900 bg-gray-100 w-full px-2 py-1 rounded"
+                        <a
+                          title={packageRelease?.commit_message}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href={`https://github.com/${pkg?.github_repo_full_name}/commit/${packageRelease?.commit_message}`}
+                          className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded truncate"
                         >
-                          {build?.package_build_id}
-                        </PrefetchPageLink>
+                          {packageRelease?.commit_message}
+                        </a>
                       </div>
-                      {packageRelease?.commit_message && (
-                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                          <span className="text-xs text-gray-500 uppercase tracking-wide">
-                            Commit
-                          </span>
-                          <a
-                            title={packageRelease?.commit_message}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            href={`https://github.com/${pkg?.github_repo_full_name}/commit/${packageRelease?.commit_message}`}
-                            className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded truncate"
-                          >
-                            {packageRelease?.commit_message}
-                          </a>
-                        </div>
-                      )}
+                    )}
 
-                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-                        <span className="text-xs text-gray-500 uppercase tracking-wide">
-                          Status
-                        </span>
-                        <span
-                          className={`text-xs font-medium px-2 py-1 w-fit rounded-full capitalize ${
-                            status === "success"
-                              ? "bg-emerald-100 text-emerald-800"
-                              : status === "error"
-                                ? "bg-red-100 text-red-800"
-                                : status === "building"
-                                  ? "bg-blue-100 text-blue-800"
-                                  : "bg-gray-100 text-gray-800"
-                          }`}
-                        >
-                          {status}
-                        </span>
-                      </div>
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                      <span className="text-xs text-gray-500 uppercase tracking-wide">
+                        Status
+                      </span>
+                      <span
+                        className={`text-xs font-medium px-2 py-1 w-fit rounded-full capitalize ${
+                          status === "success"
+                            ? "bg-emerald-100 text-emerald-800"
+                            : status === "error"
+                              ? "bg-red-100 text-red-800"
+                              : status === "building"
+                                ? "bg-blue-100 text-blue-800"
+                                : "bg-gray-100 text-gray-800"
+                        }`}
+                      >
+                        {status}
+                      </span>
                     </div>
                   </div>
                 </div>
-
-                <div className="flex-1 overflow-hidden">
-                  <div className="px-4 py-3 border-b border-gray-200">
-                    <h3 className="text-sm font-semibold text-gray-900">
-                      Files
-                    </h3>
-                    <p className="text-xs text-gray-500 mt-1">
-                      {isLoadingFiles
-                        ? "Loading files..."
-                        : `${treeData.length} file${treeData.length !== 1 ? "s" : ""}`}
-                    </p>
-                  </div>
-                  <div className="px-2 py-2 overflow-y-auto select-none">
-                    {isLoadingFiles ? (
-                      <div className="flex items-center justify-center py-8">
-                        <Loader2 className="w-4 h-4 animate-spin" />
-                        <span className="ml-2 text-sm text-gray-500">
-                          Loading files...
-                        </span>
-                      </div>
-                    ) : (
-                      <TreeView
-                        selectedItemId={selectedItemId || ""}
-                        setSelectedItemId={(v) => setSelectedItemId(v || "")}
-                        data={treeData}
-                        className="w-full"
-                        onSelectChange={(item) => {
-                          if (item && !item.children) {
-                            setSelectedFile(item.id)
-                          }
-                        }}
-                      />
-                    )}
-                  </div>
-                </div>
-              </>
+              </div>
             )}
           </aside>
 
@@ -218,12 +164,15 @@ export default function PreviewBuildPage() {
                     <p>Loading package contents...</p>
                   </div>
                 </div>
-              ) : status === "success" && buildFiles.length > 0 ? (
-                <SuspenseRunFrame
-                  fsMap={buildFsMap}
-                  mainComponentPath={selectedFile ?? "index.tsx"}
-                  showRunButton={false}
-                  className="[&>div]:overflow-y-hidden"
+              ) : status === "success" ? (
+                <RunFrameStaticBuildViewer
+                  files={[
+                    {
+                      filePath: "dist/circuit.json",
+                      fileStaticAssetUrl: `${apiUrl}/package_files/get?file_path=dist/circuit.json&package_release_id=${build?.package_release_id}`,
+                    },
+                  ]}
+                  onFetchFile={fetchCircuitJson as any}
                 />
               ) : (
                 <div className="flex-1 flex items-center justify-center">
@@ -238,15 +187,6 @@ export default function PreviewBuildPage() {
                         Build Failed
                       </p>
                     </div>
-                  ) : buildFiles.length === 0 ? (
-                    <div className="text-center">
-                      <p className="text-gray-600 font-medium mb-2">
-                        No files found
-                      </p>
-                      <p className="text-sm text-gray-500">
-                        This package release doesn't have any files to preview.
-                      </p>
-                    </div>
                   ) : (
                     <div className="text-center p-4">
                       <p className="text-gray-600 font-medium mb-2">

package/src/pages/quickstart.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react"
-import { useQuery } from "react-query"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useQuery, useQueryClient } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
@@ -7,35 +7,64 @@ import { Package } 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 { CircuitJsonImportDialog } from "@/components/CircuitJsonImportDialog"
-import { useNotImplementedToast } from "@/hooks/use-toast"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
+import { useJlcpcbComponentImport } from "@/hooks/use-jlcpcb-component-import"
+import { JlcpcbComponentTsxLoadedPayload } from "@tscircuit/runframe/runner"
 import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
+import { Loader2 } from "lucide-react"
 
 export const QuickstartPage = () => {
   const axios = useAxios()
-  const [isJLCPCBDialogOpen, setIsJLCPCBDialogOpen] = useState(false)
+  const queryClient = useQueryClient()
   const [isCircuitJsonImportDialogOpen, setIsCircuitJsonImportDialogOpen] =
     useState(false)
-  const toastNotImplemented = useNotImplementedToast()
-  const currentUser = useGlobalStore((s) => s.session?.github_username)
+  const session = useGlobalStore((s) => s.session)
+  const currentUser = session?.github_username
+  const isLoggedIn = Boolean(currentUser)
+  const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
+    useImportComponentDialog()
+  const { importComponent: importJlcpcbComponent } = useJlcpcbComponentImport()
+  const jlcpcbProxyRequestHeaders = useMemo(
+    () =>
+      session?.token
+        ? {
+            Authorization: `Bearer ${session.token}`,
+          }
+        : undefined,
+    [session?.token],
+  )
+  const handleJlcpcbComponentSelected = useCallback(
+    async (payload: JlcpcbComponentTsxLoadedPayload) => {
+      await importJlcpcbComponent(payload)
+    },
+    [importJlcpcbComponent],
+  )
+  useEffect(() => {
+    queryClient.removeQueries("userPackages")
+  }, [queryClient])
   const { data: myPackages, isLoading } = useQuery<Package[]>(
-    "userPackages",
+    ["userPackages", currentUser],
     async () => {
       const response = await axios.post(`/packages/list`, {
         owner_github_username: currentUser,
       })
       return response.data.packages
     },
+    {
+      enabled: isLoggedIn,
+    },
   )
 
-  const blankTemplates = [
+  const blankTemplates: Array<{
+    name: string
+    type: string
+    disabled?: boolean
+  }> = [
     { 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 = [
@@ -44,51 +73,63 @@ export const QuickstartPage = () => {
   ]
 
   return (
-    <div>
+    <div className="min-h-screen">
       <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 Packages</h2>
-          {isLoading ? (
-            <div>Loading...</div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {myPackages
-                ?.sort(
-                  (a, b) =>
-                    new Date(b.created_at).getTime() -
-                    new Date(a.created_at).getTime(),
-                )
-                .slice(0, 4)
-                .map((pkg) => (
-                  <PrefetchPageLink
-                    key={pkg.package_id}
-                    href={`/editor?package_id=${pkg.package_id}`}
-                  >
-                    <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col h-full">
-                      <CardHeader className="pb-0 p-4">
-                        <CardTitle className="text-md">
-                          {pkg.unscoped_name}
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent className="p-4 pt-0 mt-auto">
-                        <p className="text-sm text-gray-500">
-                          Last edited:{" "}
-                          {new Date(pkg.updated_at).toLocaleDateString()}
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </PrefetchPageLink>
-                ))}
+      <div className="container mx-auto px-6 py-12">
+        {isLoggedIn && (
+          <div className="mb-16 hidden md:block">
+            <div className="mb-8">
+              <h2 className="text-2xl font-semibold text-slate-900">
+                Recent Packages
+              </h2>
             </div>
-          )}
-        </div>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                {myPackages
+                  ?.sort(
+                    (a, b) =>
+                      new Date(b.created_at).getTime() -
+                      new Date(a.created_at).getTime(),
+                  )
+                  .slice(0, 4)
+                  .map((pkg) => (
+                    <Link
+                      key={pkg.package_id}
+                      href={`/editor?package_id=${pkg.package_id}`}
+                    >
+                      <Card className="hover:shadow-md border bg-white shadow-sm transition-shadow flex flex-col h-full rounded-md">
+                        <CardHeader>
+                          <CardTitle className="text-lg font-semibold text-slate-900">
+                            {pkg.unscoped_name}
+                          </CardTitle>
+                        </CardHeader>
+                        <CardContent className="-mt-4">
+                          <p className="text-sm text-slate-500">
+                            Last edited{" "}
+                            {new Date(pkg.updated_at).toLocaleDateString()}
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))}
+              </div>
+            )}
+          </div>
+        )}
 
-        <div className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Start Blank Packages</h2>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold text-slate-900">
+              Start Blank
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
             {blankTemplates.map((template, index) => (
-              <PrefetchPageLink
+              <Link
                 key={index}
                 href={
                   template.disabled
@@ -100,90 +141,81 @@ export const QuickstartPage = () => {
               >
                 <Card
                   className={cn(
-                    "hover:shadow-md transition-shadow rounded-md h-full flex flex-col",
+                    "hover:shadow-md border bg-white transition-shadow h-full flex flex-col rounded-md",
                     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} />
+                  <CardHeader className="p-6 flex-grow flex flex-col justify-between">
+                    <div>
+                      <CardTitle className="text-lg font-semibold text-slate-900 mb-3">
+                        {template.name}
+                      </CardTitle>
+                      <div className="flex justify-between items-center">
+                        <TypeBadge type={template.type as any} />
+                      </div>
                     </div>
                   </CardHeader>
                 </Card>
-              </PrefetchPageLink>
+              </Link>
             ))}
           </div>
         </div>
 
-        <div className="mt-12">
-          <h2 className="text-xl font-semibold mb-4">Import as Package</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 lg: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 flex flex-col"
-              >
-                <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" />
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold text-slate-900">
+              Import Components
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card className="hover:shadow-md border bg-white transition-shadow flex flex-col rounded-md">
+              <CardHeader className="p-6 pb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <CardTitle className="text-lg font-semibold text-slate-900">
+                    JLCPCB Component
                   </CardTitle>
-                </CardHeader>
-                <CardContent className="p-4 mt-auto">
-                  <Button
-                    className="w-full"
-                    onClick={() => {
-                      toastNotImplemented("Kicad Imports")
-                    }}
-                  >
-                    Import {template.name}
-                  </Button>
-                </CardContent>
-              </Card>
-            ))} */}
-            <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
-              <CardHeader className="p-4 pb-0">
-                <CardTitle className="text-lg flex items-center justify-between">
-                  JLCPCB Component
-                  <TypeBadge type="package" className="ml-2" />
-                </CardTitle>
+                  <TypeBadge type="package" />
+                </div>
+                <p className="text-sm text-slate-500">
+                  Import components from JLCPCB library
+                </p>
               </CardHeader>
-              <CardContent className="p-4 mt-auto">
+              <CardContent className="p-6 pt-0 mt-auto">
                 <Button
-                  className="w-full"
-                  onClick={() => setIsJLCPCBDialogOpen(true)}
+                  className="w-full text-white"
+                  onClick={() => openImportDialog()}
                 >
-                  Import JLCPCB Component
+                  Import JLCPCB
                 </Button>
               </CardContent>
             </Card>
-            <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
-              <CardHeader className="p-4 pb-0">
-                <CardTitle className="text-lg flex items-center justify-between">
-                  Circuit Json
-                  <TypeBadge type="package" className="ml-2" />
-                </CardTitle>
+            <Card className="hover:shadow-md border bg-white transition-shadow flex flex-col rounded-md">
+              <CardHeader className="p-6 pb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <CardTitle className="text-lg font-semibold text-slate-900">
+                    Circuit JSON
+                  </CardTitle>
+                  <TypeBadge type="package" />
+                </div>
+                <p className="text-sm text-slate-500">
+                  Import from Circuit JSON format
+                </p>
               </CardHeader>
-              <CardContent className="p-4 mt-auto">
+              <CardContent className="p-6 pt-0 mt-auto">
                 <Button
-                  className="w-full"
+                  className="w-full text-white"
                   onClick={() => setIsCircuitJsonImportDialogOpen(true)}
                 >
-                  Import Circuit JSON
+                  Import JSON
                 </Button>
               </CardContent>
             </Card>
           </div>
         </div>
 
-        <JLCPCBImportDialog
-          open={isJLCPCBDialogOpen}
-          onOpenChange={setIsJLCPCBDialogOpen}
+        <ImportComponentDialog
+          onJlcpcbComponentTsxLoaded={handleJlcpcbComponentSelected}
+          jlcpcbProxyRequestHeaders={jlcpcbProxyRequestHeaders}
         />
 
         <CircuitJsonImportDialog
@@ -191,27 +223,31 @@ export const QuickstartPage = () => {
           onOpenChange={setIsCircuitJsonImportDialogOpen}
         />
 
-        <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">
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold text-slate-900">
+              Popular Templates
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {templates.map((template, index) => (
-              <PrefetchPageLink
+              <Link
                 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>
+                <Card className="hover:shadow-md border bg-white transition-shadow rounded-md">
+                  <CardHeader className="p-6">
+                    <div className="flex items-center justify-between ">
+                      <CardTitle className="text-lg font-semibold text-slate-900">
+                        {template.name}
+                      </CardTitle>
+                      <TypeBadge type={template.type as any} />
+                    </div>
                   </CardHeader>
                 </Card>
-              </PrefetchPageLink>
+              </Link>
             ))}
           </div>
         </div>