feat: redesign articles list small view

src/entities/Article/ui/ArticleList/ArticleList.tsx

@@ -1,12 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import { HTMLAttributeAnchorTarget, memo } from 'react';
-import { Text, TextSize } from '@/shared/ui/deprecated/Text';
+import { Text } from '@/shared/ui/redesigned/Text';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { ArticleListItemSkeleton } from '../ArticleListItem/ArticleListItemSkeleton';
 import { ArticleListItem } from '../ArticleListItem/ArticleListItem';
 import cls from './ArticleList.module.scss';
 import { Article } from '../../model/types/article';
 import { ArticleView } from '../../model/consts/consts';
+import { HStack } from '@/shared/ui/redesigned/Stack';
 
 interface ArticleListProps {
     className?: string;
@@ -45,14 +46,16 @@ export const ArticleList = memo((props: ArticleListProps) => {
                     cls[view],
                 ])}
             >
-                <Text size={TextSize.L} title={t('Articles not found')} />
+                <Text size="l" title={t('Articles not found')} />
             </div>
         );
     }
 
     return (
-        <div
-            className={classNames(cls.ArticleList, {}, [className, cls[view]])}
+        <HStack
+            wrap="wrap"
+            gap="16"
+            className={classNames(cls.ArticleListRedesigned, {}, [className])}
             data-testid="ArticleList"
         >
             {articles.map((item) => (
@@ -65,6 +68,6 @@ export const ArticleList = memo((props: ArticleListProps) => {
                 />
             ))}
             {isLoading && getSkeletons(view)}
-        </div>
+        </HStack>
     );
 });

src/entities/Article/ui/ArticleListItem/ArticleListItem.module.scss

