formatting
This commit is contained in:
Виталий Лавшонок
@@ -1,103 +1,133 @@
|
||||
import { Route, Routes, useNavigate } from "react-router-dom";
|
||||
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";
|
||||
|
||||
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 [code, setCode] = useState<string>('');
|
||||
const [name, setName] = useState<string>('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
||||
const [tagInput, setTagInput] = useState<string>("");
|
||||
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("");
|
||||
setTagInput('');
|
||||
}
|
||||
};
|
||||
|
||||
const removeTag = (tagToRemove: string) => {
|
||||
setTags(tags.filter(tag => tag !== tagToRemove));
|
||||
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="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]" />
|
||||
|
||||
<Route
|
||||
path="editor"
|
||||
element={<MarkdownEditor onChange={setCode} />}
|
||||
/>
|
||||
<Route
|
||||
path="*"
|
||||
element={
|
||||
<div className="text-liquid-white">
|
||||
<div className="text-[40px] font-bold">
|
||||
Создание статьи
|
||||
</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>
|
||||
))}
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user