BarbarosWeb/react
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Girdilere sayaç eklendi.

Browse Source
This commit is contained in:
batuhancoskun 2025-06-15 02:27:20 +03:00
parent eb4f02238d
commit edae29f09b
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/blogs/Write.jsx
View File

@ -6,20 +6,29 @@ import { postBlog } from '../../middlewares/blogs/postBlogs';
export default function Write() { export default function Write() {
const { globalState } = useContext(GSContext); const { globalState } = useContext(GSContext);
const [selectedCate, setSelectedCate] = useState(); const [selectedCate, setSelectedCate] = useState();
console.log(globalState);
return ( return (
<div className='flex flex-col w-full bg-white rounded-lg overflow-hidden'> <div id='input' className='flex flex-col w-full bg-white rounded-lg overflow-hidden'>
<div className='flex justify-between w-full bg-pc'> <div className='flex justify-between w-full bg-pc'>
<a onClick={() => window.history.back()} className='p-2 cursor-pointer'>Geri Git</a> <a onClick={() => window.history.back()} className='p-2 cursor-pointer'>Geri Git</a>
</div> </div>
<form className='flex flex-col p-2 gap-2' onSubmit={(e) => postBlog(e, selectedCate)}> <form className='flex flex-col p-2 gap-2' onSubmit={(e) => postBlog(e, selectedCate)}>
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-2'>
<p className='font-bold'>Başlık</p> <div className='flex justify-between'>
<input name='title' className='rounded-md p-2'></input> <p className='font-bold'>Başlık</p>
<div className='flex'>
<p id='title-count' className='font-bold text-red-600'><span id='title-current-count'>0</span> / {globalState.config.max_title}</p>
</div>
</div>
<input name='title' className='rounded-md p-2' onChange={(e) => CharCount(e, 'title', globalState.config.min_title, globalState.config.max_title)}></input>
</div> </div>
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-2'>
<p className='font-bold'>Yazı</p> <div className='flex justify-between'>
<textarea name='text' className='resize-none p-2 h-36 rounded-md'></textarea> <p className='font-bold'>Yazı</p>
<div className='flex'>
<p id='text-count' className='font-bold text-red-600'><span id='text-current-count'>0</span> / {globalState.config.max_text}</p>
</div>
</div>
<textarea name='text' className='resize-none p-2 h-36 rounded-md' onChange={(e) => CharCount(e, "text", globalState.config.min_text, globalState.config.max_text)}></textarea>
</div> </div>
<hr/> <hr/>
<div className='flex flex-col gap-2'> <div className='flex flex-col gap-2'>
@ -41,3 +50,25 @@ export default function Write() {
</div> </div>
) )
} }
function CharCount(event, code, minCount, maxCount) {
const text = event.target.value;
const textCount = Number(text.length);
const countElement = document.getElementById(code + "-count");
const currentCount = document.getElementById(code + "-current-count");
currentCount.innerText = textCount;
if(textCount == 0){
countElement.classList.add("text-red-600");
countElement.classList.remove("text-green-500");
}else if(textCount >= minCount && textCount <= maxCount){
countElement.classList.remove("text-red-600");
countElement.classList.add("text-green-500");
}else if(textCount < minCount || textCount > maxCount){
countElement.classList.add("text-red-600");
countElement.classList.remove("text-green-500");
};
};