feat: add component form-login

add component form-login

app/components/ui/banner.tsx

@@ -4,7 +4,7 @@ import { APP } from '~/data/meta'
 
 export const Banner = () => {
   return (
-    <div className="min-h-[65px] bg-amber-400 sm:mx-10">
+    <div className="min-h-[65px] sm:mx-10">
       <div className="relative">
         <Link
           to="/#"

app/components/ui/carousel.tsx

@@ -9,7 +9,7 @@ import { Button } from './button'
 
 export const Carousel = (properties: TNews) => {
   const location = useLocation()
-  const hasCategory = location.pathname.includes('/categories/')
+  const hasCategory = location.pathname.includes('/category/')
 
   const { title, description, items, type } = properties
   return (
@@ -71,8 +71,11 @@ export const Carousel = (properties: TNews) => {
               )}
             >
               <div className={`${type === 'hero' ? 'hidden' : ''} `}>
-                {tags?.map((item) => (
-                  <span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
+                {tags?.map((item, index) => (
+                  <span
+                    key={index}
+                    className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
+                  >
                     {item}
                   </span>
                 ))}
@@ -97,7 +100,7 @@ export const Carousel = (properties: TNews) => {
                 size="block"
                 as={Link}
                 to={`detail/${slug}`}
-                className={twMerge('', type === 'hero' ? '' : 'mb-5 sm:mb-0')}
+                className={twMerge('', type === 'hero' ? '' : 'mb-5')}
               >
                 View More
               </Button>

app/components/ui/form-login.tsx

@@ -0,0 +1,112 @@
+// import { EyeIcon, EyeOffIcon } from 'lucide-react'
+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="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[100px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center">
+          <p className="text-[#565658]">
+            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
+          </p>
+        </div>
+
+        <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 ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+            </button>
+          </div>
+
+          {/* Lupa Kata Sandi */}
+          <div className="mb-4 flex justify-between">
+            <span className="text-gray-600">Lupa Kata Sandi?</span>
+            <Link
+              to="/reset-password"
+              className="font-semibold text-[#2E2F7C]"
+            >
+              Reset Kata Sandi
+            </Link>
+          </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?{' '}
+          <Link
+            to="/register"
+            className="font-semibold text-[#2E2F7C]"
+          >
+            Daftar Disini
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FormLogin

app/components/ui/modal.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+interface ModalProperties {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+const Modal = ({ isOpen, onClose, children }: ModalProperties) => {
+  if (!isOpen) return
+
+  return (
+    <div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+      {/* Modal Container */}
+      <div className="animate-fade-in relative rounded-lg bg-white p-6 shadow-lg">
+        {/* Tombol Close */}
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
+        >
+          ✖
+        </button>
+        <h1>test</h1>
+        {/* Modal Content */}
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Modal