fix(service-card): improve expand button visibility logic for service description
- Added logic to determine when to show the expand button based on description length and line breaks. - Enhanced user experience by ensuring the button appears only when necessary, improving readability of service descriptions.
This commit is contained in:
parent
540145d80a
commit
7960323c0a
@ -19,6 +19,12 @@ export function ServiceCard({
|
||||
}: Readonly<ServiceCardProps>) {
|
||||
const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
|
||||
|
||||
const shouldShowExpandButton =
|
||||
description &&
|
||||
(description.length > 120 ||
|
||||
description.split('\n').length > 2 ||
|
||||
(description.length > 80 && description.includes('\n')));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@ -63,7 +69,8 @@ export function ServiceCard({
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
{description.length > 100 && (
|
||||
|
||||
{shouldShowExpandButton && (
|
||||
<div
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user