Implementasi Atomic Design pada Halaman Login

Pendahuluan

• Selamat datang di channel Pipkot Studio bersama Apip Sepulo.
• Video ini membahas implementasi Atomic Design untuk kode halaman login.

Persiapan Proyek

• Memulai dengan menjalankan proyek: npm run dev.
• Menyiapkan halaman login dalam satu file untuk perbandingan dengan implementasi Atomic Design.

Struktur Halaman Login

• Menghapus tombol yang ada dan menambahkan elemen baru.
• Menambahkan div dengan kelas w-full dan max-w-xs untuk pengaturan lebar.
• Menambahkan teks dengan kelas text-3xl, font-bold, dan mb-2 untuk judul "Login".
• Menambahkan subtitle dengan teks "Welcome, please enter your details".

Membuat Form Input

• Struktur Form:
  • Tambahkan div untuk jarak antar input.
  • Buat label untuk email dengan kelas block, text-slate-700, dan text-sm.
  • Tambahkan input untuk email dengan beberapa kelas untuk styling:
    • Kelas: text-sm, border, rounded, py-2, px-2, text-slate-700.
    • Placeholder: "example@mail.com" dengan opacity 50.
  • Tambahkan input untuk password dengan tipe yang sesuai dan placeholder "***".

Menggunakan Komponen yang Sudah Dibuat

• Menggunakan komponen tombol dari folder components.
• Mengatur warna dan ukuran tombol login dengan bg-blue-600 dan w-full.

Pemisahan Komponen Berdasarkan Atomic Design

• Memecah form menjadi komponen kecil (Atomic Design):
  • Input Field:
    • Membuat file input.jsx untuk komponen input.
    • Menggunakan props untuk tipe, placeholder, dan kelas.
  • Label Field:
    • Membuat file label.jsx untuk komponen label.
    • Menggunakan props untuk HTML4 dan teks label.

Struktur Folder

• Folder dan file diatur menjadi:
  • elements untuk komponen atom (input, label).
  • layouts untuk struktur halaman.
  • pages untuk halaman login dan register.

Halaman Login dan Register

• Membuat halaman login.jsx dan register.jsx:
  • Login Page:
    • Menggunakan komponen layout dan form login.
  • Register Page:
    • Menambahkan input untuk full name dan confirm password.

Penggunaan Props dan Children

• Menggunakan props untuk mengirim data antara komponen.
• Menggunakan children untuk merender komponen di layout.

Rangkuman Atomic Design

• Konsep Atomic Design:
  • Komponen kecil (atom) disatukan menjadi molekul.
  • Molekul disatukan menjadi organisme.
  • Menggunakan layout untuk halaman yang sama.

Penutup

• Menyampaikan cara menampilkan halaman login atau register di URL yang sesuai.
• Mengajak penonton untuk subscribe, comment, like, dan share video.