From f574fdc66d227e5e74a9545ebde294385a88be66 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Tue, 22 Apr 2025 18:03:54 +0700 Subject: [PATCH] fix: property list and detail UI slicing --- public/css/style.css | 6 +- src/app/(main)/globals.css | 1 + .../(main)/listings-for-rent/[slug]/page.tsx | 594 ++++++++++++++++++ src/app/(main)/listings-for-rent/page.tsx | 292 +++++++++ src/components/CardProperty.tsx | 63 ++ src/components/Pagination.tsx | 120 ++++ src/components/layouts/Header.tsx | 2 +- src/schema/property.ts | 16 + src/utils/general.ts | 19 + 9 files changed, 1109 insertions(+), 4 deletions(-) create mode 100644 src/app/(main)/listings-for-rent/[slug]/page.tsx create mode 100644 src/app/(main)/listings-for-rent/page.tsx create mode 100644 src/components/CardProperty.tsx create mode 100644 src/components/Pagination.tsx create mode 100644 src/schema/property.ts diff --git a/public/css/style.css b/public/css/style.css index 9b91adc..b223537 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -588,9 +588,9 @@ a:hover { color: #967244; } -a[href*='tel'], a[href*='mailto'] { +/* a[href*='tel'], a[href*='mailto'] { white-space: nowrap; -} +} */ .link-default, .link-default:active, .link-default:focus { color: #424445; @@ -1177,7 +1177,7 @@ a.privacy-link { padding: 12px 11px; color: #9cc1ff; letter-spacing: 0; - background-color: #31323c; + background-color: var(--color-colorContactForm); } .block-callboard a, .block-callboard a:focus, .block-callboard a:active { diff --git a/src/app/(main)/globals.css b/src/app/(main)/globals.css index 08bd10e..29b5ab8 100644 --- a/src/app/(main)/globals.css +++ b/src/app/(main)/globals.css @@ -34,6 +34,7 @@ --color-colorText1: var(--color-colorExt10); --color-colorText2: var(--color-colorExt20); --color-colorLoaderBackground: var(--color-colorExt20); + --color-colorPriceTag: var(--color-colorExt30); } @layer components { diff --git a/src/app/(main)/listings-for-rent/[slug]/page.tsx b/src/app/(main)/listings-for-rent/[slug]/page.tsx new file mode 100644 index 0000000..a6dada7 --- /dev/null +++ b/src/app/(main)/listings-for-rent/[slug]/page.tsx @@ -0,0 +1,594 @@ +import CardProperty from "@/components/CardProperty"; +import HeroImage from "@/components/HeroImage"; +import { CardPropertyData } from "@/schema/property"; +import { formatCurrency } from "@/utils/general"; + +const similarPropertiesData: CardPropertyData[] = [ + { + id: 1, + title: "401 Biscayne Boulevard, Miami", + slug: "401-biscayne-boulevard", + images: [ + { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }, + { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }, + { url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }, + ], + price: 5000, + propertyType: "rent", + posted_at: "", + area: 480, + bathrooms_count: 2, + bedrooms_count: 2, + is_available: true, + }, + { + id: 2, + title: "402 Biscayne Boulevard, Miami", + slug: "402-biscayne-boulevard", + images: [{ url: "/images/featured-properties-01-480x287.jpg", alt: "biscayne boulevard" }], + price: 5000, + propertyType: "rent", + posted_at: "", + area: 480, + bathrooms_count: 2, + bedrooms_count: 2, + is_available: true, + }, +]; + +export default function ListingsForRentDetail() { + return ( + <> + + +
+
+
+
+
+
$5000\mo
+ + +
+
+
+
+
    +
  • + + 2 Bathrooms +
    • +
  • + + 2 Bedrooms +
    • +
  • + + 480 Sq Ft +
    • +
+
+ +
+
+

+ Choose this property if you are looking for a modern house near the ocean shore. With 2 bathrooms and 2 + bedrooms as well as a single garage, it is a perfect option for a small family. +

+

+ This home has been completely renovated within the past year and features amazing views and sunsets of + the local lake, solid wood cabinets (and loads of them), granite counters with colored glass backsplash, + sliding glass doors across the entire family room allowing beautiful views of the lake etc. Its + affordable price serves as a great bonus for a family looking for an opportunity to save money on Miami + MyHome. +

+ +
+
+ +
+
+
+
+
Address:
+
Biscayne Blvd
+
+
+
State/County:
+
Florida
+
+
+
City:
+
Miami
+
+
+
Zip:
+
8322
+
+
+
Country:
+
United States
+
+
+
Area:
+
Lake Worth
+
+
+
+
+
+
+
+
+ +
+
+
    +
  • 2 Stories
    • +
  • Basketball Court
    • +
  • Lawn
    • +
  • Gym
    • +
  • Fireplace
    • +
  • Sprinklers
    • +
  • Private Space
    • +
  • Balcony
    • +
  • Laundry
    • +
  • Ocean View
    • +
+
+
+
+
+
+
+ +
+
+
+
+
Base Rent
+
{formatCurrency(2700)}
+
+
+
+
+
Smart Home
+
{formatCurrency(20)}
+
+
+
+
+
Utility Service
+
{formatCurrency(5)}
+
+
+
+
+
Est. total monthly*
+
{formatCurrency(2900)}
+
+
+
+
+
+
+ +
+

Property Map

+
+
+