172 lines
4.5 KiB
TypeScript
172 lines
4.5 KiB
TypeScript
import { useEffect } from "react";
|
||
import { SecondaryButton } from "../../../components/button/SecondaryButton";
|
||
import { useAppDispatch } from "../../../redux/hooks";
|
||
import ArticleItem from "./ArticleItem";
|
||
import { setMenuActivePage } from "../../../redux/slices/store";
|
||
|
||
|
||
export interface Article {
|
||
id: number;
|
||
name: string;
|
||
tags: string[];
|
||
}
|
||
|
||
|
||
const Articles = () => {
|
||
|
||
const dispatch = useAppDispatch();
|
||
|
||
const articles: Article[] = [
|
||
{
|
||
"id": 1,
|
||
"name": "Todo List App",
|
||
"tags": ["Sertificated", "state", "list"],
|
||
},
|
||
{
|
||
"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"],
|
||
},
|
||
{
|
||
"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"],
|
||
}
|
||
];
|
||
|
||
useEffect(() => {
|
||
dispatch(setMenuActivePage("articles"))
|
||
}, []);
|
||
|
||
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>
|
||
|
||
{articles.map((v, i) => (
|
||
<ArticleItem key={i} {...v} />
|
||
))}
|
||
</div>
|
||
|
||
|
||
<div>
|
||
pages
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Articles;
|