profile contests

src/views/home/account/articles/ArticlesBlock.tsx

@@ -0,0 +1,124 @@
+import { FC, useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
+import { cn } from '../../../../lib/cn';
+import { ChevroneDown, Edit } from '../../../../assets/icons/groups';
+import { fetchArticles } from '../../../../redux/slices/articles';
+
+import { useNavigate } from 'react-router-dom';
+
+export interface ArticleItemProps {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+const ArticleItem: React.FC<ArticleItemProps> = ({ id, name, tags }) => {
+    const navigate = useNavigate();
+    return (
+        <div
+            className={cn(
+                'w-full relative rounded-[10px] text-liquid-white mb-[20px]',
+                // type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
+                'gap-[20px] px-[20px] py-[10px] box-border ',
+                'border-b-[1px] border-b-liquid-lighter cursor-pointer hover:bg-liquid-lighter transition-all duration-300',
+            )}
+            onClick={() => {
+                navigate(`/article/${id}?back=/home/account/articles`);
+            }}
+        >
+            <div className="h-[23px] flex ">
+                <div className="text-[18px] font-bold w-[60px] mr-[20px] flex items-center">
+                    #{id}
+                </div>
+                <div className="text-[18px] font-bold flex items-center">
+                    {name}
+                </div>
+            </div>
+            <div className="text-[14px] flex text-liquid-light gap-[10px] mt-[10px]">
+                {tags.map((v, i) => (
+                    <div
+                        key={i}
+                        className={cn(
+                            'rounded-full px-[16px] py-[8px] bg-liquid-lighter',
+                            v == 'Sertificated' && 'text-liquid-green',
+                        )}
+                    >
+                        {v}
+                    </div>
+                ))}
+            </div>
+
+            <img
+                className=" absolute right-[10px] top-[10px] h-[24px] w-[24px] hover:bg-liquid-light rounded-[5px] transition-all duration-300"
+                src={Edit}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    navigate(
+                        `/article/create?back=/home/account/articles&articleId=${id}`,
+                    );
+                }}
+            />
+        </div>
+    );
+};
+
+interface ArticlesBlockProps {
+    className?: string;
+}
+
+const ArticlesBlock: FC<ArticlesBlockProps> = ({ className = '' }) => {
+    const dispatch = useAppDispatch();
+    const articles = useAppSelector((state) => state.articles.articles);
+    const [active, setActive] = useState<boolean>(true);
+
+    useEffect(() => {
+        dispatch(setMenuActiveProfilePage('articles'));
+        dispatch(fetchArticles({}));
+    }, []);
+    return (
+        <div className="h-full w-full relative p-[20px]">
+            <div
+                className={cn(
+                    ' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
+                    className,
+                )}
+            >
+                <div
+                    className={cn(
+                        ' h-[40px] text-[24px] font-bold flex gap-[10px] border-b-[1px] border-b-transparent items-center cursor-pointer transition-all duration-300',
+                        active && ' border-b-liquid-lighter',
+                    )}
+                    onClick={() => {
+                        setActive(!active);
+                    }}
+                >
+                    <span>Мои статьи</span>
+                    <img
+                        src={ChevroneDown}
+                        className={cn(
+                            'transition-all duration-300',
+                            active && 'rotate-180',
+                        )}
+                    />
+                </div>
+                <div
+                    className={cn(
+                        ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
+                        active && 'grid-rows-[1fr] opacity-100',
+                    )}
+                >
+                    <div className="overflow-hidden">
+                        <div className="grid gap-[20px] pt-[20px] pb-[20px] box-border">
+                            {articles.map((v, i) => (
+                                <ArticleItem key={i} {...v} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ArticlesBlock;