Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wip webshop #689

Closed
wants to merge 15 commits into from
Prev Previous commit
Next Next commit
frontend that works
  • Loading branch information
henrikskog committed Oct 31, 2023
commit 42893fbb86edd750212040656a670f09ca785c92
2 changes: 1 addition & 1 deletion apps/web/src/components/layout/MainLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const MainLayout: FC<PropsWithChildren> = ({ children }) => {
return (
<div className="font-poppins m-0 flex h-screen flex-col items-center justify-between p-0">
<Navbar />
<main className="mb-auto mt-20 w-full">{children}</main>
<main className="mx-auto mb-auto mt-20 w-full max-w-screen-xl px-4 sm:px-9">{children}</main>
<Footer />
</div>
)
Expand Down
40 changes: 22 additions & 18 deletions apps/web/src/pages/webshop/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,28 @@ const LandingPage: NextPageWithLayout<InferGetServerSidePropsType<typeof getServ

// render product
return (
<div
className="mx-10 grid w-full justify-items-start"
style={{
gridTemplateColumns: "repeat(auto-fit, 250px)",
}}
>
<h1>Produkter</h1>
{products.map((product) => (
<a
key={product.id}
className="border-slate-4 block w-64 rounded-md border border-black p-8 shadow-md"
href={`/api/checkout_sessions?price_id=${product.price_id}`}
>
<img className="mt-2" src={product.image} width={200} height={200}></img>
<p className="mt-4 text-sm">{product.name}</p>
<p className="text-lg">{product.price} kr</p>
</a>
))}
<div>
<h1 className="mb-8">Produkter</h1>
<div
className="mb-32 grid w-full justify-items-start"
style={{
gridTemplateColumns: "repeat(auto-fit, 250px)",
}}
>
{products.map((product) => (
<a
key={product.id}
className="border-slate-4 block w-64 self-start rounded-md border border-black p-8 shadow-md"
href={`/api/checkout_sessions?price_id=${product.price_id}`}
>
<div className="mx-auto h-40 w-40 overflow-hidden">
<img className="mt-2 rounded-xl" src={product.image} width={200} height={200}></img>
</div>
<p className="mt-4 text-sm">{product.name}</p>
<p className="text-lg">{product.price} kr</p>
</a>
))}
</div>
</div>
)
}
Expand Down