crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-18 23:46:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

creating responsive design

Browse Source
This commit is contained in:
Samantha Kellow 2023-11-23 19:16:34 +00:00
parent 175b5e8589
commit b70557397b
6 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/products/[handle]/page.tsx
View File

@ -83,7 +83,7 @@ export default async function ProductPage({ params }: { params: { handle: string
/>
<div className="mx-auto max-w-screen-2xl px-4">
<div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
<div className="lg:col-span-3">
<div className="lg:col-span-3 flex justify-center">
<Gallery
images={product.images.map((image: Image) => ({
src: image.url,
@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
</div>
<div className="lg:col-span-3 lg:grid lg:grid-cols-6">
<div className="py-6 lg:col-span-4 lg:col-start-2">
<div className="pt-6 lg:py-6 lg:col-span-4 lg:col-start-2">
<ProductDescription product={product} />
</div>
</div>

2
app/wall/[handle]/page.tsx
View File

@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
</div>
<div className="lg:col-span-3 lg:grid lg:grid-cols-6">
<div className="py-6 lg:col-span-4 lg:col-start-2">
<div className="py-10 lg:py-6 lg:col-span-4 lg:col-start-2">
<ProductDescription product={product} />
</div>
</div>

2
components/grid/index.tsx
View File

@ -10,7 +10,7 @@ function Grid(props: React.ComponentProps<'ul'>) {
function GridItem(props: React.ComponentProps<'li'>) {
return (
<li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
<li {...props} className={clsx('aspect-square transition-opacity flex align-middle', props.className)}>
{props.children}
</li>
);

2
components/grid/tile.tsx
View File

@ -20,7 +20,7 @@ export function GridTileImage({
return (
<div
className={clsx(
'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-gray-600 dark:bg-black',
'flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-gray-600 dark:bg-black aspect-square align-middle',
{
relative: label,
'border-2 border-gray-600': active,

16
components/product/gallery.tsx
View File

@ -20,13 +20,13 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white';
return (
<div className="mr-8 h-full">
<div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
<div className="lg:mr-8 h-full w-full justify-center">
<div className="relative mb-2 lg:mb-12 aspect-square overflow-hidden flex lg:w-full lg:h-auto">
{images[currentImageIndex] && (
<Image
className="relative h-full w-full object-cover"
height={600}
width={600}
className="relative w-full h-full object-cover"
height={500}
width={500}
alt={images[currentImageIndex]?.altText as string}
src={images[currentImageIndex]?.src as string}
priority={true}
@ -34,8 +34,8 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
)}
{images.length > 1 ? (
<div className="absolute bottom-2 flex w-full justify-center">
<div className="mx-auto flex h-8 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<div className="bottom-2 z-50 flex w-full justify-center absolute">
<div className="mx-auto flex h-8 items-center rounded-full border border-white bg-neutral-50/50 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<button
aria-label="Previous product image"
onClick={() => handleNavigate('previous')}
@ -57,7 +57,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
</div>
{images.length > 1 ? (
<div className="flex items-center justify-center gap-2 overflow-auto py-1">
<div className="flex items-center justify-center gap-2 overflow-auto py-1 pl-20 md:pl-0">
{images.map((image, index) => {
const isActive = index === currentImageIndex;
return (

2
components/product/product-description.tsx
View File

@ -10,7 +10,7 @@ export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
<h1 className="mb-2 text-4xl md:text-3xl font-medium">{product.title}</h1>
<h1 className="mb-2 text-2xl md:text-3xl font-medium">{product.title}</h1>
<div className="place-self-end mr-auto w-auto rounded-full bg-gray-600 p-2 text-sm text-white">
<Price
amount={product.priceRange.maxVariantPrice.amount}