crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 14:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

rebase continue

Browse Source
This commit is contained in:
StephDietz 2023-07-12 10:40:33 -05:00
parent 51431f7fa3
commit 29a3719280
4 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -33,7 +33,7 @@ const inter = Inter({
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.variable}>
<body className="text-black bg-gray-50 selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
<body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
<Navbar />
<Suspense>
<main>{children}</main>

10
components/carousel.tsx
View File

@ -1,11 +1,7 @@
import { getCollectionProducts } from 'lib/shopify';
import Image from 'next/image';
import Link from 'next/link';
<<<<<<< HEAD
import Label from './label';
=======
import Price from './price';
>>>>>>> 27a839e (home page updated UI design)
export async function Carousel() {
// Collections that start with `hidden-*` are hidden from the search page.
@ -14,8 +10,8 @@ export async function Carousel() {
if (!products?.length) return null;
return (
<div className="relative w-full pb-6 overflow-hidden">
<div className="flex space-x-4 animate-carousel">
<div className="relative w-full overflow-hidden pb-6">
<div className="flex animate-carousel space-x-4">
{[...products, ...products].map((product, i) => (
<Link
key={`${product.handle}${i}`}
@ -25,7 +21,7 @@ export async function Carousel() {
{product.featuredImage ? (
<Image
alt={product.title}
className="object-contain h-full"
className="h-full object-contain"
fill
sizes="33vw"
src={product.featuredImage.url}

4
components/label.tsx
View File

@ -33,12 +33,12 @@ const Label = ({
>
<h3
data-testid="product-name"
className="inline pl-2 mr-6 font-semibold leading-none tracking-tight"
className="mr-6 inline pl-2 font-semibold leading-none tracking-tight"
>
{title}
</h3>
<Price
className="flex-none p-2 font-semibold text-white bg-blue-600 rounded-full"
className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
amount={amount}
currencyCode={currencyCode}
/>

6
components/product/gallery.tsx
View File

@ -25,7 +25,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
<div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
{images[currentImage] && (
<Image
className="relative object-contain w-full h-full"
className="relative h-full w-full object-contain"
height={600}
width={600}
alt={images[currentImage]?.altText as string}
@ -35,7 +35,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? (
<div className="absolute bottom-[15%] flex w-full justify-center">
<div className="flex items-center mx-auto text-gray-500 border border-white rounded-full h-11 bg-light/80 backdrop-blur dark:border-black dark:bg-dark/80">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-light/80 text-gray-500 backdrop-blur dark:border-black dark:bg-dark/80">
<button
aria-label="Previous product image"
onClick={() => handleNavigate('previous')}
@ -43,7 +43,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
>
<ArrowLeftIcon className="h-5" />
</button>
<div className="w-px h-6 mx-1 bg-gray-500"></div>
<div className="mx-1 h-6 w-px bg-gray-500"></div>
<button
aria-label="Next product image"
onClick={() => handleNavigate('next')}