import Head from "next/head";
import Link from "next/link";
import { Noto_Sans_JP } from "next/font/google";
import Header from "../components/Header.js";
import Footer from "../components/Footer.js";
import supabase from "../lib/supabase";
const NotoSansJP = Noto_Sans_JP({
weight: ["400", "700"],
subsets: ["latin"],
});
export async function getServerSideProps() {
const { data: error } = await supabase.from("products").select("*");
if (error) {
console.log("FETCH ERROR", error);
return { props: { products: [] } };
}
return { props: { products: data } };
}
export default function Home({products}) {
return (
<div className={NotoSansJP.className}>
<Head>
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Header />
<main>
<h2>商品一覧</h2>
<ul className="product_list">
<li key={product.id}>
<Link className="product_image" href={"/product/${product.id}"}>
<img src={product.image_url[0]} alt={product.name} />
</Link>
<div className="product_desc">
<Link href={"/product/${product.id}"}>
<h3>{product.name}</h3>
</Link>
<div>
<span>{product.price}円</span>
<p>{product.user}</p>
</div>
</div>
</li>
</ul>
</main>
<Footer />
</div>
);
}