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

feat: update social share component, and enhance modal structure

Browse Source
This commit is contained in:
Ardeman
2025-02-23 19:43:45 +08:00
parent e8df14880d
commit feff32f588
10 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/popup/modal.tsx
+4 -2
View File
@@ -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/components/ui/form-forgot-password.tsx
-32
View File
@@ -1,32 +0,0 @@
import { Button } from '~/components/ui/button'
export default function FormForgotPassword() {
return (
<div className="flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<form>
{/* Input Email / No Telepon */}
<div className="mb-4">
<label
htmlFor="email"
className="mb-1 block text-gray-700"
>
Email/No. Telepon
</label>
<input
type="text"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
required
/>
</div>
{/* Tombol Masuk */}
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Reset Password
</Button>
</form>
</div>
</div>
)
}
app/components/ui/form-login.tsx
-108
View File
@@ -1,108 +0,0 @@
// import { EyeIcon, EyeOffIcon } from 'lucide-react'
import { useState, type Dispatch, type SetStateAction } from 'react'
import { EyeIcon } from '~/components/icons/eye'
import { Button } from './button'
type TProperties = {
setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
setIsLoginOpen: Dispatch<SetStateAction<boolean>>
setIsForgetOpen: Dispatch<SetStateAction<boolean>>
}
export const FormLogin = (properties: TProperties) => {
const { setIsRegisterOpen, setIsLoginOpen, setIsForgetOpen } = properties
const [showPassword, setShowPassword] = useState(false)
return (
<div className="flex items-center justify-center">
<div className="w-full max-w-md">
<form>
{/* Input Email / No Telepon */}
<div className="mb-4">
<label
htmlFor="email"
className="mb-1 block text-gray-700"
>
Email/No. Telepon
</label>
<input
type="text"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
/>
</div>
{/* Input Password */}
<div className="relative mb-4">
<label
htmlFor="password"
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
>
Kata Sandi
</label>
<input
type={showPassword ? 'text' : 'password'}
placeholder="Masukkan Kata Sandi"
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
/>
<button
type="button"
className="absolute top-9 right-3 text-gray-500"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeIcon
width={15}
height={15}
/>
) : (
<EyeIcon
width={15}
height={15}
/>
)}
</button>
</div>
{/* Lupa Kata Sandi */}
<div className="mb-4 flex items-center justify-between text-sm">
<span className="text-gray-600">Lupa Kata Sandi?</span>
<Button
onClick={() => {
setIsLoginOpen(false)
setIsForgetOpen(true)
}}
className="font-semibold text-[#2E2F7C]"
variant="link"
>
Reset Kata Sandi
</Button>
</div>
{/* Tombol Masuk */}
<Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Masuk
</Button>
</form>
{/* Link Daftar */}
<div className="mt-4 text-center text-sm">
Belum punya akun?{' '}
<Button
onClick={() => {
setIsLoginOpen(false)
setIsRegisterOpen(true)
}}
className="font-semibold text-[#2E2F7C]"
variant="link"
size="fit"
>
Daftar Disini
</Button>
</div>
</div>
</div>
)
}
app/components/ui/form-register.tsx
-110
View File
@@ -1,110 +0,0 @@
import { useState } from 'react'
import { Button } from '~/components/ui/button'
export const FormRegister = () => {
const [showPassword, setShowPassword] = useState(false)
return (
<div className="flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<form>
{/* Input Email / No Telepon */}
<div className="mb-4">
<label
htmlFor="email"
className="mb-1 block text-gray-700"
>
Email/No. Telepon
</label>
<input
type="text"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
required
/>
</div>
{/* Input Password */}
<div className="relative mb-4">
<label
htmlFor="password"
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
>
Kata Sandi
</label>
<input
type={showPassword ? 'text' : 'password'}
placeholder="Masukkan Kata Sandi"
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
required
/>
<button
type="button"
className="absolute top-9 right-3 text-gray-500"
onClick={() => setShowPassword(!showPassword)}
>
{/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
</button>
</div>
{/* Reinput Password */}
<div className="relative mb-4">
<label
htmlFor="password"
className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
>
Ulangi Kata Sandi
</label>
<input
type={showPassword ? 'text' : 'password'}
placeholder="Masukkan Kata Sandi"
className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
required
/>
<button
type="button"
className="absolute top-9 right-3 text-gray-500"
onClick={() => setShowPassword(!showPassword)}
>
{/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
</button>
</div>
{/* No Telepon */}
<div className="mb-4">
<label
htmlFor="no-telpon"
className="mb-1 block text-gray-700"
>
No. Telepon
</label>
<input
type="text"
placeholder="Contoh: legal@legalgo.id"
className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
required
/>
</div>
{/* Subscribe*/}
<div className="mb-4">
<label
htmlFor="subscription"
className="mb-1 block text-gray-700"
>
Subscription
</label>
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
<option selected>Subscription</option>
</select>
</div>
{/* Tombol Masuk */}
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Daftar
</Button>
</form>
</div>
</div>
)
}
app/components/ui/form-subscription.tsx
-29
View File
@@ -1,29 +0,0 @@
import { Button } from '~/components/ui/button'
export default function FormSubscription() {
return (
<div className="flex flex-col items-center justify-center">
<div className="w-full max-w-md">
<form>
{/* Subscribe*/}
<div className="mb-4">
<label
htmlFor="subscription"
className="mb-1 block text-gray-700"
>
Subscription
</label>
<select className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2">
<option selected>Subscription</option>
</select>
</div>
{/* Tombol Masuk */}
<Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
Lanjutkan
</Button>
</form>
</div>
</div>
)
}
app/components/ui/icons-social.tsx → app/components/ui/social-share.tsx
View File