diff --git a/app/app.css b/app/app.css index 6c0392b..2e73e05 100644 --- a/app/app.css +++ b/app/app.css @@ -1,4 +1,5 @@ @import 'tailwindcss'; +@plugin "@tailwindcss/typography"; @theme { --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, diff --git a/app/components/popup/modal.tsx b/app/components/popup/modal.tsx new file mode 100644 index 0000000..a41ffea --- /dev/null +++ b/app/components/popup/modal.tsx @@ -0,0 +1,30 @@ +import type { ReactNode } from 'react' + +interface ModalProperties { + isOpen: boolean + onClose: () => void + children: ReactNode +} + +export default function PopupModal({ + isOpen, + onClose, + children, +}: ModalProperties) { + if (!isOpen) return + return ( + <> +
+ +
+ {children} +
+
+ + ) +} diff --git a/app/components/popup/succes-payment.tsx b/app/components/popup/succes-payment.tsx new file mode 100644 index 0000000..9690ab4 --- /dev/null +++ b/app/components/popup/succes-payment.tsx @@ -0,0 +1,48 @@ +import { Link } from 'react-router' + +import { LeftArrow } from '~/components/icons/left-arrow' +import { APP } from '~/data/meta' + +export default function PopupSuccessPayment() { + return ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

Selamat! Pembayaran anda berhasil!

+
+ {APP.title} +
+ +
+
+
+ ) +} diff --git a/app/components/popup/succes-register.tsx b/app/components/popup/succes-register.tsx new file mode 100644 index 0000000..7f96a37 --- /dev/null +++ b/app/components/popup/succes-register.tsx @@ -0,0 +1,48 @@ +import { Link } from 'react-router' + +import { LeftArrow } from '~/components/icons/left-arrow' +import { APP } from '~/data/meta' + +export default function PopupSuccesRegister() { + return ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

Selamat! pendaftaran anda berhasil!

+
+ {APP.title} +
+ +
+
+
+ ) +} diff --git a/app/components/popup/succes-reset-pass.tsx b/app/components/popup/succes-reset-pass.tsx new file mode 100644 index 0000000..4bf8627 --- /dev/null +++ b/app/components/popup/succes-reset-pass.tsx @@ -0,0 +1,50 @@ +import { Link } from 'react-router' + +import { LeftArrow } from '~/components/icons/left-arrow' +import { APP } from '~/data/meta' + +export default function PopupSuccessResetPass() { + return ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

+ Link Reset Password telah dikirmkan ke email anda +

+
+ {APP.title} +
+ +
+
+
+ ) +} diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx index f8eacc0..02396f0 100644 --- a/app/components/ui/banner.tsx +++ b/app/components/ui/banner.tsx @@ -2,7 +2,7 @@ import { Link } from 'react-router' import { APP } from '~/data/meta' -export const Banner = () => { +export default function Banner() { return (
diff --git a/app/components/ui/form-forgot-password.tsx b/app/components/ui/form-forgot-password.tsx new file mode 100644 index 0000000..f7aa7d4 --- /dev/null +++ b/app/components/ui/form-forgot-password.tsx @@ -0,0 +1,63 @@ +import { Link } from 'react-router' + +import { LeftArrow } from '~/components/icons/left-arrow' +import { APP } from '~/data/meta' + +export default function FormForgotPassword() { + return ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

+ Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan! +

+
+ +
+ {/* Input Email / No Telepon */} +
+ + +
+ + {/* Tombol Masuk */} + +
+
+
+ ) +} diff --git a/app/components/ui/form-login.tsx b/app/components/ui/form-login.tsx index 7e1cb59..bd69933 100644 --- a/app/components/ui/form-login.tsx +++ b/app/components/ui/form-login.tsx @@ -28,7 +28,7 @@ const FormLogin = () => { {APP.title}
diff --git a/app/components/ui/form-register .tsx b/app/components/ui/form-register .tsx new file mode 100644 index 0000000..726c0fd --- /dev/null +++ b/app/components/ui/form-register .tsx @@ -0,0 +1,141 @@ +// 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' + +export default function FormRegister() { + const [showPassword, setShowPassword] = useState(false) + return ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

+ Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan! +

+
+ +
+ {/* Input Email / No Telepon */} +
+ + +
+ + {/* Input Password */} +
+ + + +
+ + {/* Reinput Password */} +
+ + + +
+ + {/* No Telepon */} +
+ + +
+ + {/* Subscribe*/} +
+ + +
+ + {/* Tombol Masuk */} + +
+
+
+ ) +} diff --git a/app/components/ui/form-subscription.tsx b/app/components/ui/form-subscription.tsx new file mode 100644 index 0000000..7374bb6 --- /dev/null +++ b/app/components/ui/form-subscription.tsx @@ -0,0 +1,61 @@ +import React from 'react' +import { Link } from 'react-router' + +import { LeftArrow } from '~/components/icons/left-arrow' +import { APP } from '~/data/meta' + +export default function FormSubscription() { + return ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

+ Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan! +

+
+ +
+ {/* Subscribe*/} +
+ + +
+ + {/* Tombol Masuk */} + +
+
+
+ ) +} diff --git a/app/components/ui/modal.tsx b/app/components/ui/modal.tsx deleted file mode 100644 index f52da1a..0000000 --- a/app/components/ui/modal.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { ReactNode } from 'react' - -interface ModalProperties { - isOpen: boolean - onClose: () => void - children: ReactNode -} - -const Modal = ({ isOpen, onClose, children }: ModalProperties) => { - if (!isOpen) return - - return ( -
- {/* Modal Container */} -
- {/* Tombol Close */} - -

test

- {/* Modal Content */} - {children} -
-
- ) -} - -export default Modal diff --git a/app/layouts/header-menu-mobile.tsx b/app/layouts/header-menu-mobile.tsx index da37062..4d9c535 100644 --- a/app/layouts/header-menu-mobile.tsx +++ b/app/layouts/header-menu-mobile.tsx @@ -13,11 +13,11 @@ export default function HeaderMenuMobile() { } return ( <> -
+
{/* Menu */}
@@ -38,8 +38,11 @@ export default function HeaderMenuMobile() { {/* List Menu */}
    - {MENU.map((item) => ( -
  • + {MENU.map((item, index) => ( +
  • - +
diff --git a/app/layouts/header-top.tsx b/app/layouts/header-top.tsx index 66e49f5..0e670ba 100644 --- a/app/layouts/header-top.tsx +++ b/app/layouts/header-top.tsx @@ -1,42 +1,59 @@ +import { useState } from 'react' import { Link } from 'react-router' +import PopupModal from '~/components/popup/modal' import { Button } from '~/components/ui/button' +import FormLogin from '~/components/ui/form-login' import { APP } from '~/data/meta' export const HeaderTop = () => { + const [isModalOpen, setModalOpen] = useState(false) return ( -
- - {APP.title} - -
- {APP.description} -
-
- - -
language + +
+ {APP.description} +
+
+ + +
setModalOpen(true)} + > + language +
-
+ + setModalOpen(false)} + > + + + ) } diff --git a/app/routes/_layout.auth.tsx b/app/routes/_layout.auth.tsx new file mode 100644 index 0000000..b03debc --- /dev/null +++ b/app/routes/_layout.auth.tsx @@ -0,0 +1,23 @@ +import { useState } from 'react' + +import PopupModal from '~/components/popup/modal' +import FormLogin from '~/components/ui/form-login' + +const AuthLayout = () => { + const [isModalOpen, setModalOpen] = useState(true) + + return ( +
+
+ {/* Modal */} + setModalOpen(true)} + > + + +
+
+ ) +} +export default AuthLayout diff --git a/app/routes/_layout.news.tsx b/app/routes/_layout.news.tsx index 1977241..097a02d 100644 --- a/app/routes/_layout.news.tsx +++ b/app/routes/_layout.news.tsx @@ -1,6 +1,6 @@ import { Outlet } from 'react-router' -import { Banner } from '~/components/ui/banner' +import Banner from '~/components/ui/banner' import { FooterLinks } from '~/layouts/footer-links' import { FooterNewsletter } from '~/layouts/footer-newsletter' import { HeaderMenu } from '~/layouts/header-menu' diff --git a/app/routes/_layout.register.tsx b/app/routes/_layout.register.tsx deleted file mode 100644 index 792232c..0000000 --- a/app/routes/_layout.register.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import FormLogin from '~/components/ui/form-login' - -const RegisterLayout = () => { - return ( -
- -
- ) -} - -export default RegisterLayout