first commit

2026-05-12 12:41:49 +07:00
commit 604fef891f
8368 changed files with 1285228 additions and 0 deletions
@@ -0,0 +1,105 @@
+<template>
+  <section class="container-page py-10">
+    <RouterLink to="/marketplace" class="mb-6 inline-flex text-sm font-bold text-brand-700">
+      ← Kembali ke Marketplace
+    </RouterLink>
+
+    <div v-if="loading" class="card p-10 text-center">
+      <h1 class="text-2xl font-extrabold">Memuat produk...</h1>
+    </div>
+
+    <div v-else-if="product" class="grid gap-8 lg:grid-cols-2">
+      <div class="card overflow-hidden">
+        <img :src="getProductImageUrl(product.image)" :alt="product.title" class="aspect-[4/3] w-full object-cover" />
+      </div>
+
+      <div>
+        <span class="rounded-full bg-brand-50 px-3 py-1 text-sm font-bold text-brand-700">
+          {{ product.category }}
+        </span>
+        <h1 class="mt-4 text-3xl font-extrabold text-slate-950">{{ product.title }}</h1>
+        <p class="mt-3 text-3xl font-extrabold text-brand-700">{{ formatRupiah(product.price) }}</p>
+
+        <div class="mt-6 grid gap-3 sm:grid-cols-2">
+          <div class="card p-4">
+            <p class="text-xs font-bold uppercase text-slate-500">Kondisi</p>
+            <p class="mt-1 font-bold">{{ product.condition }}</p>
+          </div>
+          <div class="card p-4">
+            <p class="text-xs font-bold uppercase text-slate-500">Lokasi</p>
+            <p class="mt-1 font-bold">{{ product.location }}</p>
+          </div>
+          <div class="card p-4">
+            <p class="text-xs font-bold uppercase text-slate-500">Penjual</p>
+            <p class="mt-1 font-bold">{{ product.seller }}</p>
+          </div>
+          <div class="card p-4">
+            <p class="text-xs font-bold uppercase text-slate-500">WhatsApp</p>
+            <p class="mt-1 font-bold">{{ product.whatsapp }}</p>
+          </div>
+        </div>
+
+        <div class="mt-6">
+          <h2 class="text-lg font-extrabold">Deskripsi</h2>
+          <p class="mt-2 leading-7 text-slate-600">{{ product.description }}</p>
+        </div>
+
+        <div class="mt-8 flex flex-wrap gap-3">
+          <a :href="waLink" target="_blank" class="btn-primary">Hubungi via WhatsApp</a>
+          <button class="btn-secondary" @click="toggleSave">
+            {{ saved ? "Hapus dari Tersimpan" : "Simpan Barang" }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="card p-10 text-center">
+      <h1 class="text-2xl font-extrabold">Produk tidak ditemukan</h1>
+      <RouterLink to="/marketplace" class="btn-primary mt-5">Lihat Marketplace</RouterLink>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue"
+import { useRoute } from "vue-router"
+import { products as defaultProducts } from "../data/products"
+import { fetchProduct, formatRupiah, getProductImageUrl, getSavedProducts, setSavedProducts } from "../utils"
+
+const route = useRoute()
+const id = Number(route.params.id)
+const product = ref(null)
+const loading = ref(true)
+
+const savedIds = ref(getSavedProducts())
+const saved = computed(() => savedIds.value.includes(id))
+
+const waLink = computed(() => {
+  if (!product.value) return "#"
+  const text = encodeURIComponent(`Halo, saya tertarik dengan ${product.value.title} di SecondTech Market.`)
+  return `https://wa.me/${product.value.whatsapp}?text=${text}`
+})
+
+function toggleSave() {
+  if (saved.value) {
+    savedIds.value = savedIds.value.filter((item) => item !== id)
+  } else {
+    savedIds.value.push(id)
+  }
+  setSavedProducts(savedIds.value)
+}
+
+async function loadProduct() {
+  loading.value = true
+  try {
+    const data = await fetchProduct(id)
+    product.value = data.product
+  } catch {
+    product.value = defaultProducts.find((item) => Number(item.id) === id) || null
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadProduct)
+</script>