feat: update social share component, and enhance modal structure

2025-02-23 19:43:45 +08:00
parent e8df14880d
commit feff32f588
10 changed files with 37 additions and 18 deletions
@@ -0,0 +1,107 @@
+// import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { useState, type Dispatch, type SetStateAction } from 'react'
+
+import { EyeIcon } from '~/components/icons/eye'
+import { Button } from '~/components/ui/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>
+  )
+}