Articles

src/views/home/articles/ArticleItem.tsx

@@ -6,43 +6,50 @@ import { IconError, IconSuccess } from "../../../assets/icons/problems";
 
 export interface ArticleItemProps {
     id: number;
-    authorId: number;
     name: string;
     tags: string[];
-    createdAt: string;
-    updatedAt: string;
 }
 
 export function formatMilliseconds(ms: number): string {
-  const rounded = Math.round(ms) / 1000;
-  const formatted = rounded.toString().replace(/\.?0+$/, '');
-  return `${formatted} c`;
+    const rounded = Math.round(ms) / 1000;
+    const formatted = rounded.toString().replace(/\.?0+$/, '');
+    return `${formatted} c`;
 }
 
 export function formatBytesToMB(bytes: number): string {
-  const megabytes = Math.floor(bytes / (1024 * 1024));
-  return `${megabytes} МБ`;
+    const megabytes = Math.floor(bytes / (1024 * 1024));
+    return `${megabytes} МБ`;
 }
 
 const ArticleItem: React.FC<ArticleItemProps> = ({
-    id, authorId, name, tags, createdAt, updatedAt
+    id, name, tags
 }) => {
     console.log(id);
     return (
-        <div className={cn("h-[44px] w-full relative rounded-[10px] text-liquid-white",
+        <div className={cn("w-full relative rounded-[10px] text-liquid-white mb-[20px]",
             // type == "first" ? "bg-liquid-lighter" : "bg-liquid-background",
-            "grid grid-cols-[1fr,1fr,1fr] grid-flow-col gap-[20px] px-[20px] box-border items-center",
+            "gap-[20px] px-[20px] py-[10px] box-border ",
+            "border-b-[1px] border-b-liquid-lighter",
         )}>
-            <div className="text-[18px] font-bold">
-                #{id}
+            <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 bg-red-400r">
+                    {name}
+                </div>
             </div>
-            <div className="text-[18px] font-bold">
-                {name}
+            <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>
-            <div className="text-[12px] text-right">
-                {/* стандартный ввод/вывод {formatMilliseconds(timeLimit)}, {formatBytesToMB(memoryLimit)} */}
-            </div>
-            
+
         </div>
     );
 };

src/views/home/articles/Articles.tsx

@@ -1,9 +1,5 @@
-import { Logo } from "../../../assets/logos";
-import { Account, Clipboard, Cup, Home, Openbook, Users } from "../../../assets/icons/menu";
-// import MenuItem from "./MenuItem";
-import { useAppSelector } from "../../../redux/hooks";
-// import ProblemItem from "./ProblemItem";
 import { SecondaryButton } from "../../../components/button/SecondaryButton";
+import ArticleItem, { ArticleItemProps } from "./ArticleItem";
 
 
 export interface Problem {
@@ -21,50 +17,116 @@ export interface Problem {
 
 const Articles = () => {
 
-    const problems: Problem[] = [
+    const articles: ArticleItemProps[] = [
         {
             "id": 1,
-            "authorId": 1,
             "name": "Todo List App",
-            "difficulty": "Easy",
-            "tags": ["react", "state", "list"],
-            "timeLimit": 1000,
-            "memoryLimit": 268435456,
-            "createdAt": "2025-10-28T13:23:13.000Z",
-            "updatedAt": "2025-10-28T13:23:13.000Z"
+            "tags": ["Sertificated", "state", "list"],
         },
         {
             "id": 2,
-            "authorId": 1,
             "name": "Search Filter Component",
-            "difficulty": "Medium",
             "tags": ["filter", "props", "hooks"],
-            "timeLimit": 1000,
-            "memoryLimit": 268435456,
-            "createdAt": "2025-10-28T13:23:14.000Z",
-            "updatedAt": "2025-10-28T13:23:14.000Z"
         },
         {
             "id": 3,
-            "authorId": 1,
             "name": "User Card List",
-            "difficulty": "Easy",
             "tags": ["components", "props", "array"],
-            "timeLimit": 1000,
-            "memoryLimit": 268435456,
-            "createdAt": "2025-10-28T13:23:15.000Z",
-            "updatedAt": "2025-10-28T13:23:15.000Z"
         },
         {
             "id": 4,
-            "authorId": 1,
             "name": "Theme Switcher",
-            "difficulty": "Medium",
-            "tags": ["context", "theme", "hooks"],
-            "timeLimit": 1000,
-            "memoryLimit": 268435456,
-            "createdAt": "2025-10-28T13:23:16.000Z",
-            "updatedAt": "2025-10-28T13:23:16.000Z"
+            "tags": ["Sertificated", "theme", "hooks"],
+        },
+        {
+            "id": 2,
+            "name": "Search Filter Component",
+            "tags": ["filter", "props", "hooks"],
+        },
+        {
+            "id": 3,
+            "name": "User Card List",
+            "tags": ["components", "props", "array"],
+        },
+        {
+            "id": 4,
+            "name": "Theme Switcher",
+            "tags": ["Sertificated", "theme", "hooks"],
+        },
+        {
+            "id": 2,
+            "name": "Search Filter Component",
+            "tags": ["filter", "props", "hooks"],
+        },
+        {
+            "id": 3,
+            "name": "User Card List",
+            "tags": ["components", "props", "array"],
+        },
+        {
+            "id": 4,
+            "name": "Theme Switcher",
+            "tags": ["Sertificated", "theme", "hooks"],
+        },
+        {
+            "id": 2,
+            "name": "Search Filter Component",
+            "tags": ["filter", "props", "hooks"],
+        },
+        {
+            "id": 3,
+            "name": "User Card List",
+            "tags": ["components", "props", "array"],
+        },
+        {
+            "id": 4,
+            "name": "Theme Switcher",
+            "tags": ["Sertificated", "theme", "hooks"],
+        },
+        {
+            "id": 2,
+            "name": "Search Filter Component",
+            "tags": ["filter", "props", "hooks"],
+        },
+        {
+            "id": 3,
+            "name": "User Card List",
+            "tags": ["components", "props", "array"],
+        },
+        {
+            "id": 4,
+            "name": "Theme Switcher",
+            "tags": ["Sertificated", "theme", "hooks"],
+        },
+        {
+            "id": 2,
+            "name": "Search Filter Component",
+            "tags": ["filter", "props", "hooks"],
+        },
+        {
+            "id": 3,
+            "name": "User Card List",
+            "tags": ["components", "props", "array"],
+        },
+        {
+            "id": 4,
+            "name": "Theme Switcher",
+            "tags": ["Sertificated", "theme", "hooks"],
+        },
+        {
+            "id": 2,
+            "name": "Search Filter Component",
+            "tags": ["filter", "props", "hooks"],
+        },
+        {
+            "id": 3,
+            "name": "User Card List",
+            "tags": ["components", "props", "array"],
+        },
+        {
+            "id": 4,
+            "name": "Theme Switcher",
+            "tags": ["Sertificated", "theme", "hooks"],
         }
     ];
 
@@ -77,8 +139,8 @@ const Articles = () => {
                     <div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
                         База статей
                     </div>
-                    <SecondaryButton 
-                        onClick={() => {}}
+                    <SecondaryButton
+                        onClick={() => { }}
                         text="Создать статью"
                         className="absolute right-0"
                     />
@@ -90,12 +152,12 @@ const Articles = () => {
 
                 <div>
 
-                {/* {problems.map((v, i) => (
-                    <ProblemItem key={i} {...v} type={i % 2 == 0 ? "first" : "second"} status={i == 0 || i == 3 || i == 7 ? "success" : (i == 2 || i == 4 || i == 9 ? "error" : "empty")}/>
-                ))} */}
+                    {articles.map((v, i) => (
+                        <ArticleItem key={i} {...v} />
+                    ))}
                 </div>
 
-                
+
                 <div>
                     pages
                 </div>