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="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="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 <Gallery
images={product.images.map((image: Image) => ({ images={product.images.map((image: Image) => ({
src: image.url, src: image.url,
@ -93,7 +93,7 @@ export default async function ProductPage({ params }: { params: { handle: string
</div> </div>
<div className="lg:col-span-3 lg:grid lg:grid-cols-6"> <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} /> <ProductDescription product={product} />
</div> </div>
</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>
<div className="lg:col-span-3 lg:grid lg:grid-cols-6"> <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} /> <ProductDescription product={product} />
</div> </div>
</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'>) { function GridItem(props: React.ComponentProps<'li'>) {
return ( 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} {props.children}
</li> </li>
); );

2
components/grid/tile.tsx
View File

@ -20,7 +20,7 @@ export function GridTileImage({
return ( return (
<div <div
className={clsx( 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, relative: label,
'border-2 border-gray-600': active, 'border-2 border-gray-600': active,

26
components/product/gallery.tsx
View File

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

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

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