Initialize frontend project with Next.js, Tailwind CSS, and essential configurations

2025-12-20 22:51:09 -05:00 · 2025-02-23 16:01:56 -05:00
parent 401449201c
commit 730b165f9c
31 changed files with 8882 additions and 56 deletions
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { Park } from '@/types/api';
+
+export default function Home() {
+  const [parks, setParks] = useState<Park[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchParks() {
+      try {
+        const response = await fetch('/api/parks');
+        const data = await response.json();
+        
+        if (!data.success) {
+          throw new Error(data.error || 'Failed to fetch parks');
+        }
+
+        setParks(data.data || []);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchParks();
+  }, []);
+
+  if (loading) {
+    return (
+      <main className="min-h-screen p-8">
+        <div className="text-center">
+          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" />
+          <p className="mt-4 text-gray-600">Loading parks...</p>
+        </div>
+      </main>
+    );
+  }
+
+  if (error) {
+    return (
+      <main className="min-h-screen p-8">
+        <div className="rounded-lg bg-red-50 p-4 border border-red-200">
+          <h2 className="text-red-800 font-semibold">Error</h2>
+          <p className="text-red-600 mt-2">{error}</p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="min-h-screen p-8">
+      <h1 className="text-3xl font-bold mb-8">ThrillWiki Parks</h1>
+      
+      {parks.length === 0 ? (
+        <p className="text-gray-600">No parks found</p>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {parks.map((park) => (
+            <div
+              key={park.id}
+              className="rounded-lg border border-gray-200 p-6 hover:shadow-lg transition-shadow"
+            >
+              <h2 className="text-xl font-semibold mb-2">{park.name}</h2>
+              {park.description && (
+                <p className="text-gray-600 mb-4">
+                  {park.description.length > 150
+                    ? `${park.description.slice(0, 150)}...`
+                    : park.description}
+                </p>
+              )}
+              <div className="text-sm text-gray-500">
+                Added: {new Date(park.createdAt).toLocaleDateString()}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </main>
+  );
+}