diff --git a/public/rpkm/instagram-icon.svg b/public/rpkm/instagram-icon.svg new file mode 100644 index 00000000..ebb50446 --- /dev/null +++ b/public/rpkm/instagram-icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/rpkm/person-icon.svg b/public/rpkm/person-icon.svg new file mode 100644 index 00000000..73805484 --- /dev/null +++ b/public/rpkm/person-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/rpkm/star.svg b/public/rpkm/star.svg new file mode 100644 index 00000000..426e53c3 --- /dev/null +++ b/public/rpkm/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/globals.css b/src/app/globals.css index e832e52a..84469129 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -14,4 +14,4 @@ background-repeat: repeat; background-size: cover; } -} +} \ No newline at end of file diff --git a/src/components/rpkm/Modal/BaanModal.tsx b/src/components/rpkm/Modal/BaanModal.tsx new file mode 100644 index 00000000..87a066f1 --- /dev/null +++ b/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 = ({ + open, + setOpen, + name, + content, + size, + currentPeople, + capacity, + instagram, + image, + callBackFunction, +}) => { + const [mode, setMode] = useState<'th' | 'en'>('th'); + + return ( + +
+
+
+ star +

{size}

+
+ +
+
+

+ {currentPeople} + /{capacity} +

+ person icon +
+
+
+ + +
+
+
+ baan image +
+
+

{name[mode]}

+
+

+ {content[mode]} +

+
+
+
+ instagram icon +

{instagram}

+
+
+ setOpen(false)} + borderClassName={modalStyles.blue.button['cancel-border']} + backgroundClassName={modalStyles.blue.button['cancel-background']} + > + กลับ + + + เพิ่มบ้านนี้ + +
+
+ + ); +}; + +export default BaanModal; diff --git a/src/components/rpkm/Modal/BaseModal.tsx b/src/components/rpkm/Modal/BaseModal.tsx new file mode 100644 index 00000000..7e3fcecc --- /dev/null +++ b/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 = ({ variant, open, children }) => { + const { background } = modalStyles[variant]; + + if (!open) return null; + + return ( +
+
+
+ {children} +
+
+
+ ); +}; + +export default BaseModal; diff --git a/src/components/rpkm/Modal/Modal.tsx b/src/components/rpkm/Modal/Modal.tsx new file mode 100644 index 00000000..f558a0fe --- /dev/null +++ b/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 = ({ + variant, + open, + setOpen, + callBackFunction, + children, +}) => { + const { button } = modalStyles[variant]; + + if (!open) return null; + + return ( + + {children} +
+ setOpen(false)} + borderClassName={button['cancel-border']} + backgroundClassName={button['cancel-background']} + > + ยกเลิก + + + ยืนยัน + +
+ + ); +}; + +export default Modal; diff --git a/src/components/rpkm/Modal/ModalButton.tsx b/src/components/rpkm/Modal/ModalButton.tsx new file mode 100644 index 00000000..48676509 --- /dev/null +++ b/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 = ({ + callBackFunction, + borderClassName, + backgroundClassName, + children, +}) => { + return ( + + ); +}; + +export default ModalButton; diff --git a/src/components/rpkm/Modal/ModalStyle.ts b/src/components/rpkm/Modal/ModalStyle.ts new file mode 100644 index 00000000..de53ecee --- /dev/null +++ b/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; diff --git a/src/components/rpkm/modal.tsx b/src/components/rpkm/modal.tsx deleted file mode 100644 index 439cfef4..00000000 --- a/src/components/rpkm/modal.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { cn } from '@/lib/utils'; - -interface ModalProps { - variant: 'red' | 'blue'; - open: boolean; - setOpen: (open: boolean) => void; - callBackFunction: () => void; - children: React.ReactNode; -} - -const modalStyles = { - red: { - background: 'bg-[#C94B4B]', - button: { - 'accept-background': 'bg-[#183F86]', - 'accept-border': 'bg-[#F5F5F5]', - 'cancel-background': 'bg-[#F5F5F5]', - 'cancel-border': 'bg-[#414643]', - }, - }, - blue: { - background: 'bg-[#183F86]', - button: { - 'accept-background': 'bg-[#C94B4B]', - 'accept-border': 'bg-[#EAE3C3]', - 'cancel-background': 'bg-[#313131] text-[#F5F5F5]', - 'cancel-border': 'bg-[#F5F5F5]', - }, - }, -}; - -const Modal: React.FC = ({ - variant, - open, - setOpen, - callBackFunction, - children, -}) => { - const { background, button } = modalStyles[variant]; - - if (!open) return null; - - return ( -
-
-
- {children} -
- - -
-
-
-
- ); -}; - -export default Modal;