add errors to dropdown menu, make part numbers go to jlcpcb

tscircuit · Nov 12, 2024 · 52ac8c2 · 52ac8c2
1 parent c94a446
commit 52ac8c2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/src/components/BomTable.tsx b/src/components/BomTable.tsx
@@ -1,19 +1,34 @@
 import { AnyCircuitElement } from "circuit-json"
+import { Link } from "wouter"
 
 interface BomTableProps {
   circuitJson: AnyCircuitElement[]
 }
 
+export const linkify = (supplier: string, partNumber: string) => {
+  if (supplier === "jlcpcb") {
+    return (
+      <a
+        className="underline text-blue-500"
+        href={`https://jlcpcb.com/partdetail/${partNumber}`}
+      >
+        {partNumber}
+      </a>
+    )
+  }
+  return partNumber
+}
+
 export const BomTable: React.FC<BomTableProps> = ({ circuitJson }) => {
   const sourceComponents = circuitJson.filter(
-    (el) => el.type === "source_component"
+    (el) => el.type === "source_component",
   )
 
   const supplierColumns = new Set<string>()
   sourceComponents.forEach((comp) => {
     if (comp.supplier_part_numbers) {
       Object.keys(comp.supplier_part_numbers).forEach((supplier) =>
-        supplierColumns.add(supplier)
+        supplierColumns.add(supplier),
       )
     }
   })
@@ -37,7 +52,10 @@ export const BomTable: React.FC<BomTableProps> = ({ circuitJson }) => {
               <td className="p-2">{comp.name}</td>
               {Array.from(supplierColumns).map((supplier) => (
                 <td key={supplier} className="p-2">
-                  {comp.supplier_part_numbers?.[supplier]?.[0] || ""}
+                  {linkify(
+                    supplier,
+                    comp.supplier_part_numbers?.[supplier]?.[0] || "",
+                  )}
                 </td>
               ))}
             </tr>

diff --git a/src/components/PreviewContent.tsx b/src/components/PreviewContent.tsx
@@ -140,21 +140,33 @@ export const PreviewContent = ({
                 )}
                 3D
               </TabsTrigger>
-              <TabsTrigger value="error" className="whitespace-nowrap">
-                Errors
-                {errorMessage && (
-                  <span className="inline-flex items-center justify-center w-5 h-5 ml-2 text-xs font-bold text-white bg-red-500 rounded-full">
-                    1
-                  </span>
-                )}
-              </TabsTrigger>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <div className="whitespace-nowrap p-2 mr-1 cursor-pointer">
+                  <div className="whitespace-nowrap p-2 mr-1 cursor-pointer relative">
                     <EllipsisIcon className="w-4 h-4" />
+                    {errorMessage && (
+                      <span className="inline-flex absolute top-[6px] right-[4px] items-center justify-center w-1 h-1 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full" />
+                    )}
                   </div>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="*:text-xs">
+                  <DropdownMenuItem
+                    onSelect={() => setActiveTab("error")}
+                    className="flex"
+                  >
+                    <CheckIcon
+                      className={cn(
+                        "w-3 h-3 mr-2",
+                        activeTab !== "error" && "invisible",
+                      )}
+                    />
+                    <div className="flex-grow">Errors</div>
+                    {errorMessage && (
+                      <span className="inline-flex items-center justify-center w-3 h-3 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full">
+                        1
+                      </span>
+                    )}
+                  </DropdownMenuItem>
                   <DropdownMenuItem onSelect={() => setActiveTab("bom")}>
                     <CheckIcon
                       className={cn(