Membuat Blog Pribadi #Part 3
Styling dan Membuat Basic Component
Tulisan ini merupakan part ke-3 dari seri tutorial membuat blog pribadi dengan munggunakan Next JS, Tailwindcss, dan Notion API. Untuk detail intronya kalian bisa membacanya di part 1.
Di part kali ini kita akan membuat beberapa component menggunakan tailwindcss. Hasil akhir dari tutorial part ini dapat kalian lihat di link github berikut create-component.
Component pertama yang akan kita buat adalah bagian navbar, buat file dengan nama navbar.js dalam folder components dan isi code sama seperti Gambar 3.
Karena kita menggunakan phosphor-icon, install phorphor icon dengan menjalankan command yarn add phosphor-react pada cmd seperti Gambar 5 dibawah.
Setelah proses instalasi selesai, kita gunakan component navbar pada page home yg ada pada file index.js seperti Gambar 6 berikut.
Dan hasilnya kita membuat component navbar seperti ini :
Selanjutnya kita akan membuat bagian footer. Namun sebelum membuat footer kita akan membuat button icon terlebih dahulu.
jika sudah kemudian kita membuat component bernama footer.js dengan isi code seperti dibawah (Gambar 9).
Kemudian kita panggil footer.js tadi seperti ketika menggunakan navbar sehingga hasilnya sekarang seperti ini :
Selanjutnya kita akan membuat bagian grid content. Sebelum kita lanjut, jika masih terdapat error bisa cek hasil akhir part 3 ini di link github berikut create-component.
Karena kita akan membuat grid yang dragable scroll secara horizontal, kita akan menggunakan react-indiana-drag-scroll. Dan untuk merubah format tanggal publish blog menggunakan moment. Jadi kita install dulu packagenya dengan yarn add react-indiana-drag-scroll moment .
Jika sudah terinstall, kita gunakan react-indiana-drag-scroll seperti berikut :
Sebelum kita menyelesaikan grid content, kita buat dulu data dummy untuk ditampilkan. Buat file beranama data.js pada folder components dan isi dengan data dari link berikut https://raw.githubusercontent.com/husniramdani/ARC-personal-blog/create-component/components/data.js
Kemudian kita perlu menambahkan setup images domain pada next.config.js seperti pada Gambar — 12
Import package moment, images, dan link seperti gambar dibawah karena akan kita gunakan pada component grid kita nantinya.
Kemudian kita import data dari data.js => import { results } from ‘@components/data’ dan buat code component grid didalam component ScrollContainer seperti code dibawah.
Selanjutnya kita akan membuat halaman detail.
Pada data dummy yang sebelumnya kita buat terdapat variable pages dan blocks yang akan kita gunakan sebagai content dummy di halaman detail.
kemudian kita import package dan data seperti gambar berikut
Paste code component detail seperti code dibawah
Setelah itu akan tampil halaman detail sebagai berikut
Untuk selanjutnya Part 4 yaitu step terakhir adalah menyambungkan antara Next dengan Notion.
Seluruh hasil dari langkah dari part ini dapat dilihat di link github berikut Styling dan Membuat Basic Component (pastikan memilih branch create-component)
Artikel ini adalah bagian dari Seri Tutorial Membuat Blog Pribadi :
- Tutorial Membuat blog pribadi
- Setup Next JS
- Styling dan Membuat Basic Component
- Connect dengan Notion API
