feat: add text size props, avatar and title for articles

TomatoVan · Dec 22, 2023 · 433b630 · 433b630
1 parent d6fbc37
commit 433b630
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 13 deletions.
diff --git a/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx b/src/entities/Article/ui/ArticleDetails/ArticleDetails.tsx
@@ -7,8 +7,14 @@ import {
 import { memo, useEffect } from 'react';
 import { useAppDispatch } from 'shared/lib/hook/useAppDispatch/useAppDispatch';
 import { useSelector } from 'react-redux';
-import { Text, TextAlign, TextTheme } from 'shared/ui/Text/Text';
+import {
+    Text, TextAlign, TextSize, TextTheme,
+} from 'shared/ui/Text/Text';
 import { Skeleton } from 'shared/ui/Skeleton/ui/Skeleton';
+import { Avatar } from 'shared/ui/Avatar/Avatar';
+import EyeIcon from 'shared/assets/icons/eye-20-20.svg';
+import CalendarIcon from 'shared/assets/icons/calendar-20-20.svg';
+import { Icon } from 'shared/ui/Icon/Icon';
 import {
     getArticlesDetailsData,
     getArticlesDetailsIsError,
@@ -42,14 +48,14 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
     let content;
     if (isLoading) {
         content = (
-            <div>
+            <>
                 <Skeleton className={cls.avatar} width={200} height={200} border="50%" />
                 <Skeleton className={cls.title} width={300} height={32} />
                 <Skeleton className={cls.skeleton} width={600} height={24} />
                 <Skeleton className={cls.skeleton} width="100%" height={200} />
                 <Skeleton className={cls.skeleton} width="100%" height={200} />
 
-            </div>
+            </>
         );
     } else if (error) {
         content = (
@@ -62,7 +68,30 @@ export const ArticleDetails = memo(({ className, id }: ArticleDetailsProps) => {
         );
     } else {
         content = (
-            <div> ARTICLE DETAILS</div>
+            <>
+                <div className={cls.avatarWrapper}>
+                    <Avatar
+                        size={200}
+                        src={article?.img}
+                        className={cls.avatar}
+                    />
+                </div>
+                <Text
+                    className={cls.title}
+                    size={TextSize.L}
+                    title={article?.title}
+                    text={article?.subtitle}
+                />
+                <div className={cls.articleInfo}>
+                    <Icon Svg={EyeIcon} className={cls.icon} />
+                    <Text text={String(article?.views)} />
+                </div>
+                <div className={cls.articleInfo}>
+                    <Icon Svg={CalendarIcon} className={cls.icon} />
+                    <Text text={article?.createdAt} />
+                </div>
+
+            </>
         );
     }
 

diff --git a/src/shared/ui/Icon/Icon.module.scss b/src/shared/ui/Icon/Icon.module.scss
@@ -0,0 +1,3 @@
+.Icon {
+    fill: var(--primary-color);
+}
diff --git a/src/shared/ui/Icon/Icon.tsx b/src/shared/ui/Icon/Icon.tsx
@@ -0,0 +1,16 @@
+import { classNames } from 'shared/lib/classNames/classNames';
+import { useTranslation } from 'react-i18next';
+import React, { memo } from 'react';
+import cls from './Icon.module.scss';
+
+interface IconProps {
+	className?: string;
+	Svg: React.VFC<React.SVGProps<SVGSVGElement>>;
+}
+
+export const Icon = memo(({ className, Svg }: IconProps) => {
+    const { t } = useTranslation();
+    return (
+        <Svg className={classNames(cls.Icon, {}, [className])} />
+    );
+});
diff --git a/src/shared/ui/Text/Text.module.scss b/src/shared/ui/Text/Text.module.scss
@@ -1,10 +1,8 @@
 .title {
-    font: var(--font-l);
     color: var(--primary-color);
 }
 
 .text {
-    font: var(--font-m);
     color: var(--secondary-color);
 }
 
@@ -29,3 +27,23 @@
 .center {
     text-align: center;
 }
+
+.size_m {
+    .title {
+        font: var(--font-l);
+    }
+
+    .text {
+        font: var(--font-m);
+    }
+}
+
+.size_l {
+    .title {
+        font: var(--font-xl);
+    }
+
+    .text {
+        font: var(--font-l);
+    }
+}
diff --git a/src/shared/ui/Text/Text.stories.tsx b/src/shared/ui/Text/Text.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Text, TextTheme } from 'shared/ui/Text/Text';
+import { Text, TextSize, TextTheme } from 'shared/ui/Text/Text';
 import { Theme } from 'app/providers/ThemeProvider';
 import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDecorator';
 
@@ -14,6 +14,13 @@ export default {
 
 const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
 
+export const Primary = Template.bind({});
+Primary.args = {
+    title: 'title title title',
+    text: 'description description description',
+
+};
+
 export const PrimaryDark = Template.bind({});
 PrimaryDark.args = {
     title: 'title title title',
@@ -22,22 +29,28 @@ PrimaryDark.args = {
 };
 PrimaryDark.decorators = [ThemeDecorator(Theme.DARK)];
 
-export const onlyTitleDark = Template.bind({});
-onlyTitleDark.args = {
+export const onlyTitle = Template.bind({});
+onlyTitle.args = {
     title: 'onlyTitle',
 
 };
-onlyTitleDark.decorators = [ThemeDecorator(Theme.DARK)];
 
-export const onlyDescriptionDark = Template.bind({});
-onlyDescriptionDark.args = {
+export const onlyDescription = Template.bind({});
+onlyDescription.args = {
     text: 'onlyDescription',
 };
-onlyDescriptionDark.decorators = [ThemeDecorator(Theme.DARK)];
 
 export const Error = Template.bind({});
 Error.args = {
     title: 'title title title',
     text: 'description description description',
     theme: TextTheme.ERROR,
 };
+
+export const sizeL = Template.bind({});
+sizeL.args = {
+    title: 'title title title',
+    text: 'description description description',
+    size: TextSize.L,
+
+};
diff --git a/src/shared/ui/Text/Text.tsx b/src/shared/ui/Text/Text.tsx
@@ -13,13 +13,18 @@ export enum TextAlign {
 	LEFT = 'left',
 	CENTER = 'center'
 }
+export enum TextSize {
+	M = 'size_m',
+	L = 'size_l',
+}
 
 interface TextProps {
 	className?: string;
 	title?:string;
 	text?:string;
 	theme?: TextTheme;
 	align?: TextAlign;
+	size?: TextSize;
 }
 
 export const Text = memo((props: TextProps) => {
@@ -29,12 +34,14 @@ export const Text = memo((props: TextProps) => {
         title,
         theme = TextTheme.PRIMARY,
         align = TextAlign.LEFT,
+        size = TextSize.M,
     } = props;
 
     const additional = [
         className,
         cls[theme],
         cls[align],
+        cls[size],
 
     ];