This commit is contained in:
RizqiSyahrendra 2025-04-27 11:01:59 +07:00
commit a6ffa1879e
2 changed files with 44 additions and 30 deletions

View File

@ -1,6 +1,21 @@
"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useLatestPropertyQuery } from "../../services/hooks/property";
export default function Footer() { export default function Footer() {
const { data, _fetch } = useLatestPropertyQuery();
const [isDataFetched, setIsDataFetched] = useState(false);
useEffect(() => {
if (!isDataFetched) {
_fetch();
setIsDataFetched(true);
}
}, [isDataFetched, _fetch]);
const latestProperties = data ? data.slice(0, 2) : [];
return ( return (
<> <>
<section className="section section-md bg-colorFooter context-dark"> <section className="section section-md bg-colorFooter context-dark">
@ -10,36 +25,34 @@ export default function Footer() {
<h3 className="heading-square font-weight-sbold" data-item=".heading-square-item"> <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">
<span className="heading-square-item"></span>Latest Properties <span className="heading-square-item"></span>Latest Properties
</h3> </h3>
<a className="post-minimal" href="single-property.html"> {latestProperties && latestProperties.length > 0 ? (
<div className="post-minimal-image"> latestProperties.map((property, index) => (
<Image src="/images/featured-properties-17-480x287.jpg" alt="" width="161" height="136" /> <a key={index} className="post-minimal" href={`single-property/${property.slug}`}>
</div> <div className="post-minimal-image">
<div className="post-minimal-body"> <Image
<div className="post-minimal-title"> src={
<span className="text-colorFooterText! hover:text-colorFooterTextHover!"> property.images && property.images.length > 0
Retail Store Southwest 186th Street ? property.images[0].url
</span> : "/images/featured-properties-17-480x287.jpg"
</div> }
<div className="post-minimal-text"> alt={property.title}
<span>From $120/month</span> width={161}
</div> height={136}
</div> />
</a> </div>
<a className="post-minimal" href="single-property.html"> <div className="post-minimal-body">
<div className="post-minimal-image"> <div className="post-minimal-title">
<Image src="/images/featured-properties-17-480x287.jpg" alt="" width="161" height="136" /> <span className="text-colorFooterText! hover:text-colorFooterTextHover!">{property.title}</span>
</div> </div>
<div className="post-minimal-body"> <div className="post-minimal-text">
<div className="post-minimal-title"> <span>From ${property.price}/month</span>
<span className="text-colorFooterText! hover:text-colorFooterTextHover!"> </div>
Apartment Building with Subunits </div>
</span> </a>
</div> ))
<div className="post-minimal-text"> ) : (
<span>From $120/month</span> <div>Data Not Available</div>
</div> )}
</div>
</a>
</div> </div>
<div className="col-md-6 col-lg-4 col-xl-3 col-bordered"> <div className="col-md-6 col-lg-4 col-xl-3 col-bordered">
<h3 className="heading-square font-weight-sbold" data-item=".heading-square-item"> <h3 className="heading-square font-weight-sbold" data-item=".heading-square-item">

View File

@ -1,3 +1,4 @@
"use client";
import { CardPropertyData } from "@/schema/property"; import { CardPropertyData } from "@/schema/property";
import { useState } from "react"; import { useState } from "react";
import { fetchLatestPropertyREST } from "../rest/property"; import { fetchLatestPropertyREST } from "../rest/property";