@@ -1,12 +1,112 @@
 .BIG {
+    .views {
+        margin-left: auto;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+    }
+
+    .username {
+        margin-left: 8px;
+    }
+
+    .date {
+        margin-left: auto;
+    }
+
+    .title {
+        margin-top: 8px;
+    }
+
     .img {
         width: 100%;
-        max-height: 420px;
+        max-height: 250px;
         object-fit: cover;
+        margin: 16px 0;
+    }
+
+    .footer {
+        display: flex;
+        align-items: center;
+        margin-top: 16px;
     }
 
     .textBlock {
-        height: 72px;
+        max-height: 200px;
+        overflow-y: hidden;
+    }
+}
+
+.SMALL {
+    width: 230px;
+    transition: 0.2s;
+    cursor: pointer;
+
+    .date {
+        position: absolute;
+        right: 0;
+        top: 0;
+        display: none;
+    }
+
+    &:hover {
+        opacity: 0.8;
+        transform: scale(1.01);
+
+        .date {
+            display: block;
+        }
+    }
+
+    .imageWrapper {
+        width: 200px;
+        height: 200px;
+        position: relative;
+    }
+
+    .img {
+        width: 200px;
+        height: 200px;
+        object-fit: cover;
+    }
+
+    .infoWrapper {
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+    }
+
+    .types p {
+        width: 115px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .views {
+        margin-left: auto;
+        margin-right: 8px;
+    }
+
+    .title {
+        margin-top: 8px;
+        height: 26px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .title p {
+        width: 200px;
+        white-space: nowrap;
         overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.ArticleListItemRedesigned {
+    &.BIG {
+        width: 100%;
     }
 }

src/entities/Article/ui/ArticleListItem/ArticleListItem.tsx

@@ -27,7 +27,13 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
     const { className, article, view, target } = props;
     const { t } = useTranslation();
 
-    const types = <Text text={article.type.join(', ')} className={cls.types} />;
+    const userInfo = (
+        <>
+            <Avatar size={32} src={article.user.avatar} />
+            <Text bold text={article.user.username} />
+        </>
+    );
+
     const views = (
         <HStack gap="8">
             <Text text={String(article.views)} className={cls.views} />
@@ -52,8 +58,7 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
             >
                 <VStack gap="16">
                     <HStack gap="8">
-                        <Avatar size={32} src={article.user.avatar} />
-                        <Text bold text={article.user.username} />
+                        {userInfo}
                         <Text text={article.createdAt} />
                     </HStack>
                     <Text text={article.title} bold />
@@ -96,22 +101,39 @@ export const ArticleListItem = memo((props: ArticleListItemProps) => {
                 cls[view],
             ])}
         >
-            <Card>
-                <div className={cls.imageWrapper}>
-                    <AppImage
-                        src={article.img}
-                        alt={article.title}
-                        className={cls.img}
-                        fallback={<Skeleton width={200} height={200} />}
-                        errorFallback={<Skeleton width={200} height={200} />}
-                    />
-                    <Text text={article.createdAt} className={cls.date} />
-                </div>
-                <div className={cls.infoWrapper}>
-                    {types}
-                    {views}
-                </div>
-                <Text text={article.title} className={cls.title} />
+            <Card className={cls.card} border="round">
+                <AppImage
+                    alt={article.title}
+                    src={article.img}
+                    className={cls.img}
+                    fallback={
+                        <Skeleton
+                            className={cls.img}
+                            width={200}
+                            height={200}
+                        />
+                    }
+                    errorFallback={
+                        <Skeleton
+                            className={cls.img}
+                            width={200}
+                            height={200}
+                        />
+                    }
+                />
+                <VStack className={cls.info} gap="4">
+                    <Text title={article.title} className={cls.title} />
+                    <VStack gap="4" className={cls.footer} max>
+                        <HStack justify="between" max>
+                            <Text
+                                text={article.createdAt}
+                                className={cls.date}
+                            />
+                            {views}
+                        </HStack>
+                        <HStack gap="4">{userInfo}</HStack>
+                    </VStack>
+                </VStack>
             </Card>
         </AppLink>
     );

src/entities/Article/ui/ArticleListItem/ArticleListItemSkeleton.tsx

@@ -17,7 +17,7 @@ export const ArticleListItemSkeleton = memo(
         if (view === ArticleView.BIG) {
             return (
                 <div
-                    className={classNames(cls.ArticleListItem, {}, [
+                    className={classNames(cls.ArticleListItemRedesigned, {}, [
                         className,
                         cls[view],
                     ])}
@@ -41,7 +41,7 @@ export const ArticleListItemSkeleton = memo(
                             height={24}
                             className={cls.title}
                         />
-                        <Skeleton height={200} className={cls.img} />
+                        <Skeleton height={400} className={cls.img} />
                         <div className={cls.footer}>
                             <Skeleton height={36} width={200} />
                         </div>

src/shared/ui/redesigned/Stack/Flex/Flex.module.scss

@@ -61,3 +61,11 @@
 .max {
     width: 100%;
 }
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.nowrap {
+    flex-wrap: nowrap;
+}

src/shared/ui/redesigned/Stack/Flex/Flex.tsx

@@ -5,6 +5,7 @@ import cls from './Flex.module.scss';
 export type FlexJustify = 'start' | 'center' | 'end' | 'between';
 export type FlexAlign = 'start' | 'center' | 'end';
 export type FlexDirection = 'row' | 'column';
+export type FlexWrap = 'nowrap' | 'wrap';
 export type FlexGap = '4' | '8' | '16' | '24' | '32';
 
 const justifyClasses: Record<FlexJustify, string> = {
@@ -44,6 +45,7 @@ export interface FlexProps extends DivProps {
     align?: FlexAlign;
     direction: FlexDirection;
     gap?: FlexGap;
+    wrap?: FlexWrap;
     max?: boolean;
 }
 
@@ -54,6 +56,7 @@ export const Flex = (props: FlexProps) => {
         justify = 'start',
         align = 'center',
         direction = 'row',
+        wrap = 'nowrap',
         gap,
         max,
         ...otherProps
@@ -64,6 +67,7 @@ export const Flex = (props: FlexProps) => {
         justifyClasses[justify],
         alignClasses[align],
         directionClasses[direction],
+        cls[wrap],
         gap && gapClasses[gap],
     ];