From 9d6d6830eb89c75e1dc28b4498f723a5fd74979a Mon Sep 17 00:00:00 2001 From: Borworntat Dendurongkul Date: Fri, 12 Jul 2024 02:04:07 +0700 Subject: [PATCH 1/7] feat: baan modal --- src/components/rpkm/BaanModal.tsx | 79 +++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/components/rpkm/BaanModal.tsx diff --git a/src/components/rpkm/BaanModal.tsx b/src/components/rpkm/BaanModal.tsx new file mode 100644 index 00000000..7c43f24a --- /dev/null +++ b/src/components/rpkm/BaanModal.tsx @@ -0,0 +1,79 @@ +import { useState } from 'react'; +import Image, { StaticImageData } from 'next/image'; + +import { cn } from '@/lib/utils'; + +import Modal from './modal'; + +interface BaanModalProps { + open: boolean; + setOpen: (value: boolean) => void; + callBackFunction: () => void; + name: { + th: string; + en: string; + }; + content: { + th: string; + en: string; + }; + size: string; + image: StaticImageData; +} + +const BaanModal: React.FC = ({ + open, + setOpen, + callBackFunction, + name, + content, + size, + image, +}) => { + const [mode, setMode] = useState<'th' | 'en'>('th'); + return ( + +
+

{size}

+
+ + +
+
+
+ baan image +
+
+

{name[mode]}

+

{content[mode]}

+
+ + ); +}; + +export default BaanModal; From 4430e5a8676e15765edc5ad6f20ff91c630bad39 Mon Sep 17 00:00:00 2001 From: Borworntat Dendurongkul Date: Fri, 12 Jul 2024 02:50:35 +0700 Subject: [PATCH 2/7] refactor: modal(s) --- public/rpkm/instagram-icon.svg | 14 +++ src/app/test/page.tsx | 39 ++++++++ src/components/rpkm/BaanModal.tsx | 79 --------------- src/components/rpkm/Modal/BaanModal.tsx | 114 ++++++++++++++++++++++ src/components/rpkm/Modal/BaseModal.tsx | 27 +++++ src/components/rpkm/Modal/Modal.tsx | 51 ++++++++++ src/components/rpkm/Modal/ModalButton.tsx | 33 +++++++ src/components/rpkm/Modal/ModalStyle.ts | 22 +++++ src/components/rpkm/modal.tsx | 88 ----------------- 9 files changed, 300 insertions(+), 167 deletions(-) create mode 100644 public/rpkm/instagram-icon.svg create mode 100644 src/app/test/page.tsx delete mode 100644 src/components/rpkm/BaanModal.tsx create mode 100644 src/components/rpkm/Modal/BaanModal.tsx create mode 100644 src/components/rpkm/Modal/BaseModal.tsx create mode 100644 src/components/rpkm/Modal/Modal.tsx create mode 100644 src/components/rpkm/Modal/ModalButton.tsx create mode 100644 src/components/rpkm/Modal/ModalStyle.ts delete mode 100644 src/components/rpkm/modal.tsx 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/src/app/test/page.tsx b/src/app/test/page.tsx new file mode 100644 index 00000000..3033c8fd --- /dev/null +++ b/src/app/test/page.tsx @@ -0,0 +1,39 @@ +'use client'; +import { useState } from 'react'; + +import BaanModal from '@/components/rpkm/Modal/BaanModal'; +import Modal from '@/components/rpkm/Modal/Modal'; + +import Flower1 from '@public/registered/flower1.png'; + +export default function TestPage() { + const [open, setOpen] = useState(false); + + return ( +
+ + { + console.log('callback function'); + }} + name={{ th: 'ชื่อ', en: 'Name' }} + content={{ th: 'เนื้อหา', en: 'Content' }} + size="S" + instagram="isd.sgcu" + image={Flower1} + /> + {/* { + console.log('callback function'); + }} + > +

Modal Content

+ */} +
+ ); +} diff --git a/src/components/rpkm/BaanModal.tsx b/src/components/rpkm/BaanModal.tsx deleted file mode 100644 index 7c43f24a..00000000 --- a/src/components/rpkm/BaanModal.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { useState } from 'react'; -import Image, { StaticImageData } from 'next/image'; - -import { cn } from '@/lib/utils'; - -import Modal from './modal'; - -interface BaanModalProps { - open: boolean; - setOpen: (value: boolean) => void; - callBackFunction: () => void; - name: { - th: string; - en: string; - }; - content: { - th: string; - en: string; - }; - size: string; - image: StaticImageData; -} - -const BaanModal: React.FC = ({ - open, - setOpen, - callBackFunction, - name, - content, - size, - image, -}) => { - const [mode, setMode] = useState<'th' | 'en'>('th'); - return ( - -
-

{size}

-
- - -
-
-
- baan image -
-
-

{name[mode]}

-

{content[mode]}

-
- - ); -}; - -export default BaanModal; diff --git a/src/components/rpkm/Modal/BaanModal.tsx b/src/components/rpkm/Modal/BaanModal.tsx new file mode 100644 index 00000000..d7477bb1 --- /dev/null +++ b/src/components/rpkm/Modal/BaanModal.tsx @@ -0,0 +1,114 @@ +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 InstagramIcon from '@public/rpkm/instagram-icon.svg'; + +interface BaanModalProps { + open: boolean; + setOpen: (value: boolean) => void; + callBackFunction: () => void; + name: { + th: string; + en: string; + }; + content: { + th: string; + en: string; + }; + size: string; + instagram: string; + image: StaticImageData; +} + +const BaanModal: React.FC = ({ + open, + setOpen, + name, + content, + size, + instagram, + image, +}) => { + const [mode, setMode] = useState<'th' | 'en'>('th'); + + const handleSelection = () => { + /* select this baan */ + console.log('select!'); + setOpen(false); + }; + + return ( + +
+
+

{size}

+
+ + +
+
+
+ baan image +
+
+

{name[mode]}

+

{content[mode]}

+
+
+ instagram icon +

{instagram}

+
+
+ setOpen(false)} + borderClassName={modalStyles.blue.button['cancel-border']} + backgroundClassName={modalStyles.blue.button['cancel-background']} + > + กลับ + + handleSelection()} + borderClassName={modalStyles.blue.button['accept-border']} + backgroundClassName={modalStyles.blue.button['accept-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..276841b6 --- /dev/null +++ b/src/components/rpkm/Modal/BaseModal.tsx @@ -0,0 +1,27 @@ +import { cn } from '@/lib/utils'; + +import modalStyles from './ModalStyle'; + +interface ModalProps { + variant: 'red' | 'blue'; + open: boolean; + children: React.ReactNode; +} + +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..bc989eed --- /dev/null +++ b/src/components/rpkm/Modal/Modal.tsx @@ -0,0 +1,51 @@ +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; +} + +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..cbc45552 --- /dev/null +++ b/src/components/rpkm/Modal/ModalButton.tsx @@ -0,0 +1,33 @@ +import { cn } from '@/lib/utils'; + +interface ModalButtonProps { + callBackFunction: (params: unknown) => void; + borderClassName: string; + backgroundClassName: string; + children: React.ReactNode; +} + +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; From 0cdb868c3e665fb65ff89169da116d05b1a2efc0 Mon Sep 17 00:00:00 2001 From: Borworntat Dendurongkul Date: Fri, 12 Jul 2024 03:06:03 +0700 Subject: [PATCH 3/7] docs: add docs to modal components --- src/app/test/page.tsx | 39 ----------------------- src/components/rpkm/Modal/BaanModal.tsx | 12 +++++++ src/components/rpkm/Modal/BaseModal.tsx | 7 ++++ src/components/rpkm/Modal/Modal.tsx | 9 ++++++ src/components/rpkm/Modal/ModalButton.tsx | 8 +++++ 5 files changed, 36 insertions(+), 39 deletions(-) delete mode 100644 src/app/test/page.tsx diff --git a/src/app/test/page.tsx b/src/app/test/page.tsx deleted file mode 100644 index 3033c8fd..00000000 --- a/src/app/test/page.tsx +++ /dev/null @@ -1,39 +0,0 @@ -'use client'; -import { useState } from 'react'; - -import BaanModal from '@/components/rpkm/Modal/BaanModal'; -import Modal from '@/components/rpkm/Modal/Modal'; - -import Flower1 from '@public/registered/flower1.png'; - -export default function TestPage() { - const [open, setOpen] = useState(false); - - return ( -
- - { - console.log('callback function'); - }} - name={{ th: 'ชื่อ', en: 'Name' }} - content={{ th: 'เนื้อหา', en: 'Content' }} - size="S" - instagram="isd.sgcu" - image={Flower1} - /> - {/* { - console.log('callback function'); - }} - > -

Modal Content

- */} -
- ); -} diff --git a/src/components/rpkm/Modal/BaanModal.tsx b/src/components/rpkm/Modal/BaanModal.tsx index d7477bb1..cd342d76 100644 --- a/src/components/rpkm/Modal/BaanModal.tsx +++ b/src/components/rpkm/Modal/BaanModal.tsx @@ -26,6 +26,18 @@ interface BaanModalProps { image: StaticImageData; } +/** + * BaanModal component + * @param open - boolean + * @param setOpen - function + * @param callBackFunction - function + * @param name - { th: string, en: string } + * @param content - { th: string, en: string } + * @param size - string + * @param instagram - string + * @param image - StaticImageData (next/image) + * @returns Styled baan modal component + */ const BaanModal: React.FC = ({ open, setOpen, diff --git a/src/components/rpkm/Modal/BaseModal.tsx b/src/components/rpkm/Modal/BaseModal.tsx index 276841b6..7e3fcecc 100644 --- a/src/components/rpkm/Modal/BaseModal.tsx +++ b/src/components/rpkm/Modal/BaseModal.tsx @@ -8,6 +8,13 @@ interface ModalProps { 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]; diff --git a/src/components/rpkm/Modal/Modal.tsx b/src/components/rpkm/Modal/Modal.tsx index bc989eed..f558a0fe 100644 --- a/src/components/rpkm/Modal/Modal.tsx +++ b/src/components/rpkm/Modal/Modal.tsx @@ -11,6 +11,15 @@ interface ModalProps { 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, diff --git a/src/components/rpkm/Modal/ModalButton.tsx b/src/components/rpkm/Modal/ModalButton.tsx index cbc45552..48676509 100644 --- a/src/components/rpkm/Modal/ModalButton.tsx +++ b/src/components/rpkm/Modal/ModalButton.tsx @@ -7,6 +7,14 @@ interface ModalButtonProps { 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, From a9a268ceb2fc8a4e8072fcc230c38a4bf491ed3d Mon Sep 17 00:00:00 2001 From: Borworntat Dendurongkul Date: Fri, 12 Jul 2024 03:47:03 +0700 Subject: [PATCH 4/7] feat: ui --- src/components/rpkm/Modal/BaanModal.tsx | 28 ++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/rpkm/Modal/BaanModal.tsx b/src/components/rpkm/Modal/BaanModal.tsx index cd342d76..2513730f 100644 --- a/src/components/rpkm/Modal/BaanModal.tsx +++ b/src/components/rpkm/Modal/BaanModal.tsx @@ -7,12 +7,12 @@ 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'; interface BaanModalProps { open: boolean; setOpen: (value: boolean) => void; - callBackFunction: () => void; name: { th: string; en: string; @@ -22,6 +22,8 @@ interface BaanModalProps { en: string; }; size: string; + currentPeople: number; + capacity: number; instagram: string; image: StaticImageData; } @@ -30,10 +32,11 @@ interface BaanModalProps { * BaanModal component * @param open - boolean * @param setOpen - function - * @param callBackFunction - 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) * @returns Styled baan modal component @@ -44,6 +47,8 @@ const BaanModal: React.FC = ({ name, content, size, + currentPeople, + capacity, instagram, image, }) => { @@ -61,9 +66,22 @@ const BaanModal: React.FC = ({ open={open} >
-
-

{size}

-
+
+

+ {size} +

+ +
+

+ {currentPeople} + /{capacity} +

+ person icon +
+
-
+

{name[mode]}

-

{content[mode]}

+
+

+ {content[mode]} +

+
-
+
instagram icon Date: Fri, 12 Jul 2024 14:14:55 +0700 Subject: [PATCH 6/7] chore: add star img --- public/rpkm/star.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 public/rpkm/star.svg 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 @@ + + + From 29bb0649bb8d2a3026c3174ac7131fe0479147ae Mon Sep 17 00:00:00 2001 From: Borworntat Dendurongkul Date: Fri, 12 Jul 2024 22:38:50 +0700 Subject: [PATCH 7/7] fix: callback function --- src/app/globals.css | 2 +- src/components/rpkm/Modal/BaanModal.tsx | 15 ++++++--------- 2 files changed, 7 insertions(+), 10 deletions(-) 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 index 246fdd86..87a066f1 100644 --- a/src/components/rpkm/Modal/BaanModal.tsx +++ b/src/components/rpkm/Modal/BaanModal.tsx @@ -27,6 +27,7 @@ interface BaanModalProps { capacity: number; instagram: string; image: StaticImageData; + callBackFunction: (params: unknown) => void; } /** @@ -40,6 +41,7 @@ interface BaanModalProps { * @param capacity - number * @param instagram - string * @param image - StaticImageData (next/image) + * @param callBackFunction - function => void * @returns Styled baan modal component */ const BaanModal: React.FC = ({ @@ -52,15 +54,10 @@ const BaanModal: React.FC = ({ capacity, instagram, image, + callBackFunction, }) => { const [mode, setMode] = useState<'th' | 'en'>('th'); - const handleSelection = () => { - /* select this baan */ - console.log('select!'); - setOpen(false); - }; - return ( = ({

{name[mode]}

-

+

{content[mode]}

@@ -135,7 +132,7 @@ const BaanModal: React.FC = ({ src={InstagramIcon} alt="instagram icon" /> -

{instagram}

+

{instagram}

= ({ กลับ handleSelection()} + callBackFunction={callBackFunction} borderClassName={modalStyles.blue.button['accept-border']} backgroundClassName={modalStyles.blue.button['accept-background']} >