crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-09 19:27:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modify main page styling

Browse Source
This commit is contained in:
Minjee Son 2024-09-09 19:20:37 +01:00
parent 26bf7d8dfb
commit 792f02645a
3 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/page.tsx
View File

@ -2,7 +2,7 @@ import Error from 'app/error';
import Footer from 'components/layout/footer'; import Footer from 'components/layout/footer';
import { Navbar } from 'components/layout/navbar'; import { Navbar } from 'components/layout/navbar';
import Search from 'components/layout/navbar/search'; import Search from 'components/layout/navbar/search';
import PriceBoxes from 'components/price-boxes'; import { PriceBox } from 'components/price-box';
import { getCollectionProducts } from 'lib/shopify'; import { getCollectionProducts } from 'lib/shopify';
import Image from 'next/image'; import Image from 'next/image';
@ -24,28 +24,25 @@ export default async function HomePage() {
<> <>
<section className="relative"> <section className="relative">
<Navbar /> <Navbar />
<div className="relative w-screen"> <div className={'relative h-screen w-screen'}>
<Image <Image
src={ src={
products[0].featuredImage.url || '' //Todo: default image products[0].featuredImage.url || '' //Todo: default image
} }
alt={products[0].featuredImage.altText || 'Main product'} alt={products[0].featuredImage.altText || 'Main product'}
width={products[0].featuredImage.width} fill
height={products[0].featuredImage.height} objectFit="cover"
quality={100} quality={100}
priority priority
/> />
</div> </div>
<div className="absolute bottom-0 flex w-full flex-col items-center text-lightText"> <div className="absolute bottom-20 flex w-full flex-col items-center text-lightText">
<h1 className="text-xl">{products[0].title}</h1> <h1 className="text-xl">{products[0].title}</h1>
<span className="mb-6 mt-1 text-sm text-lightText/80">Read more</span> <span className="mb-6 mt-1 text-sm text-lightText/80">Read more</span>
<PriceBoxes <div className={`text-mainBG flex w-[384px] justify-center gap-[10px]`}>
products={[ <PriceBox title="Box of 20" price={2460} />
{ title: 'Box of 20', price: '£2,460' }, <PriceBox title="Single Cigar" price={120} />
{ title: 'Single Cigar', price: '£120' } </div>
]}
totalWidth={384}
/>
</div> </div>
</section> </section>
<section className="flex"> <section className="flex">

13
components/price-box.tsx Normal file
View File

@ -0,0 +1,13 @@
interface PriceBoxProps {
title: string;
price: number;
}
export const PriceBox = ({ title, price }: PriceBoxProps) => {
return (
<div className="flex w-full flex-col items-center gap-[5px] rounded bg-black/50 p-2">
<p>{title}</p>
<p className="text-xs text-lightText/80">£{price.toLocaleString('en-GB')}</p>
</div>
);
};

29
components/price-boxes.tsx
View File

@ -1,29 +0,0 @@
interface PriceBoxesProps {
products: { title: string; price: string }[];
totalWidth: number;
}
const PriceBoxes = ({ products, totalWidth }: PriceBoxesProps) => {
return (
<div className={`text-mainBG flex w-[${totalWidth}px] justify-center gap-[10px]`}>
{products.map(({ title, price }) => (
<PriceBox title={title} price={price} />
))}
</div>
);
};
export default PriceBoxes;
interface PriceBoxProps {
title: string;
price: string;
}
const PriceBox = ({ title, price }: PriceBoxProps) => {
return (
<div className="flex w-full flex-col items-center gap-[5px] rounded bg-black/50">
<p>{title}</p>
<p className="text-xs text-lightText/80">{price}</p>
</div>
);
};