From 7c4440cc6bf56ce11bcd971120105d6768e821e9 Mon Sep 17 00:00:00 2001 From: "fredy.siswanto" Date: Fri, 21 Feb 2025 16:44:51 +0700 Subject: [PATCH 1/2] feat: add component form-login add component form-login --- app/components/icons/left-arrow.tsx | 23 ++++++ app/components/icons/link-icon.tsx | 2 +- app/components/ui/banner.tsx | 2 +- app/components/ui/carousel.tsx | 11 ++- app/components/ui/form-login.tsx | 112 ++++++++++++++++++++++++++++ app/components/ui/modal.tsx | 31 ++++++++ app/pages/news-categories/data.ts | 96 ++++++++++++++++++++++++ app/pages/news-detail/data.ts | 35 ++++++++- app/pages/news-detail/index.tsx | 16 +--- app/root.tsx | 4 + app/routes/_layout.register.tsx | 11 +++ package.json | 1 + pnpm-lock.yaml | 37 +++++++++ 13 files changed, 358 insertions(+), 23 deletions(-) create mode 100644 app/components/icons/left-arrow.tsx create mode 100644 app/components/ui/form-login.tsx create mode 100644 app/components/ui/modal.tsx create mode 100644 app/routes/_layout.register.tsx diff --git a/app/components/icons/left-arrow.tsx b/app/components/icons/left-arrow.tsx new file mode 100644 index 0000000..869b2c9 --- /dev/null +++ b/app/components/icons/left-arrow.tsx @@ -0,0 +1,23 @@ +import type { JSX, SVGProps } from 'react' + +export const LeftArrow = ( + properties: JSX.IntrinsicAttributes & SVGProps, +) => { + return ( + + + + ) +} diff --git a/app/components/icons/link-icon.tsx b/app/components/icons/link-icon.tsx index 1ceb7b5..db5f618 100644 --- a/app/components/icons/link-icon.tsx +++ b/app/components/icons/link-icon.tsx @@ -12,7 +12,7 @@ export const LinkIcon = ( height={95} stroke="currentColor" fill="currentColor" - stroke-width="0" + strokeWidth="0" viewBox="0 0 1024 1024" {...properties} > diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx index ab57b67..f8eacc0 100644 --- a/app/components/ui/banner.tsx +++ b/app/components/ui/banner.tsx @@ -4,7 +4,7 @@ import { APP } from '~/data/meta' export const Banner = () => { return ( -
+
{ 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) => { )} >
- {tags?.map((item) => ( - + {tags?.map((item, index) => ( + {item} ))} @@ -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 diff --git a/app/components/ui/form-login.tsx b/app/components/ui/form-login.tsx new file mode 100644 index 0000000..7e1cb59 --- /dev/null +++ b/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 ( +
+
+
+ + + +
+ +
+ + {APP.title} + +
+ +
+

+ Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan! +

+
+ +
+ {/* Input Email / No Telepon */} +
+ + +
+ + {/* Input Password */} +
+ + + +
+ + {/* Lupa Kata Sandi */} +
+ Lupa Kata Sandi? + + Reset Kata Sandi + +
+ + {/* Tombol Masuk */} + +
+ + {/* Link Daftar */} +
+ Belum punya akun?{' '} + + Daftar Disini + +
+
+
+ ) +} + +export default FormLogin diff --git a/app/components/ui/modal.tsx b/app/components/ui/modal.tsx new file mode 100644 index 0000000..f52da1a --- /dev/null +++ b/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 ( +
+ {/* Modal Container */} +
+ {/* Tombol Close */} + +

test

+ {/* Modal Content */} + {children} +
+
+ ) +} + +export default Modal diff --git a/app/pages/news-categories/data.ts b/app/pages/news-categories/data.ts index df53c39..570bc87 100644 --- a/app/pages/news-categories/data.ts +++ b/app/pages/news-categories/data.ts @@ -20,6 +20,102 @@ export const BERITA: TNews = { description: 'Berita Terhangat hari ini', type: 'grid', items: [ + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, { title: 'Travelling as a way of self-discovery and progress', content: diff --git a/app/pages/news-detail/data.ts b/app/pages/news-detail/data.ts index 0d943a5..70bbef8 100644 --- a/app/pages/news-detail/data.ts +++ b/app/pages/news-detail/data.ts @@ -2,8 +2,39 @@ import type { TNews, TNewsDetail } from '~/types/news' export const CONTENT: TNewsDetail = { title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik', - content: - 'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..', + content: `
+

Pengertian dan Jenis Hukum

Hukum adalah sistem aturan yang dibuat dan ditegakkan oleh lembaga berwenang untuk mengatur perilaku manusia dalam masyarakat. Hukum bertujuan untuk menciptakan ketertiban, keadilan, dan keseimbangan dalam kehidupan sosial.

+ +

Jenis-Jenis Hukum

+

1. Hukum Berdasarkan Sumbernya

+
    +
  • Hukum Undang-Undang: Hukum yang tertulis dan dibuat oleh pemerintah atau legislatif.
    • +
  • Hukum Kebiasaan: Hukum yang berkembang berdasarkan adat dan kebiasaan masyarakat.
    • +
  • Hukum Yurisprudensi: Hukum yang ditetapkan berdasarkan keputusan hakim sebelumnya.
    • +
  • Hukum Traktat: Hukum yang berasal dari perjanjian antarnegara.
    • +
+ +

2. Hukum Berdasarkan Wilayah Berlakunya

+
    +
  • Hukum Nasional: Hukum yang berlaku dalam suatu negara tertentu.
    • +
  • Hukum Internasional: Hukum yang mengatur hubungan antara negara-negara.
    • +
+ +

3. Hukum Berdasarkan Isinya

+
    +
  • Hukum Publik: Hukum yang mengatur hubungan antara negara dengan warga negara, termasuk hukum pidana, tata negara, dan administrasi.
    • +
  • Hukum Privat: Hukum yang mengatur hubungan antarindividu, seperti hukum perdata dan dagang.
    • +
+ +

4. Hukum Berdasarkan Bentuknya

+
    +
  • Hukum Tertulis: Hukum yang dicantumkan dalam peraturan resmi seperti undang-undang.
    • +
  • Hukum Tidak Tertulis: Hukum yang hidup dalam masyarakat dan diakui oleh norma sosial.
    • +
+ +

Kesimpulan

+

Hukum memainkan peran penting dalam mengatur kehidupan masyarakat. Dengan adanya hukum, ketertiban dan keadilan dapat terwujud. Memahami jenis-jenis hukum membantu kita dalam mengetahui hak dan kewajiban sebagai warga negara.

+
`, featured: '/images/news-1.jpg', slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik', author: 'John Doe', diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx index 007d216..0b57c33 100644 --- a/app/pages/news-detail/index.tsx +++ b/app/pages/news-detail/index.tsx @@ -41,21 +41,7 @@ export const NewsDetailPage = () => { className="object-center" />
-
-
{content}
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt - asperiores corporis, facilis praesentium tenetur rerum officiis! - Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis - delectus accusamus culpa veniam voluptatem sequi soluta hic optio - dolor, provident perspiciatis nihil sit. Est facere itaque natus - saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque - id aperiam tempore corporis magnam dolores vitae, maxime modi - quibusdam architecto sed aliquam error suscipit distinctio ratione - dolorum exercitationem vero sapiente? Commodi rem quidem vitae - eaque, consequuntur maxime facilis ea aliquam odio atque magni - delectus rerum fugiat aliquid, qui omnis incidunt libero quasi - distinctio exercitationem, reprehenderit minus officiis velit enim. -
+
{content}
diff --git a/app/root.tsx b/app/root.tsx index 294e404..99ad302 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -43,6 +43,10 @@ export function Layout({ children }: { children: React.ReactNode }) { return ( + { + return ( +
+ +
+ ) +} + +export default RegisterLayout diff --git a/package.json b/package.json index 1919de0..4aafede 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@commitlint/is-ignored": "^19.6.0", "@eslint/js": "^9.19.0", "@react-router/dev": "^7.1.3", + "@tailwindcss/typography": "^0.5.16", "@tailwindcss/vite": "^4.0.0", "@types/node": "^20.17.16", "@types/react": "^19.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 62f33f7..61ba672 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -54,6 +54,9 @@ importers: '@react-router/dev': specifier: ^7.1.3 version: 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)) + '@tailwindcss/typography': + specifier: ^0.5.16 + version: 0.5.16(tailwindcss@4.0.1) '@tailwindcss/vite': specifier: ^4.0.0 version: 4.0.1(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1)) @@ -1245,6 +1248,11 @@ packages: resolution: {integrity: sha512-3z1SpWoDeaA6K6jd92CRrGyDghOcRILEgyWVHRhaUm/tcpiazwJpU9BSG0xB7GGGnl9capojaC+zme/nKsZd/w==} engines: {node: '>= 10'} + '@tailwindcss/typography@0.5.16': + resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1' + '@tailwindcss/vite@4.0.1': resolution: {integrity: sha512-ZkwMBA7uR+nyrafIZI8ce3PduE0dDVFVmxmInCUPTN17Jgy6RfEPXzqtL5fz658eDDxKa5xZ+gmiTt+5AMD0pw==} peerDependencies: @@ -1694,6 +1702,11 @@ packages: resolution: {integrity: sha512-ljnSOCOiMbklF+dwPbpooyB78foId02vUrTDogWzu6ca2DCNB7Kc/BHEGBnYOlUYtwXvSW0mWTwaiO2pwFIoRg==} hasBin: true + cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} @@ -2731,6 +2744,9 @@ packages: lodash.camelcase@4.3.0: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} + lodash.castarray@4.4.0: + resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==} + lodash.isplainobject@4.0.6: resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==} @@ -3100,6 +3116,10 @@ packages: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} + postcss-selector-parser@6.0.10: + resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} + engines: {node: '>=4'} + postcss@8.5.1: resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==} engines: {node: ^10 || ^12 || >=14} @@ -5111,6 +5131,14 @@ snapshots: '@tailwindcss/oxide-win32-arm64-msvc': 4.0.1 '@tailwindcss/oxide-win32-x64-msvc': 4.0.1 + '@tailwindcss/typography@0.5.16(tailwindcss@4.0.1)': + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 4.0.1 + '@tailwindcss/vite@4.0.1(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1))': dependencies: '@tailwindcss/node': 4.0.1 @@ -5614,6 +5642,8 @@ snapshots: cssbeautify@0.3.1: {} + cssesc@3.0.0: {} + csstype@3.1.3: {} d3-color@3.1.0: {} @@ -6783,6 +6813,8 @@ snapshots: lodash.camelcase@4.3.0: {} + lodash.castarray@4.4.0: {} + lodash.isplainobject@4.0.6: {} lodash.kebabcase@4.1.1: {} @@ -7108,6 +7140,11 @@ snapshots: possible-typed-array-names@1.0.0: {} + postcss-selector-parser@6.0.10: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss@8.5.1: dependencies: nanoid: 3.3.8 From 84e49cd335e7e733c644849005d4aa7a5e7f15e7 Mon Sep 17 00:00:00 2001 From: "fredy.siswanto" Date: Fri, 21 Feb 2025 20:47:15 +0700 Subject: [PATCH 2/2] feat: create component modal, popup and form input --- app/app.css | 1 + app/components/popup/modal.tsx | 30 +++++ app/components/popup/succes-payment.tsx | 48 +++++++ app/components/popup/succes-register.tsx | 48 +++++++ app/components/popup/succes-reset-pass.tsx | 50 ++++++++ app/components/ui/banner.tsx | 2 +- app/components/ui/form-forgot-password.tsx | 63 +++++++++ app/components/ui/form-login.tsx | 2 +- app/components/ui/form-register .tsx | 141 +++++++++++++++++++++ app/components/ui/form-subscription.tsx | 61 +++++++++ app/components/ui/modal.tsx | 31 ----- app/layouts/header-menu-mobile.tsx | 13 +- app/layouts/header-top.tsx | 73 +++++++---- app/routes/_layout.auth.tsx | 23 ++++ app/routes/_layout.news.tsx | 2 +- app/routes/_layout.register.tsx | 11 -- 16 files changed, 521 insertions(+), 78 deletions(-) create mode 100644 app/components/popup/modal.tsx create mode 100644 app/components/popup/succes-payment.tsx create mode 100644 app/components/popup/succes-register.tsx create mode 100644 app/components/popup/succes-reset-pass.tsx create mode 100644 app/components/ui/form-forgot-password.tsx create mode 100644 app/components/ui/form-register .tsx create mode 100644 app/components/ui/form-subscription.tsx delete mode 100644 app/components/ui/modal.tsx create mode 100644 app/routes/_layout.auth.tsx delete mode 100644 app/routes/_layout.register.tsx 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