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 './button'
+import { Button } from '~/components/ui/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'
-// 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