diff --git a/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx b/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx index a73a6a2..4523010 100644 --- a/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx +++ b/src/components/app/SchoolPage/schoolInfoSections/OverviewSection.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, useState } from 'react'; import dynamic from 'next/dynamic'; import { MdHome } from '@react-icons/all-files/md/MdHome'; import { MdLink } from '@react-icons/all-files/md/MdLink'; @@ -29,13 +29,32 @@ const ItemWithIcon: FC = ({ children, icon: Icon }) => ( ); -const SchoolDescription = ({ description }) => { +interface SchoolDescriptionProps { + description: string; +} +const SchoolDescription: FC = ({ description }) => { + const [isWholeContentVisible, setIsWholeContentVisible] = useState(false); + const shouldTrim = description.length > 200; + const content = + isWholeContentVisible || !shouldTrim ? description : `${description.slice(0, 200)}...`; + const buttonText = isWholeContentVisible ? 'Pokaż mniej' : 'Pokaż więcej'; + return (

O szkole

- {description} + {content}
+ {shouldTrim && ( +
+ +
+ )}
); }; @@ -92,7 +111,9 @@ const OverviewSection: FC = ({ school }) => { - {school.description && } + {school.description && school.description.trim().length > 0 && ( + + )} ); };