style: product page responsiviness

Author: agilejson

components/product/gallery.tsx

@@ -32,7 +32,7 @@ export function Gallery({ images, options, title }: GalleryProps) {
   const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0
 
   return (
-    <div className="relative flex h-max w-full max-w-[700px] flex-col items-center justify-center border border-black p-10">
+    <div className="relative flex h-max w-full max-w-[700px] flex-col items-center justify-center border border-black p-10 tablet:p-4">
       <div className="relative aspect-[700/600] w-full">
         <Image
           src={productImages[imageIndex >= productImages.length || imageIndex < 0 ? 0 : imageIndex].url}
@@ -43,7 +43,7 @@ export function Gallery({ images, options, title }: GalleryProps) {
         />
       </div>
       {productImages.length > 1 && (
-        <ul className="mt-6 flex gap-5">
+        <ul className="mt-6 flex gap-2">
           {productImages?.map((image, index) => {
             const isActive = index === imageIndex
             const imageSearchParams = new URLSearchParams(searchParams.toString())

components/product/price.tsx

@@ -43,7 +43,7 @@ export function Price({ amount, variants, options }: PriceProps) {
 
   return (
     <div>
-      <span className="text-3xl font-bold">{formatPriceToBrl(price)}</span>
+      <span className="text-3xl font-bold tablet:text-xl">{formatPriceToBrl(price)}</span>
     </div>
   )
 }

components/product/product.tsx

@@ -22,14 +22,15 @@ export async function Product({ handle }: ProductProps) {
   const options = product.options
 
   return (
-    <div className="relative flex h-max w-full gap-2">
+    <div className="relative flex h-max w-full gap-2 tablet:flex-col">
       <Gallery images={images} options={options} title={product.title} />
-      <div className="flex aspect-[700/600] w-full max-w-[600px] flex-col justify-between border border-black bg-white p-5">
+      <div className="flex aspect-[700/600] w-full max-w-[600px] flex-col justify-between border border-black bg-white p-5 tablet:aspect-auto tablet:max-w-full tablet:gap-10">
         <div>
           <div className="flex flex-col gap-2">
-            <span className="text-3xl">{product.title}</span>
+            <span className="text-3xl tablet:text-xl">{product.title}</span>
             <Price amount={price} variants={variants} options={options} />
           </div>
+
           <VariantSelector variants={variants} options={options} />
           <Description />
         </div>

components/product/variant-selector.tsx

@@ -38,8 +38,8 @@ export function VariantSelector({ options, variants }: VariantSelectorProps) {
         return (
           <div key={option.id}>
             <div className="flex flex-col gap-2">
-              <span className="text-sm">{option.name.toLocaleUpperCase()}</span>
-              <ul className="flex gap-4">
+              <span className="text-sm mobile:text-xs">{option.name.toLocaleUpperCase()}</span>
+              <ul className="flex flex-wrap gap-4">
                 {option.values.map((value) => {
                   const optionNameLowerCase = option.name.toLocaleLowerCase()
                   const optionSearchParams = new URLSearchParams(searchParams.toString())
@@ -63,7 +63,7 @@ export function VariantSelector({ options, variants }: VariantSelectorProps) {
                         href={optionUrl}
                         aria-disabled={!isAvailableForSale}
                         data-active={isActive}
-                        className={cn('w-max border border-black px-2 py-1 text-sm', {
+                        className={cn('w-max border border-black px-2 py-1 text-xs', {
                           'cursor-default bg-black text-white': isActive,
                           'hover:bg-neutral-200': !isActive && isAvailableForSale,
                           'pointer-events-none border-neutral-400 bg-neutral-200 text-neutral-400': !isAvailableForSale,