101 lines
3.7 KiB
JavaScript
101 lines
3.7 KiB
JavaScript
import { supabase, safeQuery } from '../lib/supabaseClient';
|
|
|
|
// Function to generate star ratings
|
|
const StarRating = ({ rating }) => {
|
|
const totalStars = 5;
|
|
let stars = [];
|
|
for (let i = 1; i <= totalStars; i++) {
|
|
stars.push(
|
|
<span key={i} className={i <= rating ? 'text-yellow-400' : 'text-neutral-600'}>
|
|
★
|
|
</span>
|
|
);
|
|
}
|
|
return <div className="flex">{stars}</div>;
|
|
};
|
|
|
|
export default async function Home() {
|
|
let items = [];
|
|
let fetchError = null;
|
|
|
|
// Using safeQuery helper to handle missing Supabase client gracefully
|
|
const { data, error } = await safeQuery(async (supabase) => {
|
|
return await supabase
|
|
.from('items')
|
|
.select('*')
|
|
.order('created_at', { ascending: false }); // Assuming you have a created_at timestamp
|
|
});
|
|
|
|
if (error) {
|
|
console.error('Error fetching items:', error.message);
|
|
fetchError = 'Could not fetch items. ' + error.message;
|
|
} else {
|
|
items = data || [];
|
|
}
|
|
|
|
|
|
return (
|
|
<div>
|
|
<header className="mb-8">
|
|
<h1 className="text-4xl font-bold text-neutral-100">My Favorite Stuff</h1>
|
|
<p className="text-neutral-400">
|
|
A curated list of things I've enjoyed, in reverse chronological order.
|
|
</p>
|
|
</header>
|
|
|
|
{fetchError && (
|
|
<div className="bg-red-900 border border-red-700 text-red-100 px-4 py-3 rounded relative mb-6" role="alert">
|
|
<strong className="font-bold">Error: </strong>
|
|
<span className="block sm:inline">{fetchError}</span>
|
|
</div>
|
|
)}
|
|
|
|
{!fetchError && items.length === 0 && (
|
|
<div className="text-center text-neutral-500 py-10">
|
|
<p>No items added yet. Start by adding your favorite books, movies, or series!</p>
|
|
<a
|
|
href="/add-item" // We'll create this page later
|
|
className="mt-4 inline-block bg-sky-600 hover:bg-sky-700 text-white font-semibold py-2 px-4 rounded transition-colors"
|
|
>
|
|
Add New Item
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{items.length > 0 && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{items.map((item) => (
|
|
<div key={item.id} className="bg-neutral-800 rounded-lg shadow-lg p-4 flex flex-col">
|
|
{item.image_url ? (
|
|
<div className="aspect-[3/4] w-full bg-neutral-700 rounded mb-3 overflow-hidden">
|
|
<img
|
|
src={item.image_url}
|
|
alt={item.title || 'Item image'}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="aspect-[3/4] w-full bg-neutral-700 rounded mb-3 flex items-center justify-center">
|
|
<span className="text-neutral-500 text-sm">No Image</span>
|
|
</div>
|
|
)}
|
|
<h2 className="text-xl font-semibold mb-1 text-neutral-100 truncate" title={item.title}>{item.title || 'Untitled'}</h2>
|
|
<p className="text-sm text-neutral-400 mb-1 capitalize">{item.type || 'N/A'}</p>
|
|
{typeof item.rating === 'number' && <StarRating rating={item.rating} />}
|
|
{item.notes && (
|
|
<p className="text-xs text-neutral-500 mt-2 flex-grow overflow-hidden line-clamp-3">
|
|
{item.notes}
|
|
</p>
|
|
)}
|
|
{/* Placeholder for a details link/modal trigger */}
|
|
{/* <a href={`/item/${item.id}`} className="text-sky-400 hover:text-sky-300 text-sm mt-auto pt-2">
|
|
View Details
|
|
</a> */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|