@tscircuit/fake-snippets 0.0.95 → 0.0.96

package/src/pages/datasheets.tsx

@@ -29,9 +29,7 @@ export const DatasheetsPage: React.FC = () => {
       } else {
         params.append("is_popular", "true")
       }
-      const { data } = await axios.get(
-        `/api/datasheets/list?${params.toString()}`,
-      )
+      const { data } = await axios.get(`/datasheets/list?${params.toString()}`)
       return data.datasheets as DatasheetSummary[]
     },
     { keepPreviousData: true },
@@ -40,36 +38,88 @@ export const DatasheetsPage: React.FC = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="container mx-auto flex-1 px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Datasheets</h1>
-        <div className="max-w-md mb-6">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
-            <Input
-              type="search"
-              placeholder="Search datasheets..."
-              className="pl-10"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              aria-label="Search datasheets"
-              role="searchbox"
-            />
+      <main className="flex-grow container mx-auto px-4 py-8">
+        <div className="mb-8 max-w-3xl">
+          <div className="flex items-center gap-2 mb-3">
+            <h1 className="text-4xl font-bold text-gray-900">Datasheets</h1>
           </div>
+          <p className="text-lg text-gray-600 mb-4">
+            Explore datasheets for popular electronic components and chips.
+            Search to find specific ones.
+          </p>
         </div>
+
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <div className="relative flex-grow">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+              <Input
+                type="search"
+                placeholder="Search datasheets..."
+                className="pl-10"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                aria-label="Search datasheets"
+                role="searchbox"
+              />
+            </div>
+          </div>
+        </div>
+
         {isLoading ? (
-          <p>Loading...</p>
+          <div className="text-center py-12 px-4">
+            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
+              <Search className="w-8 h-8 text-slate-400" />
+            </div>
+            <h3 className="text-xl font-medium text-slate-900 mb-2">
+              Loading Datasheets
+            </h3>
+            <p className="text-slate-500 max-w-md mx-auto mb-6">
+              Please wait while we fetch the datasheets...
+            </p>
+          </div>
         ) : error ? (
-          <p>Error loading datasheets.</p>
+          <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
+            <div className="flex items-start">
+              <div className="mr-4 bg-red-100 p-2 rounded-full">
+                <Search className="w-6 h-6 text-red-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold mb-2">
+                  Error Loading Datasheets
+                </h3>
+                <p className="text-red-600">
+                  We couldn't load the datasheets. Please try again later.
+                </p>
+              </div>
+            </div>
+          </div>
         ) : datasheets && datasheets.length > 0 ? (
-          <ul className="list-disc pl-5 space-y-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {datasheets.map((ds) => (
-              <li key={ds.datasheet_id}>
-                <Link href={`/datasheets/${ds.chip_name}`}>{ds.chip_name}</Link>
-              </li>
+              <Link
+                key={ds.datasheet_id}
+                href={`/datasheets/${ds.chip_name}`}
+                className="block p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+              >
+                <h3 className="font-semibold text-gray-900">{ds.chip_name}</h3>
+              </Link>
             ))}
-          </ul>
+          </div>
         ) : (
-          <p>No datasheets found.</p>
+          <div className="text-center py-12 px-4">
+            <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
+              <Search className="w-8 h-8 text-slate-400" />
+            </div>
+            <h3 className="text-xl font-medium text-slate-900 mb-2">
+              No Matching Datasheets
+            </h3>
+            <p className="text-slate-500 max-w-md mx-auto mb-6">
+              {searchQuery
+                ? `No datasheets match your search for "${searchQuery}".`
+                : "There are no popular datasheets at the moment."}
+            </p>
+          </div>
         )}
       </main>
       <Footer />