From feff32f588954332be057d842f935b68190ec1e9 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 23 Feb 2025 19:43:45 +0800
Subject: [PATCH] feat: update social share component, and enhance modal
 structure

---
 app/components/popup/modal.tsx                |  6 ++--
 .../ui/{icons-social.tsx => social-share.tsx} |  0
 app/layouts/news/default.tsx                  |  6 ++--
 .../news}/form-forgot-password.tsx            |  0
 .../ui => layouts/news}/form-login.tsx        |  3 +-
 .../ui => layouts/news}/form-register.tsx     |  0
 .../ui => layouts/news}/form-subscription.tsx |  0
 app/pages/news-detail/index.tsx               |  6 ++--
 package.json                                  |  4 ++-
 pnpm-lock.yaml                                | 30 ++++++++++++++-----
 10 files changed, 37 insertions(+), 18 deletions(-)
 rename app/components/ui/{icons-social.tsx => social-share.tsx} (100%)
 rename app/{components/ui => layouts/news}/form-forgot-password.tsx (100%)
 rename app/{components/ui => layouts/news}/form-login.tsx (98%)
 rename app/{components/ui => layouts/news}/form-register.tsx (100%)
 rename app/{components/ui => layouts/news}/form-subscription.tsx (100%)

diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx
index c7bea37..544ce51 100644
--- a/app/components/popup/modal.tsx
+++ b/app/components/popup/modal.tsx
@@ -23,7 +23,6 @@ export const PopupModal = ({
   children,
   description,
 }: ModalProperties) => {
-  if (!isOpen) return
   return (
     <Dialog
       open={isOpen}
@@ -36,7 +35,10 @@ export const PopupModal = ({
         transition
       />
       <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
-        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
+        <DialogPanel
+          transition
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+        >
           <DialogTitle className="relative flex justify-center">
             <button
               onClick={onClose}
diff --git a/app/components/ui/icons-social.tsx b/app/components/ui/social-share.tsx
similarity index 100%
rename from app/components/ui/icons-social.tsx
rename to app/components/ui/social-share.tsx
diff --git a/app/layouts/news/default.tsx b/app/layouts/news/default.tsx
index 58fe200..d231cd5 100644
--- a/app/layouts/news/default.tsx
+++ b/app/layouts/news/default.tsx
@@ -3,10 +3,10 @@ import { type PropsWithChildren } from 'react'
 import { PopupModal } from '~/components/popup/modal'
 import { SuccessModal } from '~/components/popup/success-modal'
 import Banner from '~/components/ui/banner'
-import FormForgotPassword from '~/components/ui/form-forgot-password'
-import { FormLogin } from '~/components/ui/form-login'
-import { FormRegister } from '~/components/ui/form-register'
 import { useNewsContext } from '~/contexts/news'
+import FormForgotPassword from '~/layouts/news/form-forgot-password'
+import { FormLogin } from '~/layouts/news/form-login'
+import { FormRegister } from '~/layouts/news/form-register'
 
 import { FooterLinks } from './footer-links'
 import { FooterNewsletter } from './footer-newsletter'
diff --git a/app/components/ui/form-forgot-password.tsx b/app/layouts/news/form-forgot-password.tsx
similarity index 100%
rename from app/components/ui/form-forgot-password.tsx
rename to app/layouts/news/form-forgot-password.tsx
diff --git a/app/components/ui/form-login.tsx b/app/layouts/news/form-login.tsx
similarity index 98%
rename from app/components/ui/form-login.tsx
rename to app/layouts/news/form-login.tsx
index dff3dcd..680201b 100644
--- a/app/components/ui/form-login.tsx
+++ b/app/layouts/news/form-login.tsx
@@ -2,8 +2,7 @@
 import { useState, type Dispatch, type SetStateAction } from 'react'
 
 import { EyeIcon } from '~/components/icons/eye'
-
-import { Button } from './button'
+import { Button } from '~/components/ui/button'
 
 type TProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
diff --git a/app/components/ui/form-register.tsx b/app/layouts/news/form-register.tsx
similarity index 100%
rename from app/components/ui/form-register.tsx
rename to app/layouts/news/form-register.tsx
diff --git a/app/components/ui/form-subscription.tsx b/app/layouts/news/form-subscription.tsx
similarity index 100%
rename from app/components/ui/form-subscription.tsx
rename to app/layouts/news/form-subscription.tsx
diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx
index 988c04b..27f4943 100644
--- a/app/pages/news-detail/index.tsx
+++ b/app/pages/news-detail/index.tsx
@@ -1,9 +1,9 @@
 import Breadcrumb from '~/components/ui/breadcrumb'
 import { Card } from '~/components/ui/card'
 import { Carousel } from '~/components/ui/carousel'
-import IconsSocial from '~/components/ui/icons-social'
-// eslint-disable-next-line no-restricted-imports
-import { BERITA, CONTENT } from '~/pages/news-detail/data'
+import IconsSocial from '~/components/ui/social-share'
+
+import { BERITA, CONTENT } from './data'
 
 export const NewsDetailPage = () => {
   const { title, content, featured, slug, author, date, tags } = CONTENT
diff --git a/package.json b/package.json
index 11d67d2..59d46b2 100644
--- a/package.json
+++ b/package.json
@@ -23,8 +23,10 @@
     "isbot": "^5.1.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
     "react-router": "^7.1.3",
-    "tailwind-merge": "^3.0.1"
+    "tailwind-merge": "^3.0.1",
+    "zod": "link:@hookform/resolvers/zod"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71a0982..d59d1e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,12 +35,18 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.0.0(react@19.0.0)
+      react-hook-form:
+        specifier: ^7.54.2
+        version: 7.54.2(react@19.0.0)
       react-router:
         specifier: ^7.1.3
         version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       tailwind-merge:
         specifier: ^3.0.1
         version: 3.0.1
+      zod:
+        specifier: link:@hookform/resolvers/zod
+        version: link:@hookform/resolvers/zod
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.6.1
@@ -3402,6 +3408,12 @@ packages:
     peerDependencies:
       react: ^19.0.0
 
+  react-hook-form@7.54.2:
+    resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-hotkeys-hook@4.6.1:
     resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
     peerDependencies:
@@ -4138,8 +4150,8 @@ packages:
     peerDependencies:
       zod: ^3.18.0
 
-  zod@3.24.1:
-    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+  zod@3.24.2:
+    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
 
 snapshots:
 
@@ -7053,8 +7065,8 @@ snapshots:
       strip-json-comments: 5.0.1
       summary: 2.1.0
       typescript: 5.7.3
-      zod: 3.24.1
-      zod-validation-error: 3.4.0(zod@3.24.1)
+      zod: 3.24.2
+      zod-validation-error: 3.4.0(zod@3.24.2)
 
   language-subtag-registry@0.3.23: {}
 
@@ -7595,6 +7607,10 @@ snapshots:
       react: 19.0.0
       scheduler: 0.25.0
 
+  react-hook-form@7.54.2(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0
@@ -8397,8 +8413,8 @@ snapshots:
 
   yocto-queue@1.1.1: {}
 
-  zod-validation-error@3.4.0(zod@3.24.1):
+  zod-validation-error@3.4.0(zod@3.24.2):
     dependencies:
-      zod: 3.24.1
+      zod: 3.24.2
 
-  zod@3.24.1: {}
+  zod@3.24.2: {}