355 lines
32 KiB
JavaScript
355 lines
32 KiB
JavaScript
|
"use client"
|
||
|
|
import useSWR, { SWRConfig } from 'swr'
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import { Carousel } from "flowbite-react";
|
||
|
|
import { ProdukCard } from '@/app/library/card2';
|
||
|
|
import { capitalize } from '@/app/library/global';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import MultiRangeSlider from '@/app/component/multiRangeSlider/MultiRangeSlider';
|
||
|
|
import RadioSelect from '@/app/component/radioSelect/RadioSelect';
|
||
|
|
|
||
|
|
const fetcher = (...args) => fetch(...args).then((res) => res.json());
|
||
|
|
|
||
|
|
export default function Search({ params }) {
|
||
|
|
let slug = params.name;
|
||
|
|
let seachParam = slug.map(function(c){
|
||
|
|
let [a,b] = c.split('-');
|
||
|
|
return `${a}=${b}`
|
||
|
|
}).join("&");
|
||
|
|
|
||
|
|
const { data: produkSeach } = useSWR(`/pages/api/produk?limit=500&start=0&approval=1&` + seachParam, fetcher)
|
||
|
|
console.log(produkSeach)
|
||
|
|
const [nama, setNama] = useState('');
|
||
|
|
const [dataListing, setDataListing] = useState([]);
|
||
|
|
const [card, addCard] = useState([]);
|
||
|
|
useEffect(() => {
|
||
|
|
const loadData = function (dataSlug) {
|
||
|
|
const slug = [].concat(dataSlug);
|
||
|
|
if (slug) {
|
||
|
|
let seachSlug = slug.shift();
|
||
|
|
let [status, getSlug] = seachSlug.split('q-');
|
||
|
|
if (seachSlug) {
|
||
|
|
let search = decodeURI(getSlug).replace(/\-/g, ' ');
|
||
|
|
document.getElementById('search').value = search;
|
||
|
|
setNama(capitalize(search));
|
||
|
|
if (produkSeach) {
|
||
|
|
setDataListing(produkSeach.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
loadData(slug);
|
||
|
|
}, [produkSeach,setDataListing, setNama, slug])
|
||
|
|
|
||
|
|
let yh = [];
|
||
|
|
for (let index = 0; index < 12; index++) {
|
||
|
|
yh.push({
|
||
|
|
data: index
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const [visibility, setFilter] = useState("hidden");
|
||
|
|
const changeFilter = () => {
|
||
|
|
if (visibility !== "hidden") {
|
||
|
|
setFilter("hidden");
|
||
|
|
} else {
|
||
|
|
setFilter("block");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<section className="hidden md:block">
|
||
|
|
<div style={{ marginLeft: "auto", marginRight: "auto", marginBottom: "20px" }}>
|
||
|
|
<div className="relative w-full px-4 md:px-10" style={{ marginLeft: "auto", left: "auto", right: "auto", float: "left", minHeight: "1px", boxSizing: "border-box" }}>
|
||
|
|
<div>
|
||
|
|
<div className="text-[12px] my-[8px] relative w-full box-border flex">
|
||
|
|
<ol className="text-ellipsis whitespace-nowrap overflow-x-clip overflow-y-visible block p-[2px] h-full box-border">
|
||
|
|
<li className="inline list-none whitespace-nowrap">
|
||
|
|
<a href="/" className="cursor-pointer text-[12px]" style={{ textDecoration: "none", }}>Beranda</a>
|
||
|
|
<span className="mx-[5px]">/</span>
|
||
|
|
</li>
|
||
|
|
<li className="inline list-none whitespace-nowrap">
|
||
|
|
<a href={"/search/" + slug} className="cursor-pointer text-[12px]" style={{ textDecoration: "none", }}>Cari : {nama}</a>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h1 className="my-[8px] font-bold text-gray-900 block md:text-[1.2rem] sm:text-[.5rem]">{nama} - RumahJo Cara Tepat Jual Cepat</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section className="block md:hidden">
|
||
|
|
<div style={{ marginLeft: "auto", marginRight: "auto", marginBottom: "20px" }}>
|
||
|
|
<div className="relative w-full" style={{ marginLeft: "auto", left: "auto", right: "auto", float: "left", minHeight: "1px", boxSizing: "border-box" }}>
|
||
|
|
<div className="relative mt-[-8px] flex flex-row bg-white" style={{ padding: "16px 10px 0px 10px" }}>
|
||
|
|
<div className="flex flex-wrap flex-1">
|
||
|
|
<div onClick={changeFilter} className="capitalize border border-gray-400 bg-transparent inline-flex justify-around items-center h-[32px] mr-[8px] mb-[8px] px-[12px] rounded-[20px] text-[12px] font-normal cursor-pointer">
|
||
|
|
<div className="">Harga</div>
|
||
|
|
<span className="flex justify-center items-center ml-[8px]">
|
||
|
|
<svg className="w-[15px] h-[15px]" viewBox="0 0 1024 1024" fillRule="evenodd"><path d="M85.392 277.333h60.331l366.336 366.336 366.336-366.336h60.331v60.331l-408.981 409.003h-35.307l-409.045-409.003z"></path></svg>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-full h-[20px] flex justify-center items-center bg-white" style={{ boxShadow: "0 4px 6px -3px rgba(0, 47, 52, 0.36)" }}>
|
||
|
|
<div className="w-[24px] h-[4px] rounded-[2.5px]" style={{ backgroundColor: "rgba(0, 47, 52, 0.64)" }}></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div className='my-5 bg-white'>
|
||
|
|
<div className="pt-5 px-4 md:px-10">
|
||
|
|
<div className="grid w-full grid-cols-4 gap-4">
|
||
|
|
<div className="col-span-4 md:col-span-1">
|
||
|
|
<div className="hidden md:block w-full">
|
||
|
|
<div style={{ margin: "8px 16px 0 0" }}>
|
||
|
|
<div className="relative h-full">
|
||
|
|
<div className="mb-[28px]">
|
||
|
|
<div>
|
||
|
|
<span className="text-[16px] leading-[24px] font-bold text-gray-800">KATEGORI</span>
|
||
|
|
</div>
|
||
|
|
<div className="block pt-[16px]">
|
||
|
|
<ul className="max-h-[166px] overflow-y-auto list-none">
|
||
|
|
<li>
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<div className="flex justify-start items-center font-bold text-gray-800">
|
||
|
|
<div className="w-[16px] mr-[16px] border border-gray-800"></div>
|
||
|
|
Properti
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<ul className="ml-[16px] list-none">
|
||
|
|
<li className="ml-[16px] text-[14px]">
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<span>Dijual: Rumah & Apartemen</span>
|
||
|
|
<span>(4)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li className="ml-[16px] text-[14px]">
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<span>Disewakan: Rumah & Apartemen</span>
|
||
|
|
<span>(4)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li className="ml-[16px] text-[14px]">
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<span>Tanah</span>
|
||
|
|
<span>(4)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li className="ml-[16px] text-[14px]">
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<span>Indekos</span>
|
||
|
|
<span>(4)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li className="ml-[16px] text-[14px]">
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<span>Dijual: Bangunan Komersil</span>
|
||
|
|
<span>(8)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li className="ml-[16px] text-[14px]">
|
||
|
|
<a className="block" style={{ padding: "8px 0 8px 20px" }}>
|
||
|
|
<span>Disewakan: Bangunan Komersil</span>
|
||
|
|
<span>(8)</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className={`text-white ${visibility} md:block`}>
|
||
|
|
<div className="visible fixed md:relative flex bg-[rgba(0,0,0,.8)] md:bg-white top-0 md:top-auto left-0 md:left-auto bottom-0 md:bottom-auto right-0 md:right-auto z-[9999] md:z-auto justify-center items-center">
|
||
|
|
<div className="h-[88vh] visible box-border md:h-auto bg-white fixed md:relative bottom-0 w-full rounded-t-[18px] md:rounded-none left-0 md:left-auto right-0 md:right-auto z-10">
|
||
|
|
<button onClick={changeFilter} className="block md:hidden w-[32px] border-y md:border-0 border-[rgba(0,47,52,0.36)] rounded-[10px] my-[4px] mx-auto"></button>
|
||
|
|
<div className="w-full md:w-auto box-border md:box-content block md:hidden h-[calc(100% - 10px)] md:h-auto">
|
||
|
|
<div className="p-4 h-[48px] w-full flex items-center justify-between">
|
||
|
|
<div className="font-semibold leading-[24px] text-[20px] text-gray-800">Filter & Sortir</div>
|
||
|
|
<div onClick={changeFilter} className="cursor-pointer">
|
||
|
|
<span>
|
||
|
|
<svg className="w-[14px] h-[14px]" viewBox="0 0 1024 1024" fillRule="evenodd"><path d="M878.336 85.333l-366.336 366.315-366.336-366.315h-60.331v60.331l366.336 366.336-366.336 366.336v60.331h60.331l366.336-366.336 366.336 366.336h60.331v-60.331l-366.315-366.336 366.315-366.336v-60.331z"></path></svg>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="p-4 md:p-auto">
|
||
|
|
<div className="relative border-t border-gray-400">
|
||
|
|
<div className="hidden md:flex text-[16px] text-gray-500 pt-[30px]">
|
||
|
|
<span>Filter</span>
|
||
|
|
</div>
|
||
|
|
<form>
|
||
|
|
<div className="overflow-y-auto md:overflow-y-visible max-h-[calc(100vh-200px)] md:max-h-none">
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Harga</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari rentang</div>
|
||
|
|
<div className="my-[12px]">
|
||
|
|
<div className="flex justify-between items-center justify-center">
|
||
|
|
<input className="w-[74px] h-[32px]" name="min" type="text" placeholder="Min"></input>
|
||
|
|
<span className="text-gray-800">Sampai</span>
|
||
|
|
<input className="w-[74px] h-[32px]" name="max" type="text" placeholder="Maks"></input>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Tipe</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari pilihan di bawah</div>
|
||
|
|
<div className="my-[12px]">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<input name="type" id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||
|
|
<label htmlFor="default-checkbox" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Apartemen</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center">
|
||
|
|
<input name="type" id="checked-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||
|
|
<label htmlFor="checked-checkbox" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Rumah</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Luas Bangunan</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari rentang</div>
|
||
|
|
<div className="">
|
||
|
|
<MultiRangeSlider min={0} max={10000} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Kamar Tidur</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari pilihan di bawah</div>
|
||
|
|
<div className="pb-[16px] md:pb-[8px]">
|
||
|
|
<RadioSelect label={'KAMAR TIDUR'} repeat={4} name={'ktidur'} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Kamar Mandi</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari pilihan di bawah</div>
|
||
|
|
<div className="pb-[16px] md:pb-[8px]">
|
||
|
|
<RadioSelect label={'KAMAR MANDI'} repeat={4} name={'kmandi'} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Luas Tanah</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari rentang</div>
|
||
|
|
<div className="">
|
||
|
|
<MultiRangeSlider min={0} max={10000} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Tipe</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari pilihan di bawah</div>
|
||
|
|
<div className="my-[12px]">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<input name="cert" id="default-checkbox" type="checkbox" value="1" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||
|
|
<label htmlFor="default-checkbox" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">SHM - Sertifikat Hak Milik</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center">
|
||
|
|
<input name="cert" id="checked-checkbox" type="checkbox" value="2" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||
|
|
<label htmlFor="checked-checkbox" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">HGB - Hak Guna Bangun</label>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center">
|
||
|
|
<input name="cert" id="checked-checkbox" type="checkbox" value="3" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||
|
|
<label htmlFor="checked-checkbox" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Lainnya (PPJB, Girik, Adat, dll)</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center flex-wrap border-b border-gray-400">
|
||
|
|
<div className="pt-[16px] md:pt-[32px] pb-[16px] md:pb-[8px] text-gray-900 basis-[33.33%] md:basis-[100%]">
|
||
|
|
<div className="capitalize md:uppercase font-normal md:font-bold text-[14px] md:text-[16px]">
|
||
|
|
<span className="">Lantai</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="w-[66.66%] box-border md:w-full">
|
||
|
|
<div className="text-gray-600">Pilih dari pilihan di bawah</div>
|
||
|
|
<div className="pb-[16px] md:pb-[8px]">
|
||
|
|
<RadioSelect label={'LANTAI'} repeat={4} name={'lantai'} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="pt-4">
|
||
|
|
<button type="submit" className="h-[48px] w-full bg-indigo-950 hover:bg-indigo-750 inline-flex justify-center items-center box-border cursor-pointer relative overflow-hidden rounded-md" style={{ color: "rgb(250 204 21)" }}>Terapkan</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="col-span-4 md:col-span-3">
|
||
|
|
<div>
|
||
|
|
<div className='mx-[20px] xl:mx-[60px]'>
|
||
|
|
<h1 className='text-2xl'>Rekomendasi baru</h1>
|
||
|
|
</div>
|
||
|
|
<div className="mx-[20px] mt-[10px] md:mx-[60px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-5">
|
||
|
|
{dataListing ? Array.isArray(dataListing) ? dataListing.map((y, i) => {
|
||
|
|
y.key = i;
|
||
|
|
return (
|
||
|
|
<li className="list-none" key={i}>
|
||
|
|
<ProdukCard data={y} />
|
||
|
|
</li>
|
||
|
|
)
|
||
|
|
}) : <>{dataListing}</> : null}
|
||
|
|
</div>
|
||
|
|
<div className='text-center mt-10 mb-5'>
|
||
|
|
<button className='border-[2px] border-black px-5 py-2 rounded-md'>Muat Lainnya</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|