mirror of
https://github.com/danilt2000/Alma-vid.git
synced 2026-02-04 17:54:12 +02:00
Add expandable address to Object component
Introduced address truncation and expand/collapse functionality in Object.jsx and updated related styles in Object.scss. Improved responsive layout and fallback data in SliderObjects.jsx. Removed unused office address from contacts.js and updated Office page to use main address.
This commit is contained in:
@@ -1,16 +1,55 @@
|
||||
import './Object.scss';
|
||||
import "./Object.scss";
|
||||
import { useState } from "react";
|
||||
|
||||
function Object(props) {
|
||||
return (
|
||||
<div className="item">
|
||||
<img className="item__image" src={props.image} alt="квартира" />
|
||||
<div className="item__info font-inter-bold">
|
||||
<p className="item__price">{props.price}</p>
|
||||
<p className="item__desc">{props.desc}</p>
|
||||
<p className="item__address font-inter-regular">{props.address}</p>
|
||||
</div>
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
const addressLimit = 30;
|
||||
const isAddressTooLong = props.address && props.address.length > addressLimit;
|
||||
const needsExpansion = isAddressTooLong;
|
||||
|
||||
const truncateAddress = (text) => {
|
||||
if (!text) return "";
|
||||
if (isExpanded) return text;
|
||||
if (text.length <= addressLimit) return text;
|
||||
|
||||
const truncated = text.substring(0, addressLimit);
|
||||
const lastSpaceIndex = truncated.lastIndexOf(" ");
|
||||
if (lastSpaceIndex > 0) {
|
||||
return truncated.substring(0, lastSpaceIndex) + "...";
|
||||
}
|
||||
return truncated + "...";
|
||||
};
|
||||
|
||||
const toggleExpansion = () => {
|
||||
setIsExpanded(!isExpanded);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`item ${isExpanded ? "item--expanded" : ""}`}>
|
||||
<img className="item__image" src={props.image} alt="квартира" />
|
||||
<div className="item__info font-inter-bold">
|
||||
<div className="item__content">
|
||||
<p className="item__price">{props.price}</p>
|
||||
<p className="item__desc" title={props.desc}>
|
||||
{props.desc}
|
||||
</p>
|
||||
<p className="item__address font-inter-regular" title={props.address}>
|
||||
{truncateAddress(props.address)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
{needsExpansion && (
|
||||
<button
|
||||
className="item__expand-btn"
|
||||
onClick={toggleExpansion}
|
||||
type="button"
|
||||
>
|
||||
{isExpanded ? "Скрыть" : "Показать больше"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Object };
|
||||
|
||||
Reference in New Issue
Block a user