71 lines
4.5 KiB
JavaScript
71 lines
4.5 KiB
JavaScript
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { formatRupiah } from "./rupiah"
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faBath, faBed, faHouse } from "@fortawesome/free-solid-svg-icons";
|
|
import { dataWilayah } from "@/app/library/loadJson";
|
|
import { DateLabel } from "@/app/library/dateLabel";
|
|
|
|
const wilayah = dataWilayah();
|
|
|
|
export const ProdukCard = function ({ data }) {
|
|
let { key, uniqid, price, judul, image: images, slug, kec, kota, kmandi, ktidur, lbangun, userlog, klik } = data
|
|
const dataKecamatan = wilayah.getKecamatan(kec);
|
|
const dataKota = wilayah.getKota(kota);
|
|
return (<>
|
|
<div key={key} className="relative bg-gray-200 w-full">
|
|
<button className="p-1 md:p-2 z-10 md:shadow-md md:rounded-[50%] inline-block absolute bg-transparent md:bg-white top-1 md:top-4 right-1 md:right-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 fill-current hover:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
|
</svg>
|
|
</button>
|
|
<Link href={"/produk/" + slug} className="w-full">
|
|
<div style={{ border: '1px solid #aaa' }} className="flex md:block rounded bg-white overflow-hidden shadow-lg relative">
|
|
<div className="h-[130px] min-w-[130px] max-w-[130px] md:min-w-full md:max-w-full md:w-full md:p-2 flex items-start justify-center h-[100px] md:h-[180px] lg:h-[150px] xl:h-[140px] overflow-hidden">
|
|
<img className="w-full w-auto block " src={`https://app.rumahjo.com/` + images} alt="Sunset in the mountains"></img>
|
|
</div>
|
|
<div className="w-[calc(100%-120px)] md:w-auto px-auto">
|
|
<div className="bg-white">
|
|
<div className="px-2 md:px-6 md:py-2">
|
|
<div className="font-bold text-[20px] md:text-[1.2rem] mb-1 text-ellipsis truncate ...">{formatRupiah(price)}</div>
|
|
<p className="text-[14px] text-gray-700 md:text-base truncate ...">
|
|
{judul}
|
|
</p>
|
|
<div className="flex md:hidden">
|
|
<div className="pr-4">
|
|
<FontAwesomeIcon
|
|
icon={faBath}
|
|
style={{ fontSize: 14, color: "#333f48" }}
|
|
/>
|
|
<span className="pl-2">{kmandi}</span>
|
|
</div>
|
|
<div className="pr-4">
|
|
<FontAwesomeIcon
|
|
icon={faBed}
|
|
style={{ fontSize: 14, color: "#333f48" }}
|
|
/>
|
|
<span className="pl-2">{ktidur}</span>
|
|
</div>
|
|
<div className="pr-4">
|
|
<FontAwesomeIcon
|
|
icon={faHouse}
|
|
style={{ fontSize: 14, color: "#333f48" }}
|
|
/>
|
|
<span className="pl-2">{lbangun} m²</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mx-2 md:px-4 py-1 text-[9px] md:text-[12px]">
|
|
<p className="max-w-full truncate ...">{(kec==""?"":dataKecamatan.nama+", ")+(kota==""?"":dataKota.nama)}</p>
|
|
</div>
|
|
<div className="flex justify-between px-2 md:px-[14px] py-1 mr-2 md:mr-0 text-[9px] md:text-[12px]">
|
|
<p className="block text-[12px] inline-block">{ DateLabel(userlog).toUpperCase() }</p>
|
|
<p className="block text-[12px] inline-block float-right text-right">{klik} Views</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</>)
|
|
} |