From 98c22e908249700469a3b84c2611b5d03072e2b5 Mon Sep 17 00:00:00 2001
From: Erick Friis <erick@langchain.dev>
Date: Fri, 2 Aug 2024 10:41:47 -0700
Subject: [PATCH] docs: feature table component (#24985)

---
 docs/src/theme/FeatureTables.tsx | 76 ++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 docs/src/theme/FeatureTables.tsx

diff --git a/docs/src/theme/FeatureTables.tsx b/docs/src/theme/FeatureTables.tsx
new file mode 100644
index 0000000000..80d20ff558
--- /dev/null
+++ b/docs/src/theme/FeatureTables.tsx
@@ -0,0 +1,76 @@
+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: "Provider", formatter: (item) => <a href={item.link}>{item.name}</a>},
+            {title: "Package", formatter: (item) => <a href={`https://pypi.org/project/${item.package}/`}>{item.package}</a>},
+        ],
+        items:[
+            {
+                name: "Anthropic",
+                link: "anthropic.ipynb",
+                package: "langchain-anthropic",
+            }
+        ]
+    },
+    text_embedding: {
+        link: "/docs/integrations/text_embedding",
+        columns: [
+            {title: "Provider", formatter: (item) => <a href={item.link}>{item.name}</a>},
+            {title: "Package", formatter: (item) => <a href={`https://pypi.org/project/${item.package}/`}>{item.package}</a>},
+        ],
+        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]);
+}