Refactor /vectordatabases to support metadata

src/app/devtools/page.tsx

@@ -4,7 +4,7 @@ import { getTools } from '@/lib/getTools'
 import { createMetadata } from '@/utils/createMetadata'
 
 export const metadata: Metadata = createMetadata({
-  title: 'AI-Assisted Developer Tools',
+  title: 'AI-Assisted Developer Tools Compared',
   description: 'Compare different AI-assisted developer tools to find the best fit for your needs',
 });
 

src/app/vectordatabases/page.jsx → src/app/vectordatabases/VectorDatabasesPageClient.tsx

@@ -6,34 +6,42 @@ import Image from 'next/image';
 import { track } from '@vercel/analytics';
 import { SimpleLayout } from '@/components/SimpleLayout'
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { getDatabases } from '@/lib/getDatabases';
 import { getLogoById } from '@/lib/logoImports';
 import SearchFilter from '@/components/SearchFilter';
 import { Button } from "@/components/ui/button";
 import { DiffIcon, SearchIcon } from "lucide-react";
 
-export default function GalleryPage() {
+interface Database {
+  name: string;
+  description: string;
+  logoId: string;
+}
+
+interface VectorDatabasesPageClientProps {
+  initialDatabases: Database[];
+}
+
+export default function VectorDatabasesPageClient({ initialDatabases }: VectorDatabasesPageClientProps) {
   const router = useRouter();
-  const allDatabases = getDatabases();
-  const [filteredDatabases, setFilteredDatabases] = useState(allDatabases);
+  const [filteredDatabases, setFilteredDatabases] = useState(initialDatabases);
   const [searchTerm, setSearchTerm] = useState('');
 
-  const handleFilter = (filtered, term) => {
+  const handleFilter = (filtered: Database[], term: string) => {
     setFilteredDatabases(filtered);
     setSearchTerm(term);
   };
 
   const handleReset = () => {
-    setFilteredDatabases(allDatabases);
+    setFilteredDatabases(initialDatabases);
     setSearchTerm('');
   };
 
-  const handleCompareClick = (dbName) => {
+  const handleCompareClick = (dbName: string) => {
     track('compare_click', { database: dbName });
     router.push(`/vectordatabases/compare?dbs=${encodeURIComponent(dbName)}`);
   };
 
-  const handleDetailsClick = (dbName) => {
+  const handleDetailsClick = (dbName: string) => {
     track('details_click', { database: dbName });
     router.push(`/vectordatabases/detail/${encodeURIComponent(dbName)}`);
   };
@@ -44,7 +52,7 @@ export default function GalleryPage() {
       intro="Explore and compare vector databases"
     >
       <SearchFilter 
-        databases={allDatabases} 
+        databases={initialDatabases} 
         onFilter={handleFilter} 
         onReset={handleReset}
         searchTerm={searchTerm}
@@ -70,7 +78,7 @@ export default function GalleryPage() {
               </CardContent>
               <div className="p-4 mt-auto flex justify-between">
                 <Button
-                  variant="primary"
+                  variant="secondary"
                   className="bg-blue-500 hover:bg-blue-600 text-white"
                   onClick={() => handleCompareClick(db.name)}
                 >
@@ -92,4 +100,4 @@ export default function GalleryPage() {
       </div>
     </SimpleLayout>
   );
-}
+}

src/app/vectordatabases/page.tsx

@@ -0,0 +1,14 @@
+import { Metadata } from 'next'
+import VectorDatabasesPageClient from './VectorDatabasesPageClient'
+import { getDatabases } from '@/lib/getDatabases'
+import { createMetadata } from '@/utils/createMetadata'
+
+export const metadata: Metadata = createMetadata({
+  title: 'Vector Databases Compared',
+  description: 'Explore and compare vector databases',
+})
+
+export default function VectorDatabasesPage() {
+  const databases = getDatabases()
+  return <VectorDatabasesPageClient initialDatabases={databases} />
+}

src/components/SearchFilter.jsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 
-export default function SearchFilter({ databases, onFilter }) {
-  const [search, setSearch] = useState('');
+export default function SearchFilter({ databases, onFilter, onReset, searchTerm: externalSearchTerm }) {
+  const [search, setSearch] = useState(externalSearchTerm || '');
   const [filters, setFilters] = useState({
     cloud: false,
     local: false,
@@ -13,9 +13,14 @@ export default function SearchFilter({ databases, onFilter }) {
     open_source: false,
   });
 
+  useEffect(() => {
+    setSearch(externalSearchTerm || '');
+  }, [externalSearchTerm]);
+
   const handleSearchChange = (e) => {
-    setSearch(e.target.value);
-    applyFilters(e.target.value, filters);
+    const newSearchTerm = e.target.value;
+    setSearch(newSearchTerm);
+    applyFilters(newSearchTerm, filters);
   };
 
   const handleFilterChange = (key) => {
@@ -45,7 +50,19 @@ export default function SearchFilter({ databases, onFilter }) {
       });
       return matchesSearch && matchesFilters;
     });
-    onFilter(filtered);
+    onFilter(filtered, searchTerm);
+  };
+
+  const handleReset = () => {
+    setSearch('');
+    setFilters({
+      cloud: false,
+      local: false,
+      on_premises: false,
+      free_tier: false,
+      open_source: false,
+    });
+    onReset();
   };
 
   return (
@@ -68,6 +85,7 @@ export default function SearchFilter({ databases, onFilter }) {
           </div>
         ))}
       </div>
+      <button onClick={handleReset}>Reset</button>
     </div>
   );
 }