article form creator

2025-11-04 14:21:14 +03:00
parent 04dbc5eeb1
commit 2e3a8779fc
17 changed files with 266 additions and 107 deletions
--- a/src/pages/ArticleEditor.tsx
+++ b/src/pages/ArticleEditor.tsx
@@ -0,0 +1,106 @@
+import { Route, Routes, useNavigate } from "react-router-dom";
+import Header from '../views/articleeditor/Header';
+import MarkdownEditor from "../views/articleeditor/Editor";
+import { useState } from "react";
+import { PrimaryButton } from "../components/button/PrimaryButton";
+import MarkdownPreview from "../views/articleeditor/MarckDownPreview";
+import { Input } from "../components/input/Input";
+
+
+const ArticleEditor = () => {
+    const [code, setCode] = useState<string>("");
+    const [name, setName] = useState<string>("");
+    const navigate = useNavigate();
+
+
+    const [tagInput, setTagInput] = useState<string>("");
+    const [tags, setTags] = useState<string[]>([]);
+
+    const addTag = () => {
+        const newTag = tagInput.trim();
+        if (newTag && !tags.includes(newTag)) {
+            setTags([...tags, newTag]);
+            setTagInput("");
+        }
+    };
+
+    const removeTag = (tagToRemove: string) => {
+        setTags(tags.filter(tag => tag !== tagToRemove));
+    };
+
+    return (
+        <div className="h-screen grid grid-rows-[60px,1fr]">
+
+            <Routes>
+                <Route path="editor" element={<Header backUrl="/article/create" />} />
+                <Route path="*" element={<Header backUrl="/home/articles" />} />
+            </Routes>
+
+
+
+            <Routes>
+                <Route path="editor" element={<MarkdownEditor onChange={setCode} />} />
+                <Route path="*" element={
+                    <div className="text-liquid-white">
+                        <div className="text-[40px] font-bold">Создание статьи</div>
+
+
+                        <PrimaryButton onClick={() => { 
+                            console.log({
+                                name: name,
+                                tags: tags,
+                                text: code,
+                            })
+
+                        }} text="Опубликовать" className="mt-[20px]" />
+
+
+                        <Input name="articleName" autocomplete="articleName" className="mt-[20px] max-w-[600px]" type="text" label="Название" onChange={(v) => { setName(v) }} placeholder="Новая статья" />
+
+
+                        {/* Блок для тегов */}
+                        <div className="mt-[20px] max-w-[600px]">
+
+                            <div className="grid grid-cols-[1fr,140px] items-end gap-2">
+                                <Input
+                                    name="articleTag"
+                                    autocomplete="articleTag"
+                                    className="mt-[20px] max-w-[600px]"
+                                    type="text"
+                                    label="Теги"
+                                    onChange={(v) => { setTagInput(v) }}
+                                    defaultState={tagInput}
+                                    placeholder="arrays"
+                                    onKeyDown={(e) => {
+                                        console.log(e.key);
+                                        if (e.key == "Enter")
+                                            addTag();
+                                        }
+                                    }
+                                />
+                                <PrimaryButton onClick={addTag} text="Добавить" className="h-[40px] w-[140px]" />
+
+                            </div>
+                            <div className="flex flex-wrap gap-[10px] mt-2">
+                                {tags.map(tag => (
+                                    <div
+                                        key={tag}
+                                        className="flex items-center gap-1 bg-liquid-lighter px-3 py-1 rounded-full"
+                                    >
+                                        <span>{tag}</span>
+                                        <button onClick={() => removeTag(tag)} className="text-liquid-red font-bold ml-[5px]">×</button>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        <PrimaryButton onClick={() => navigate("editor")} text="Редактировать текст" className="mt-[20px]" />
+                        <MarkdownPreview content={code} className="bg-transparent border-liquid-lighter border-[3px] rounder-[20px] mt-[20px]" />
+                    </div>
+                } />
+            </Routes>
+        </div>
+    );
+};
+
+export default ArticleEditor;