legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refactor PopupModal to use Headless UI components and update FormLogin layout

Browse Source
This commit is contained in:
Ardeman 2025-02-22 15:17:46 +08:00
parent 531871d349
commit 54faf57262
4 changed files with 154 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/popup/modal.tsx
View File

@ -1,3 +1,4 @@
import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
import type { ReactNode } from 'react'
interface ModalProperties {
@ -13,18 +14,17 @@ export default function PopupModal({
}: ModalProperties) {
if (!isOpen) return
return (
<>
<div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
<button
onClick={onClose}
className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
<Dialog
open={isOpen}
onClose={onClose}
className="relative z-50"
>
✖
</button>
<div className="relative rounded-lg bg-white p-6 shadow-lg">
{children}
<DialogBackdrop className="fixed inset-0 bg-black/30" />
<div className="fixed inset-0 flex w-screen items-center justify-center p-4">
<DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg">
<div className="relative">{children}</div>
</DialogPanel>
</div>
</div>
</>
</Dialog>
)
}

17
app/components/ui/form-login.tsx
View File

@ -2,27 +2,14 @@
import { useState } from 'react'
import { Link } from 'react-router'
import { LeftArrow } from '~/components/icons/left-arrow'
import { APP } from '~/data/meta'
const FormLogin = () => {
const [showPassword, setShowPassword] = useState(false)
return (
<div className="flex min-h-screen items-center justify-center">
<div className="w-full max-w-md p-6">
<div className="absolute top-[80px] left-[50px]">
<Link
to="/#"
className="mt-2 h-full py-2"
>
<LeftArrow
width={'70px'}
height={'70px'}
></LeftArrow>
</Link>
</div>
<div className="flex items-center justify-center">
<div className="w-full max-w-md">
<div className="mb-6 flex justify-center">
<Link to="/news">
<img

1
package.json
View File

@ -14,6 +14,7 @@
"validate": "pnpm lint && pnpm typecheck && pnpm knip"
},
"dependencies": {
"@headlessui/react": "^2.2.0",
"@react-router/fs-routes": "^7.1.3",
"@react-router/node": "^7.1.3",
"@react-router/serve": "^7.1.3",

139
pnpm-lock.yaml generated
View File

@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@headlessui/react':
specifier: ^2.2.0
version: 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@react-router/fs-routes':
specifier: ^7.1.3
version: 7.1.3(@react-router/dev@7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1)))(typescript@5.7.3)
@ -545,9 +548,22 @@ packages:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@floating-ui/react@0.26.28':
resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@floating-ui/utils@0.2.9':
resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
'@headlessui/react@2.2.0':
resolution: {integrity: sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==}
engines: {node: '>=10'}
peerDependencies:
react: ^18 || ^19 || ^19.0.0-rc
react-dom: ^18 || ^19 || ^19.0.0-rc
'@humanwhocodes/config-array@0.13.0':
resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
engines: {node: '>=10.10.0'}
@ -1016,6 +1032,30 @@ packages:
'@radix-ui/rect@1.0.1':
resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
'@react-aria/focus@3.19.1':
resolution: {integrity: sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
'@react-aria/interactions@3.23.0':
resolution: {integrity: sha512-0qR1atBIWrb7FzQ+Tmr3s8uH5mQdyRH78n0krYaG8tng9+u1JlSi8DGRSaC9ezKyNB84m7vHT207xnHXGeJ3Fg==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
'@react-aria/ssr@3.9.7':
resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==}
engines: {node: '>= 12'}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
'@react-aria/utils@3.27.0':
resolution: {integrity: sha512-p681OtApnKOdbeN8ITfnnYqfdHS0z7GE+4l8EXlfLnr70Rp/9xicBO6d2rU+V/B3JujDw2gPWxYKEnEeh0CGCw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
'@react-router/dev@7.1.3':
resolution: {integrity: sha512-BPdIk4m8shjfynnkFeR30eH6aawpFHZiWqccWXNFgmFjKBcTQe/j7QTKi6gchceXDau0j2fSLciQ07rYrIGdhw==}
engines: {node: '>=20.0.0'}
@ -1072,6 +1112,16 @@ packages:
peerDependencies:
react-router: 7.1.3
'@react-stately/utils@3.10.5':
resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
'@react-types/shared@3.27.0':
resolution: {integrity: sha512-gvznmLhi6JPEf0bsq7SwRYTHAKKq/wcmKqFez9sRdbED+SPMUmK5omfZ6w3EwUFQHbYUa4zPBYedQ7Knv70RMw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
'@rollup/rollup-android-arm-eabi@4.32.1':
resolution: {integrity: sha512-/pqA4DmqyCm8u5YIDzIdlLcEmuvxb0v8fZdFhVMszSpDTgbQKdw3/mB3eMUHIbubtJ6F9j+LtmyCnHTEqIHyzA==}
cpu: [arm]
@ -1175,6 +1225,9 @@ packages:
engines: {node: '>=8.10'}
hasBin: true
'@swc/helpers@0.5.15':
resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
'@tailwindcss/node@4.0.1':
resolution: {integrity: sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==}
@ -1258,6 +1311,15 @@ packages:
peerDependencies:
vite: ^5.2.0 || ^6
'@tanstack/react-virtual@3.13.0':
resolution: {integrity: sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
'@tanstack/virtual-core@3.13.0':
resolution: {integrity: sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==}
'@types/conventional-commits-parser@5.0.1':
resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
@ -3653,6 +3715,9 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'}
tabbable@6.2.0:
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
tailwind-merge@3.0.1:
resolution: {integrity: sha512-AvzE8FmSoXC7nC+oU5GlQJbip2UO7tmOhOfQyOmPhrStOGXHU08j8mZEHZ4BmCqY5dWTCo4ClWkNyRNx1wpT0g==}
@ -4469,8 +4534,25 @@ snapshots:
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
'@floating-ui/react@0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@floating-ui/react-dom': 2.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@floating-ui/utils': 0.2.9
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
tabbable: 6.2.0
'@floating-ui/utils@0.2.9': {}
'@headlessui/react@2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@floating-ui/react': 0.26.28(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@tanstack/react-virtual': 3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
'@humanwhocodes/config-array@0.13.0':
dependencies:
'@humanwhocodes/object-schema': 2.0.3
@ -4925,6 +5007,40 @@ snapshots:
dependencies:
'@babel/runtime': 7.26.7
'@react-aria/focus@3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@react-aria/interactions': 3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@react-types/shared': 3.27.0(react@19.0.0)
'@swc/helpers': 0.5.15
clsx: 2.1.1
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
'@react-aria/interactions@3.23.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@react-aria/ssr': 3.9.7(react@19.0.0)
'@react-aria/utils': 3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
'@react-types/shared': 3.27.0(react@19.0.0)
'@swc/helpers': 0.5.15
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
'@react-aria/ssr@3.9.7(react@19.0.0)':
dependencies:
'@swc/helpers': 0.5.15
react: 19.0.0
'@react-aria/utils@3.27.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@react-aria/ssr': 3.9.7(react@19.0.0)
'@react-stately/utils': 3.10.5(react@19.0.0)
'@react-types/shared': 3.27.0(react@19.0.0)
'@swc/helpers': 0.5.15
clsx: 2.1.1
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
'@react-router/dev@7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))':
dependencies:
'@babel/core': 7.26.7
@ -5013,6 +5129,15 @@ snapshots:
- supports-color
- typescript
'@react-stately/utils@3.10.5(react@19.0.0)':
dependencies:
'@swc/helpers': 0.5.15
react: 19.0.0
'@react-types/shared@3.27.0(react@19.0.0)':
dependencies:
react: 19.0.0
'@rollup/rollup-android-arm-eabi@4.32.1':
optional: true
@ -5078,6 +5203,10 @@ snapshots:
ignore: 5.3.2
p-map: 4.0.0
'@swc/helpers@0.5.15':
dependencies:
tslib: 2.8.1
'@tailwindcss/node@4.0.1':
dependencies:
enhanced-resolve: 5.18.0
@ -5147,6 +5276,14 @@ snapshots:
tailwindcss: 4.0.1
vite: 5.4.14(@types/node@20.17.16)(lightningcss@1.29.1)
'@tanstack/react-virtual@3.13.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
dependencies:
'@tanstack/virtual-core': 3.13.0
react: 19.0.0
react-dom: 19.0.0(react@19.0.0)
'@tanstack/virtual-core@3.13.0': {}
'@types/conventional-commits-parser@5.0.1':
dependencies:
'@types/node': 20.17.16
@ -7700,6 +7837,8 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {}
tabbable@6.2.0: {}
tailwind-merge@3.0.1: {}
tailwindcss@4.0.1: {}