feat: update social share component, and enhance modal structure

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}

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'

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 '~/components/ui/button'
-import { Button } from './button'
 
 type TProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>

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'
+import IconsSocial from '~/components/ui/social-share'
-// eslint-disable-next-line no-restricted-imports
+
-import { BERITA, CONTENT } from '~/pages/news-detail/data'
+import { BERITA, CONTENT } from './data'
 
 export const NewsDetailPage = () => {
   const { title, content, featured, slug, author, date, tags } = CONTENT

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",

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:
+  zod@3.24.2:
-    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+    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: 3.24.2
-      zod-validation-error: 3.4.0(zod@3.24.1)
+      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: {}