feature: user-preview description slide-content

src/entities/user/lib/helpers/getUserSliderInfo.ts

@@ -14,15 +14,22 @@ export interface UserPlaceInfo extends UserInfo {
 
 type UserListInfo = string[];
 
+type UserDescription = string;
+
 export type UserSliderInfo =
   | UserInfo
   | UserPlaceInfo
   | UserListInfo
+  | UserDescription
   | undefined;
 
 export function getUserSliderInfo(user: User | ShortUser): UserSliderInfo[] {
   const result: UserSliderInfo[] = [];
 
+  if (user.description) {
+    result.push(user.description);
+  }
+
   result.push({
     name: user.name,
     age: user.age!,

src/entities/user/ui/Preview/components/UserSlider/components/SliderContent/SliderContent.module.scss

@@ -1,15 +1,15 @@
 .wrapper {
   max-width: calc(100% - 70px);
   width: 100%;
-  height: 120px;
+  min-height: 120px;
 
   position: absolute;
   bottom: 100px;
   left: 0;
   z-index: 1;
 
   letter-spacing: 0.7px;
-  padding: 5px 0 25px 20px;
+  padding: 5px 0 15px 20px;
   cursor: pointer;
   color: var(--color--white-100);
 
@@ -18,7 +18,8 @@
   }
 
   &.high {
-    height: 164px;
+    min-height: 120px;
+    padding: 5px 0 25px 20px;
   }
 
   .items {
@@ -76,6 +77,24 @@
       margin: 0 7px 0 2px;
     }
   }
+
+  .longText {
+    font-size: 17px;
+    line-height: 130%;
+    font-weight: 300;
+
+    max-height: 120px;
+    -webkit-line-clamp: 5;
+
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
 }
 
 @media (max-width: 400px) {

src/entities/user/ui/Preview/components/UserSlider/components/SliderContent/SliderContent.tsx

@@ -25,6 +25,17 @@ export const SliderContent: FC<SliderContentProps> = ({
 
   const cn = classNames(styles.wrapper, disabled && styles.disabled);
 
+  if (typeof currentInfo === 'string') {
+    return (
+      <div className={cn}>
+        <div className={styles.person}>
+          {name} <span className={styles.years}>{age}</span>
+        </div>
+        <span className={styles.longText}>{currentInfo}</span>
+      </div>
+    );
+  }
+
   if (Array.isArray(currentInfo)) {
     return (
       <div className={classNames(cn, styles.high)}>