LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Articles

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-10-29 10:37:37 +03:00
parent 34a404f147
commit 5ef7933446
2 changed files with 126 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/home/articles/ArticleItem.tsx
View File

@@ -6,11 +6,8 @@ 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 {
@@ -25,22 +22,32 @@ export function formatBytesToMB(bytes: number): string {
}
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">
<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">
<div className="text-[18px] font-bold flex items-center bg-red-400r">
{name}
</div>
<div className="text-[12px] text-right">
{/* стандартный ввод/вывод {formatMilliseconds(timeLimit)}, {formatBytesToMB(memoryLimit)} */}
</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>
</div>

132
src/views/home/articles/Articles.tsx
View File

@@ -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"],
}
];
@@ -90,9 +152,9 @@ 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>