Icy fe/baan modal

src/app/globals.css

@@ -14,4 +14,4 @@
         background-repeat: repeat;
         background-size: cover;
     }
-}
+}

src/components/rpkm/Modal/BaanModal.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import Image, { StaticImageData } from 'next/image';
+
+import { cn } from '@/lib/utils';
+
+import modalStyles from './ModalStyle';
+
+import BaseModal from '@/components/rpkm/Modal/BaseModal';
+import ModalButton from '@/components/rpkm/Modal/ModalButton';
+import PersonIcon from '@public/rpkm/person-icon.svg';
+import InstagramIcon from '@public/rpkm/instagram-icon.svg';
+import Star from '@public/rpkm/star.svg';
+
+interface BaanModalProps {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  name: {
+    th: string;
+    en: string;
+  };
+  content: {
+    th: string;
+    en: string;
+  };
+  size: string;
+  currentPeople: number;
+  capacity: number;
+  instagram: string;
+  image: StaticImageData;
+  callBackFunction: (params: unknown) => void;
+}
+
+/**
+ * BaanModal component
+ * @param open - boolean
+ * @param setOpen - function
+ * @param name - { th: string, en: string }
+ * @param content - { th: string, en: string }
+ * @param size - string
+ * @param currentPeople - number
+ * @param capacity - number
+ * @param instagram - string
+ * @param image - StaticImageData (next/image)
+ * @param callBackFunction - function => void
+ * @returns Styled baan modal component
+ */
+const BaanModal: React.FC<BaanModalProps> = ({
+  open,
+  setOpen,
+  name,
+  content,
+  size,
+  currentPeople,
+  capacity,
+  instagram,
+  image,
+  callBackFunction,
+}) => {
+  const [mode, setMode] = useState<'th' | 'en'>('th');
+
+  return (
+    <BaseModal
+      variant="blue"
+      open={open}
+    >
+      <div className="w-[75vw]">
+        <div className="flex flex-row justify-between w-full items-center">
+          <div
+            className={cn(
+              'flex justify-center items-center',
+              size.length === 1 && 'ml-1'
+            )}
+          >
+            <Image
+              src={Star}
+              alt="star"
+              className="absolute -z-10"
+            />
+            <p className="font-semibold text-[#183F86]">{size}</p>
+          </div>
+
+          <div className="absolute left-[50%] -translate-x-[50%]">
+            <div className="flex items-center">
+              <p>
+                <span className="text-[#EAE3C3]">{currentPeople}</span>
+                <span className="text-white">/{capacity}</span>
+              </p>
+              <Image
+                src={PersonIcon}
+                alt="person icon"
+              />
+            </div>
+          </div>
+          <div className="flex items-center">
+            <button
+              onClick={() => setMode('th')}
+              className={cn(
+                'px-[0.6rem] rounded-l-full text-sm',
+                mode == 'th' ? 'bg-[#EB9096] text-white' : 'bg-white text-black'
+              )}
+            >
+              TH
+            </button>
+            <button
+              onClick={() => setMode('en')}
+              className={cn(
+                'px-[0.6rem] rounded-r-full text-sm',
+                mode == 'th' ? 'bg-white text-black' : 'bg-[#EB9096] text-white'
+              )}
+            >
+              EN
+            </button>
+          </div>
+        </div>
+        <div className="flex justify-center w-full my-4">
+          <Image
+            src={image}
+            alt="baan image"
+            className="w-44 p-1 border-[#F5F5F5] border-2"
+          />
+        </div>
+        <div className="text-center text-white">
+          <p className="text-xl font-bold">{name[mode]}</p>
+          <div className="flex justify-center">
+            <p className="w-4/5 text-sm max-h-20 overflow-y-scroll ">
+              {content[mode]}
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-row justify-center w-full gap-x-1 mt-2">
+          <Image
+            src={InstagramIcon}
+            alt="instagram icon"
+          />
+          <p className="text-white">{instagram}</p>
+        </div>
+        <div className="flex flex-row gap-x-3 justify-center mt-3">
+          <ModalButton
+            callBackFunction={() => setOpen(false)}
+            borderClassName={modalStyles.blue.button['cancel-border']}
+            backgroundClassName={modalStyles.blue.button['cancel-background']}
+          >
+            กลับ
+          </ModalButton>
+          <ModalButton
+            callBackFunction={callBackFunction}
+            borderClassName={modalStyles.blue.button['accept-border']}
+            backgroundClassName={modalStyles.blue.button['accept-background']}
+          >
+            เพิ่มบ้านนี้
+          </ModalButton>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default BaanModal;

src/components/rpkm/Modal/BaseModal.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+
+import modalStyles from './ModalStyle';
+
+interface ModalProps {
+  variant: 'red' | 'blue';
+  open: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * BaseModal component
+ * @param variant - red | blue
+ * @param open - boolean
+ * @param children - ReactNode
+ * @returns Styled modal component
+ */
+const BaseModal: React.FC<ModalProps> = ({ variant, open, children }) => {
+  const { background } = modalStyles[variant];
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80">
+      <div className="p-1 inv-rad inv-rad-3 bg-[#EAE3C3] min-w-[60%]">
+        <div className={cn('inv-rad inv-rad-3 p-3', background)}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BaseModal;

src/components/rpkm/Modal/Modal.tsx

@@ -0,0 +1,60 @@
+import BaseModal from '@/components/rpkm/Modal/BaseModal';
+import ModalButton from '@/components/rpkm/Modal/ModalButton';
+
+import modalStyles from './ModalStyle';
+
+interface ModalProps {
+  variant: 'red' | 'blue';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  callBackFunction: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Modal component
+ * @param variant - red | blue
+ * @param open - boolean
+ * @param setOpen - function
+ * @param callBackFunction - function
+ * @param children - ReactNode
+ * @returns Styled modal component
+ */
+const Modal: React.FC<ModalProps> = ({
+  variant,
+  open,
+  setOpen,
+  callBackFunction,
+  children,
+}) => {
+  const { button } = modalStyles[variant];
+
+  if (!open) return null;
+
+  return (
+    <BaseModal
+      variant={variant}
+      open={open}
+    >
+      {children}
+      <div className="flex flex-row gap-x-3 justify-center mt-3">
+        <ModalButton
+          callBackFunction={() => setOpen(false)}
+          borderClassName={button['cancel-border']}
+          backgroundClassName={button['cancel-background']}
+        >
+          ยกเลิก
+        </ModalButton>
+        <ModalButton
+          callBackFunction={callBackFunction}
+          borderClassName={button['accept-border']}
+          backgroundClassName={button['accept-background']}
+        >
+          ยืนยัน
+        </ModalButton>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default Modal;

src/components/rpkm/Modal/ModalButton.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/lib/utils';
+
+interface ModalButtonProps {
+  callBackFunction: (params: unknown) => void;
+  borderClassName: string;
+  backgroundClassName: string;
+  children: React.ReactNode;
+}
+
+/**
+ * ModalButton component
+ * @param callBackFunction - function
+ * @param borderClassName - string
+ * @param backgroundClassName - string
+ * @param children - ReactNode
+ * @returns Styled button component
+ */
+const ModalButton: React.FC<ModalButtonProps> = ({
+  callBackFunction,
+  borderClassName,
+  backgroundClassName,
+  children,
+}) => {
+  return (
+    <button
+      onClick={callBackFunction}
+      className={cn('p-1 inv-rad inv-rad-2 w-2/5', borderClassName)}
+    >
+      <div
+        className={cn(
+          'py-[0.3rem] px-2 inv-rad inv-rad-2',
+          backgroundClassName
+        )}
+      >
+        {children}
+      </div>
+    </button>
+  );
+};
+
+export default ModalButton;

src/components/rpkm/Modal/ModalStyle.ts

@@ -0,0 +1,22 @@
+const modalStyles = {
+  red: {
+    background: 'bg-[#C94B4B]',
+    button: {
+      'accept-background': 'bg-[#183F86] text-[#EAE3C3]',
+      'accept-border': 'bg-[#F5F5F5]',
+      'cancel-background': 'bg-[#F5F5F5] text-[#414643]',
+      'cancel-border': 'bg-[#414643]',
+    },
+  },
+  blue: {
+    background: 'bg-[#183F86]',
+    button: {
+      'accept-background': 'bg-[#C94B4B] text-[#EAE3C3]',
+      'accept-border': 'bg-[#EAE3C3]',
+      'cancel-background': 'bg-[#313131] text-[#F5F5F5]',
+      'cancel-border': 'bg-[#F5F5F5]',
+    },
+  },
+};
+
+export default modalStyles;