From 024e8c2e0a1046361fed59412c2591d86b3ff8cb Mon Sep 17 00:00:00 2001
From: Erick Friis <erick@langchain.dev>
Date: Fri, 2 Aug 2024 06:13:28 -0700
Subject: [PATCH] x

---
 docs/src/theme/FeatureTables.js  | 43 -------------------
 docs/src/theme/FeatureTables.tsx | 73 ++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 43 deletions(-)
 delete mode 100644 docs/src/theme/FeatureTables.js
 create mode 100644 docs/src/theme/FeatureTables.tsx

diff --git a/docs/src/theme/FeatureTables.js b/docs/src/theme/FeatureTables.js
deleted file mode 100644
index 756e7941cd1..00000000000
--- a/docs/src/theme/FeatureTables.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-
-const FeatureTables = {
-    llms: {
-        link: "/docs/integrations/llms",
-        items:[
-            {
-                "Model": "Anthropic",
-                "link": "anthropic.ipynb",
-                "package": "langchain-anthropic",
-            }
-        ]
-    },
-    text_embedding: {
-        link: "/docs/integrations/text_embedding",
-        items:[
-            {
-                "Model": "Cohere",
-                "link": "cohere.ipynb",
-                "package": "langchain-cohere",
-            }
-        ]
-    },
-};
-
-function formatItem(item: object) {
-    const rtn = {...item};
-    // 
-}
-
-function to2dArray(items: object[]) {
-    const keys = Object.keys(items[0]);
-
-    return items.map((item) => Object.values(item));
-}
-
-export function CategoryTable() {
-    return (<table><thead><tr><th>Model</th></tr></thead></table>);
-}
-
-export function ItemTable() {
-    return <div>Item Table</div>;
-}
\ No newline at end of file
diff --git a/docs/src/theme/FeatureTables.tsx b/docs/src/theme/FeatureTables.tsx
new file mode 100644
index 00000000000..d85a634bce9
--- /dev/null
+++ b/docs/src/theme/FeatureTables.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+interface Column {
+    title: string | React.ReactNode;
+    formatter: (item: any) => React.ReactNode;
+}
+interface Category {
+    link: string;
+    columns: Column[];
+    items: any[];
+}
+
+const FeatureTables: Record<string, Category> = {
+    llms: {
+        link: "/docs/integrations/llms",
+        columns: [
+            {title: "Model", formatter: (item) => <a href={item.link}>{item.name}</a>},
+
+        ],
+        items:[
+            {
+                name: "Anthropic",
+                link: "anthropic.ipynb",
+                package: "langchain-anthropic",
+            }
+        ]
+    },
+    text_embedding: {
+        link: "/docs/integrations/text_embedding",
+        columns: [],
+        items:[
+            {
+                name: "Cohere",
+                link: "cohere.ipynb",
+                package: "langchain-cohere",
+            }
+        ]
+    },
+};
+
+function toTable(columns: Column[], items: any[]) {
+    const headers = columns.map((col) => col.title);
+    return (
+        <table>
+            <thead>
+                <tr>
+                    {headers.map((header) => <th>{header}</th>)}
+                </tr>
+            </thead>
+            <tbody>
+                {items.map((item) => (
+                    <tr>
+                        {columns.map((col) => <td>{col.formatter(item)}</td>)}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+}
+
+export function CategoryTable({category}: {category: string}) {
+    const cat = FeatureTables[category];
+    return toTable(cat.columns, cat.items);
+}
+
+export function ItemTable({category, item}: {category: string, item: string}) {
+    const cat = FeatureTables[category];
+    const row = cat.items.find((i) => i.name === item);
+    if (!row) {
+        throw new Error(`Item ${item} not found in category ${category}`);
+    }
+    return toTable(cat.columns, [row]);
+}
\ No newline at end of file