From d08c0697ced6e725a0d8c341374ed65c299e1b21 Mon Sep 17 00:00:00 2001
From: Nicolas Becharat <nicolas.becharat@gmail.com>
Date: Fri, 16 Aug 2024 22:05:43 +0200
Subject: [PATCH] unlimit post

---
 src/components/cards/cardBlog.tsx | 16 ++++++++---
 src/components/text-editor.tsx    | 44 +++++--------------------------
 2 files changed, 18 insertions(+), 42 deletions(-)

diff --git a/src/components/cards/cardBlog.tsx b/src/components/cards/cardBlog.tsx
index 5e5b396..859c7ed 100644
--- a/src/components/cards/cardBlog.tsx
+++ b/src/components/cards/cardBlog.tsx
@@ -14,6 +14,14 @@ export default async function CardBlog({
   isAdmin,
 }: CardBlogProps) {
   const router = useRouter();
+
+  const descriptionLength = description.length;
+
+  const descriptionLimit = 50;
+
+  const limitedDescription = description.slice(0, descriptionLimit);
+  
+
   const handleDelete = async () => {
     try {
       const deletePost = async () => {
@@ -42,9 +50,9 @@ export default async function CardBlog({
 
   return (
     <>
-      <div className="border border-gray-200 p-4 hover:shadow-lg transition-all duration-300 ease-out h-40 rounded-lg flex flex-col justify-between">
+      <div className="border border-gray-200 p-4 hover:shadow-lg transition-all duration-300 ease-out  rounded-lg flex flex-col justify-between">
         <div>
-          <div className="flex items-center justify-between">
+          <div className="flex items-center justify-between gap-4">
             <div>
               <h3 className="text-xl font-bold">{title}</h3>
             </div>
@@ -52,8 +60,8 @@ export default async function CardBlog({
               <p className="text-gray-500">{date}</p>
             </div>
           </div>
-          <div>
-            <p className="text-gray-500">{description}</p>
+          <div className="my-2">
+            <p className="text-gray-500">{limitedDescription}...</p>
           </div>
         </div>
         <div>
diff --git a/src/components/text-editor.tsx b/src/components/text-editor.tsx
index fff5c72..4213fdb 100644
--- a/src/components/text-editor.tsx
+++ b/src/components/text-editor.tsx
@@ -25,7 +25,6 @@ const RichTextEditor = ({
 
 
 
-  const limit = 100;
 
   const editor = useEditor({
     editorProps: {
@@ -66,9 +65,7 @@ const RichTextEditor = ({
         autolink: true,
         defaultProtocol: 'https',
       }),
-      CharacterCount.configure({
-        limit,
-      }),
+      CharacterCount.configure(),
       CodeBlock.configure({
         HTMLAttributes: {
           class: "border-gray-300 rounded-md p-2 bg-gray-500 text-white font-code",
@@ -113,45 +110,16 @@ const RichTextEditor = ({
     }
   }, [editor])
 
-  const percentage = editor
-    ? Math.round((100 / limit) * editor.storage.characterCount.characters())
-    : 0
+
 
   return (
     <>
       <EditorContent editor={editor} />
       {editor ? <RichTextEditorToolbar editor={editor} setLink={setLink} addImage={addImage} /> : null}
-      <div className={`flex flex-row items-center gap-2 text-sms ${editor?.storage.characterCount.characters() === limit ? 'text-red-500' : 'text-gray-500'}`}>
-        <svg
-          height="10"
-          width="10"
-          viewBox="0 0 10 10"
-        >
-          <circle
-            r="5"
-            cx="5"
-            cy="5"
-            fill="#e9ecef"
-          />
-          <circle
-            r="2.5"
-            cx="5"
-            cy="5"
-            fill="transparent"
-            stroke="currentColor"
-            strokeWidth="5"
-            strokeDasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
-            transform="rotate(-90) translate(-10)"
-          />
-          <circle
-            r="3"
-            cx="5"
-            cy="5"
-            fill="white"
-          />
-        </svg>
-
-        {editor?.storage.characterCount.characters()} / {limit} characters
+      <div className={`flex flex-row items-center gap-2 text-sms text-gray-500`}>
+        
+
+        {editor?.storage.characterCount.characters()} characters
         
       </div>
     </>