modal measurements wip (#115)

* modal measurements wip * underlined button * fixes * change naming --------- Co-authored-by: maksim hodasevich <maksim.hodasevich@gmail.com>
jekabolt · Jul 30, 2024 · 2666572 · 2666572
1 parent 7c154f2
commit 2666572
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 18 deletions.
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -17,7 +17,7 @@ export default function NotFound() {
           please go back to the homepage or contact us if the problem persists.
         </p>
         <div className="flex gap-x-20">
-          <Button asChild style={ButtonStyle.underlinedButton}>
+          <Button asChild style={ButtonStyle.underlinedHightlightButton}>
             <Link href="/contacts">contact us</Link>
           </Button>
           <Button asChild style={ButtonStyle.simpleButton}>

diff --git a/src/app/product/[...productParams]/page.tsx b/src/app/product/[...productParams]/page.tsx
@@ -1,11 +1,15 @@
+import { addCartProduct } from "@/actions/cart";
+import AddToCartForm from "@/components/forms/AddToCartForm";
 import { MediaProvider } from "@/components/global/MediaProvider";
 import { ProductMediaItem } from "@/components/global/MediaProvider/ProductMediaItem";
+import Modal from "@/components/ui/Modal";
 import CoreLayout from "@/components/layouts/CoreLayout";
+import MeasurementsModalContent from "@/components/product/MeasurementsModalContent";
+import Button from "@/components/ui/Button";
+import { ButtonStyle } from "@/components/ui/Button/styles";
 import { CURRENCY_MAP, MAX_LIMIT } from "@/constants";
 import { serviceClient } from "@/lib/api";
 import { notFound } from "next/navigation";
-import { addCartProduct } from "@/actions/cart";
-import AddToCartForm from "@/components/forms/AddToCartForm";
 
 interface ProductPageProps {
   params: {
@@ -75,7 +79,18 @@ export default async function ProductPage({ params }: ProductPageProps) {
           <div className="mt-4">
             {product?.product?.productDisplay?.productBody?.description}
           </div>
-          <div className="mt-4">measurements</div>
+          <div className="mt-4">
+            <Modal
+              openElement={
+                <Button asChild style={ButtonStyle.underlinedButton}>
+                  measurements
+                </Button>
+              }
+            >
+              <MeasurementsModalContent />
+            </Modal>
+          </div>
+
           {baseCurrencyPrice &&
             product?.product?.slug &&
             product?.sizes?.length && (

diff --git a/src/components/cart/CartPopup.tsx b/src/components/cart/CartPopup.tsx
@@ -27,7 +27,7 @@ export default function CartPopup({
       <div className="group relative" ref={ref}>
         <Button
           onClick={() => setOpenStatus(!open)}
-          style={ButtonStyle.underlinedButton}
+          style={ButtonStyle.underlinedHightlightButton}
         >
           cart {itemsQuantity ? `(${itemsQuantity})` : ""}
         </Button>

diff --git a/src/components/global/Header/useMobileMenu.tsx b/src/components/global/Header/useMobileMenu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Dispatch, SetStateAction, useState } from "react";
 import { useClickAway } from "@uidotdev/usehooks";
+import { Dispatch, SetStateAction, useState } from "react";
 
 import Button from "@/components/ui/Button";
 import { ButtonStyle } from "@/components/ui/Button/styles";
@@ -49,19 +49,19 @@ function MobileMenuDropdown({
         {"[x]"}
       </button>
       <nav className="space-y-6">
-        <Button asChild style={ButtonStyle.underlinedButton}>
+        <Button asChild style={ButtonStyle.underlinedHightlightButton}>
           <Link href="/catalog">catalog</Link>
         </Button>
-        <Button asChild style={ButtonStyle.underlinedButton}>
+        <Button asChild style={ButtonStyle.underlinedHightlightButton}>
           <Link href="/archive">archive</Link>
         </Button>
-        <Button asChild style={ButtonStyle.underlinedButton}>
+        <Button asChild style={ButtonStyle.underlinedHightlightButton}>
           <Link href="/about">about</Link>
         </Button>
-        <Button asChild style={ButtonStyle.underlinedButton}>
+        <Button asChild style={ButtonStyle.underlinedHightlightButton}>
           <Link href="/shipping">shipping</Link>
         </Button>
-        <Button asChild style={ButtonStyle.underlinedButton}>
+        <Button asChild style={ButtonStyle.underlinedHightlightButton}>
           <Link href="/contacts">contacts</Link>
         </Button>
       </nav>

diff --git a/src/components/layouts/CoreLayout.tsx b/src/components/layouts/CoreLayout.tsx
@@ -28,13 +28,13 @@ export default function CoreLayout({
         <div className="flex">
           <div className="relative hidden w-24 md:block">
             <nav className="sticky top-24 flex flex-col items-center gap-60">
-              <Button style={ButtonStyle.underlinedButton}>
+              <Button style={ButtonStyle.underlinedHightlightButton}>
                 <Link href="/catalog">catalog</Link>
               </Button>
-              <Button style={ButtonStyle.underlinedButton}>
+              <Button style={ButtonStyle.underlinedHightlightButton}>
                 <Link href="/archive">archive</Link>
               </Button>
-              <Button style={ButtonStyle.underlinedButton}>
+              <Button style={ButtonStyle.underlinedHightlightButton}>
                 <Link href="/shipping">shipping</Link>
               </Button>
             </nav>
@@ -64,10 +64,10 @@ export default function CoreLayout({
                   </div>
                 </Suspense>
               </CartPopup>
-              <Button style={ButtonStyle.underlinedButton}>
+              <Button style={ButtonStyle.underlinedHightlightButton}>
                 <Link href="/about">about</Link>
               </Button>
-              <Button style={ButtonStyle.underlinedButton}>
+              <Button style={ButtonStyle.underlinedHightlightButton}>
                 <Link href="/contacts">contacts</Link>
               </Button>
             </nav>

diff --git a/src/components/product/MeasurementsModalContent.tsx b/src/components/product/MeasurementsModalContent.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { useLockBodyScroll } from "@uidotdev/usehooks";
+
+export default function MeasurementsModalContent() {
+  useLockBodyScroll();
+  return (
+    <div className="flex h-full w-full pt-20 text-buttonTextColor">
+      <div className="w-1/2 ">Image placeholder</div>
+      <div className="w-1/2 ">
+        <div className="mb-20 flex h-full flex-col">
+          <div className="h-1/3">measurements</div>
+          <div className="flex h-1/3 gap-4">
+            <div>xs</div>
+            <div>s</div>
+            <div>...buttons here taken from dictionary</div>
+          </div>
+          <div className="flex h-1/3 gap-40">
+            <div className="flex flex-col gap-4">
+              <div>length</div>
+              <div>chest</div>
+              <div>shoulders</div>
+            </div>
+            <div className="flex flex-col gap-4">
+              <div>74cm</div>
+              <div>74cm</div>
+              <div>...values taken from dictionary</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Button/button.stories.ts b/src/components/ui/Button/button.stories.ts
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ButtonStyle } from "@/components/ui/Button/styles";
 import Button from "@/components/ui/Button";
+import { ButtonStyle } from "@/components/ui/Button/styles";
+import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
   title: "UI/Button",
@@ -37,6 +37,13 @@ export const UnderlinedButton: Story = {
   },
 };
 
+export const UnderlinedHightlightButton: Story = {
+  args: {
+    style: ButtonStyle.underlinedHightlightButton,
+    children: "underlined hightlight button",
+  },
+};
+
 export const SimpleButton: Story = {
   args: {
     style: ButtonStyle.simpleButton,

diff --git a/src/components/ui/Button/styles.tsx b/src/components/ui/Button/styles.tsx
@@ -2,6 +2,7 @@ export enum ButtonStyle {
   default = "default",
   bigButton = "bigButton",
   underlinedButton = "underlinedButton",
+  underlinedHightlightButton = "underlinedHightlightButton",
   simpleButton = "simpleButton",
 }
 
@@ -14,6 +15,16 @@ function DefaultStyleComponent({ children }: StyleComponentType) {
 }
 
 function UnderlinedButtonStyleComponent({ children }: StyleComponentType) {
+  return (
+    <span className="cursor-pointer text-sm text-textColor underline">
+      {children}
+    </span>
+  );
+}
+
+function UnderlinedHightlightButtonStyleComponent({
+  children,
+}: StyleComponentType) {
   return (
     <span className="text-sm text-highlightTextColor underline">
       {children}
@@ -39,6 +50,8 @@ function SimpleButtonStyleComponent({ children }: StyleComponentType) {
 
 const componentsStyleMap: Record<ButtonStyle, any> = {
   [ButtonStyle.underlinedButton]: UnderlinedButtonStyleComponent,
+  [ButtonStyle.underlinedHightlightButton]:
+    UnderlinedHightlightButtonStyleComponent,
   [ButtonStyle.bigButton]: BigButtonStyleComponent,
   [ButtonStyle.default]: DefaultStyleComponent,
   [ButtonStyle.simpleButton]: SimpleButtonStyleComponent,

diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Modal({
+  children,
+  openElement,
+}: {
+  children: React.ReactNode;
+  openElement: React.ReactNode;
+}) {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const openModal = () => setModalOpen(true);
+  const closeModal = () => setModalOpen(false);
+
+  return (
+    <div>
+      <div onClick={openModal}>{openElement}</div>
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 bg-textColor">
+          <button
+            onClick={closeModal}
+            className="absolute right-4 top-4 cursor-pointer text-buttonTextColor"
+          >
+            [closeIcon]
+          </button>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}