1. Button-Rounded-Link

Button

# Props

# Contoh penggunaan

<ButtonRoundedLink href="#" text="Contoh Link" />

# Yang dihasilkan

2. Rounded Button

# Props

# Contoh penggunaan

<RoundedButton text="Rounded button" isActive={false} onClick={alert('Button clicked!')} />

# Yang dihasilkan

3. ListOfProjectCategoriesButtons

# Deskripsi

Komponen untuk menampilkan tombol kategori proyek. Digunakan untuk memfilter proyek berdasarkan kategori (Semua, Web, Web App, Game, dll). Komponen ini menggunakan state untuk menyimpan kategori yang aktif dan menampilkan/menyembunyikan elemen berdasarkan atribut data-category.

# Props

Komponen ini tidak memerlukan props. Semua konfigurasi dilakukan secara otomatis berdasarkan kebutuhan aplikasi.

# Contoh penggunaan

<ListOfProjectCategoriesButtons />

# Yang dihasilkan

# Catatan

- Komponen ini hanya digunakan di app/projects/page.tsx

- Kategori harus sesuai dengan property category di data/projectListData.ts

Card (Kartu)

1. CardProject

# Deskripsi

Kartu untuk menampilkan informasi proyek dengan thumbnail, judul, waktu, deskripsi, tech stack, dan link. Komponen ini menghasilkan URL otomatis berdasarkan judul proyek.

# Props

# Contoh penggunaan

    <CardProject src="/images/projects/catatan-kas/thumbnail.png"
      title="Catatan Kas"
      time="2023"
      description="Dibuat untuk mencatat uang masuk dan keluar secara sederhana."
      demo="https://catatan-kas-web.vercel.app"
      stack={["React", "Vite", "TypeScript", "Tailwind CSS", "EmailJS"]}
      category="web app"
    />

# Yang dihasilkan

Catatan Kas

2023

Dibuat untuk mencatat uang masuk dan keluar secara sederhana.

React

Vite

TypeScript

Tailwind CSS

DemoRead more

2. CardBlog

# Deskripsi

Kartu untuk menampilkan artikel blog dengan thumbnail, judul, deskripsi ringkas, dan tanggal. Komponen ini mengekstrak src gambar dan konten dari HTML string.

# Props

# Fitur

- Hover effect pada gambar (scale-up)

- Format tanggal otomatis (Jan 01, 2024)

- Ekstraksi deskripsi hingga 150 karakter dari HTML

# Contoh penggunaan

    <CardBlog 
      title="Article Title"
      description="<img src=" /><p>Article content here...</p>"
      date="2024-06-02"
      thumbnail="<img src="/image.jpg" />"
      link="/blog/article-slug"
    />

# Yang dihasilkan

Sample Blog Post

Ini adalah artikel blog contoh dengan deskripsi yang akan dipotong hingga 150 karakter untuk menampilkan preview singkat....

Jun 02, 2024

---

Badge

# Deskripsi

Komponen badge untuk menampilkan label atau tag. Umumnya digunakan untuk menampilkan tech stack atau kategori dalam ukuran kecil dengan styling yang konsisten.

# Props

# Contoh penggunaan

<Badge text="React" />
  <Badge text="Tailwind" />
  <Badge text="TypeScript" />

# Yang dihasilkan

LinkTo

# Deskripsi

Komponen link internal untuk navigasi dalam aplikasi. Menggunakan global state untuk memperbarui pathname saat link diklik. Ini memastikan state pathname terupdate dengan benar untuk keperluan navigasi aplikasi.

# Props

# Contoh penggunaan

<LinkTo href="/projects">
    Lihat semua proyek
  </LinkTo>

  <LinkTo href="/about" className="text-blue-600 font-semibold">
    Tentang saya
  </LinkTo>

# Yang dihasilkan

# Perbedaan dengan Next/Link

✅ LinkTo: Mengupdate global state pathname saat diklik

❌ Next/Link: Hanya navigasi ke halaman, tidak update pathname state

# Kapan menggunakan LinkTo

- Navigasi yang memerlukan update global state pathname

- Link internal di dalam aplikasi yang menggunakan useGlobalState

- Ketika Anda perlu melacak pathname untuk keperluan UI

# Implementation Detail

- Menggunakan hook useGlobalState

- Memicu setPathname saat link diklik

- Komponen adalah Client Component

ReadMd Component

1. Overview

# Deskripsi

Komponen ReadMd digunakan untuk membaca file markdown (.md) dari folder src/data/ dan menampilkannya sebagai HTML yang sudah di-render.

# Kegunaan

- Menampilkan konten dinamis dari file markdown

- Render markdown ke HTML dengan styling prose

- Membaca file markdown dari server-side

- Dukungan untuk gambar, formatting, dan styling markdown

2. Props

3. Contoh Penggunaan

# Struktur Folder

  src/data/
  ├── projects/
  │   ├── catatan-kas.md
  │   ├── simado.md
  │   └── ...
  └── ...

# Contoh: Membaca Project Detail

  <ReadMd post="projects" fileName="catatan-kas.md" />

Menambahkan Project Baru

1. Struktur Folder

# Langkah 1: Buat Folder dan File Markdown

Setiap project membutuhkan folder di dalam src/data/projects/ dan file markdown untuk deskripsi detail project.

  src/data/projects/
  └── nama-project-baru.md  ← Buat file ini

# Format Nama

- Gunakan nama lowercase dengan pemisah dash (-)

- Contoh: my-awesome-project.md

2. Tambahkan Data di projectListData.ts

# Langkah 2: Tambah Objek Project

Buka file src/data/projectListData.ts dan tambahkan objek project baru dengan struktur berikut:

 const projectListData = [
      {
        title: 'Project Title',
        category: 'web',
        imageSrcFull: '/images/projects/project-folder/thumbnail.png',
        time: 'Mei 2026',
        description: 'Deskripsi singkat project',
        stack: ['Technology1', 'Technology2', 'Technology3'],
        demo: 'https://link-demo.vercel.app',
        source: 'https://github.com/username/repo', // optional
      },
      // project lainnya...
    ]

# Penjelasan Props

3. Buat File Markdown untuk Detail

# Langkah 3: Buat File .md

Buat file markdown di src/data/projects/nama-project.md

4. Setup Folder Gambar

# Langkah 4: Buat Folder dan Upload Gambar

Buat folder untuk gambar project di public/images/projects/:

public/images/projects/
├── catatan-kas/
│   ├── thumbnail.png      ← Gambar utama (untuk card)
│   ├── catatankas.webp    ← Screenshot/preview
│   └── ...
├── nama-project-baru/     ← Buat folder baru
│   ├── thumbnail.png      ← Gambar utama
│   ├── screenshot.webp    ← Screenshot detail
│   └── ...
└── ...

# Rekomendasi Gambar

- Thumbnail: Ukuran landscape (~640x400), format PNG/WebP

- Screenshot: Full screenshot project, format WebP untuk performa lebih baik