Skip to content

Commit

Permalink
loads images from supabase
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jerryzjx
Jerryzjx committed Jul 9, 2024
1 parent 00be86a commit e0ebb51
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 66 deletions.
104 changes: 55 additions & 49 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,12 @@ export default async function Index() {
}
*/

function ProductDisplay({ id, image, name, sell_price, rental_rate }: {
function ProductDisplay({ id, image, name, price, isRental }: {
id: number,
image: string | null,
name: string,
sell_price: number,
rental_rate: number
price: number,
isRental: boolean
}) {
return (
<Link href={`/products/${id}`}>
Expand All @@ -73,13 +73,16 @@ function ProductDisplay({ id, image, name, sell_price, rental_rate }: {
<Image
src={image || '/img/placeholder.png'}
alt={name}
unoptimized
width={192}
height={192}
objectFit="contain"
style={{ objectFit: "contain" }}
/>
</div>
<h3 className="text-lg font-medium text-emerald-600 mb-2">{name}</h3>
<p className="text-slate-600">CA ${sell_price.toFixed(2)}</p>
<p className="text-slate-600">
{isRental ? `CA $${price.toFixed(2)}/hour` : `CA $${price.toFixed(2)}`}
</p>
</div>
</Link>
);
Expand All @@ -94,48 +97,51 @@ export default async function Home() {
// Handle the error appropriately
}

return (
<div className="flex flex-col min-h-screen">
<Navbar />
<main className="flex-grow bg-white py-16 px-4">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h1 className="text-4xl font-bold text-emerald-600 mb-4">Shop</h1>
<p className="text-xl text-slate-600">Take a look at our latest products and rentals!</p>
</div>
<section className="mb-16">
<h2 className="text-3xl font-semibold text-left mb-8 text-gray-800">Products</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{bikes && bikes.map((bike) => (
<ProductDisplay
key={bike.bike_id}
id={bike.bike_id}
image={bike.image}
name={bike.name}
sell_price={bike.sell_price}
rental_rate={bike.rental_rate}
/>
))}
</div>
</section>
<section>
<h2 className="text-3xl font-semibold text-left mb-8 text-gray-800">Rentals</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{bikes && bikes.map((bike) => (
<ProductDisplay
key={bike.bike_id}
id={bike.bike_id}
image={bike.image}
name={bike.name}
sell_price={bike.rental_rate}
rental_rate={bike.rental_rate}
/>
))}
</div>
</section>
const products = bikes?.filter(bike => !bike.for_rent) || [];
const rentals = bikes?.filter(bike => bike.for_rent) || [];

return (
<div className="flex flex-col min-h-screen">
<Navbar />
<main className="flex-grow bg-white py-16 px-4">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h1 className="text-4xl font-bold text-emerald-600 mb-4">Shop</h1>
<p className="text-xl text-slate-600">Take a look at our latest products and rentals!</p>
</div>
</main>
<Footer />
</div>
);
}
<section className="mb-16">
<h2 className="text-3xl font-semibold text-left mb-8 text-gray-800">Products</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{products.map((bike) => (
<ProductDisplay
key={bike.bike_id}
id={bike.bike_id}
image={bike.image}
name={bike.name}
price={bike.sell_price}
isRental={false}
/>
))}
</div>
</section>
<section>
<h2 className="text-3xl font-semibold text-left mb-8 text-gray-800">Rentals</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{rentals.map((bike) => (
<ProductDisplay
key={bike.bike_id}
id={bike.bike_id}
image={bike.image}
name={bike.name}
price={bike.rental_rate}
isRental={true}
/>
))}
</div>
</section>
</div>
</main>
<Footer />
</div>
);
}
58 changes: 41 additions & 17 deletions app/products/[productId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from 'react';
import Image from 'next/image';
import Navbar from '@/components/shop/Navbar';
import Footer from '@/components/shop/Footer';
import { createClient } from "@/utils/supabase/server";
import { notFound } from 'next/navigation'
import { cookies } from 'next/headers';
import {createClient} from "@/utils/supabase/server";
import {notFound} from 'next/navigation'
import {cookies} from 'next/headers';

type Bike = {
bike_id: number;
Expand All @@ -15,12 +15,13 @@ type Bike = {
rental_rate: number;
sell_price: number;
damage_rate: number;
for_rent: boolean;
};

async function getBike(productId: string) {
const cookieStore = cookies();
const supabase = createClient();
const { data: bike, error } = await supabase
const {data: bike, error} = await supabase
.from('bikes')
.select('*')
.eq('bike_id', productId)
Expand All @@ -30,12 +31,11 @@ async function getBike(productId: string) {
return null;
}

return bike;
return bike as Bike;
}



export default async function ProductPage({ params }: { params: { productId: string } }) {
export default async function ProductPage({params}: { params: { productId: string } }) {
const bike = await getBike(params.productId);

if (!bike) {
Expand All @@ -44,26 +44,50 @@ export default async function ProductPage({ params }: { params: { productId: str

return (
<div className="flex flex-col min-h-screen">
<Navbar />
<Navbar/>
<main className="flex-grow bg-gray-100 py-16 px-4">
<div className="max-w-6xl mx-auto bg-white p-8 rounded-lg shadow-md">
<h1 className="text-3xl font-bold text-gray-800 mb-2">{bike.name}</h1>
<p className="text-xl text-gray-600 mb-6">CA ${bike.sell_price.toFixed(2)}</p>

<p className="text-xl text-gray-600 mb-6">
{bike.for_rent
? `CA $${bike.rental_rate.toFixed(2)} per hour`
: `CA $${bike.sell_price.toFixed(2)}`
}
</p>
<div className="flex flex-col md:flex-row gap-8">
<div className="md:w-1/2">
<Image src={bike.image || '/img/placeholder.png'} alt={bike.name} width={500} height={500} className="rounded-lg" />
<Image
src={bike.image || '/img/placeholder.png'}
alt={bike.name}
unoptimized
width={500}
height={500}
style={{objectFit: "contain"}}
className="rounded-lg"/>
</div>
<div className="md:w-1/2">
<p className="text-gray-700 mb-4">{bike.description}</p>
<div className="flex items-center gap-4 mb-6">
<input type="number" defaultValue={1} min={1} max={bike.amount_stocked} className="border p-2 w-16 text-center text-gray-800" />
<button className="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-500">Add to Cart</button>
<input type="number" defaultValue={1} min={1} max={bike.amount_stocked}
className="border p-2 w-16 text-center text-gray-800"/>
<button className="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-500">
{bike.for_rent ? 'Rent Now' : 'Add to Cart'}
</button>
</div>
<div className="mb-8">
{bike.for_rent ? (
<>
<h2 className="text-xl font-semibold mb-4 text-gray-800">Rental Information</h2>
<p className="text-gray-700">Rental rate: CA ${bike.rental_rate.toFixed(2)} per hour</p>
<p className="text-gray-700">Damage rate: {(bike.damage_rate * 100).toFixed(2)}%</p>
</>
) : (
<>
<h2 className="text-xl font-semibold mb-4 text-gray-800">Product Information</h2>
<p className="text-gray-700">Price: CA ${bike.sell_price.toFixed(2)}</p>
</>
)}
</div>
<hr className="my-6" />
<h2 className="text-xl font-semibold mb-4 text-gray-800">Rental Information</h2>
<p className="text-gray-700">Rental rate: CA ${bike.rental_rate.toFixed(2)} per hour</p>
<p className="text-gray-700">Damage rate: {(bike.damage_rate * 100).toFixed(2)}%</p>
</div>
</div>

Expand Down

0 comments on commit e0ebb51

Please sign in to comment.