articles

src/views/home/articles/ArticleItem.tsx

@@ -0,0 +1,50 @@
+import { Logo } from "../../../assets/logos";
+import { Account, Clipboard, Cup, Home, Openbook, Users } from "../../../assets/icons/menu";
+// import MenuItem from "./MenuItem";
+import { cn } from "../../../lib/cn";
+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`;
+}
+
+export function formatBytesToMB(bytes: number): string {
+  const megabytes = Math.floor(bytes / (1024 * 1024));
+  return `${megabytes} МБ`;
+}
+
+const ArticleItem: React.FC<ArticleItemProps> = ({
+    id, authorId, name, tags, createdAt, updatedAt
+}) => {
+    console.log(id);
+    return (
+        <div className={cn("h-[44px] w-full relative rounded-[10px] text-liquid-white",
+            // 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",
+        )}>
+            <div className="text-[18px] font-bold">
+                #{id}
+            </div>
+            <div className="text-[18px] font-bold">
+                {name}
+            </div>
+            <div className="text-[12px] text-right">
+                {/* стандартный ввод/вывод {formatMilliseconds(timeLimit)}, {formatBytesToMB(memoryLimit)} */}
+            </div>
+            
+        </div>
+    );
+};
+
+export default ArticleItem;

src/views/home/articles/Articles.tsx

@@ -0,0 +1,107 @@
+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";
+
+
+export interface Problem {
+    id: number;
+    authorId: number;
+    name: string;
+    difficulty: "Easy" | "Medium" | "Hard";
+    tags: string[];
+    timeLimit: number;
+    memoryLimit: number;
+    createdAt: string;
+    updatedAt: string;
+}
+
+
+const Articles = () => {
+
+    const problems: Problem[] = [
+        {
+            "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"
+        },
+        {
+            "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"
+        }
+    ];
+
+
+    return (
+        <div className=" h-full w-full box-border p-[20px] pt-[20px]">
+            <div className="h-full box-border">
+
+                <div className="relative flex items-center mb-[20px]">
+                    <div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
+                        База статей
+                    </div>
+                    <SecondaryButton 
+                        onClick={() => {}}
+                        text="Создать статью"
+                        className="absolute right-0"
+                    />
+                </div>
+
+                <div className="bg-liquid-lighter h-[50px] mb-[20px]">
+
+                </div>
+
+                <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")}/>
+                ))} */}
+                </div>
+
+                
+                <div>
+                    pages
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Articles;