Merge pull request #74 from techknowledge-blog/feature/article-levels-label

Article Level Label

Author: leticiadia

src/components/posts/post/Post.tsx

@@ -17,6 +17,7 @@ interface PostProps {
   content: string;
   slug: string;
   createdAt: string;
+  article_level: string;
 }
 
 export function Post() {
@@ -42,13 +43,29 @@ export function Post() {
     return <div>carregando...</div>;
   }
 
+  const levelColors: Record<string, string> = {
+    Iniciante: "bg-[#B4CB3F]",
+    Intermediário: "bg-[#408EEB]",
+    Avançado: "bg-[#7B66D4]",
+  };
+
   return (
-    <div className="px-4 sm:px-6 lg:px-8 mt-12 w-full md:w-[46rem] lg:w-[62rem]">
-      <div className="flex items-center">
-        <div className="h-6 w-1 dark:bg-blue-300 bg-blue-500 mr-4"></div>
-        <p className="font-bold text-sm sm:text-base dark:text-white text-[#62748E]">
-          {formatDateToCustomFormat(post.createdAt)}
-        </p>
+    <div className="px-6 mt-12 w-full md:w-[46rem] lg:w-[62rem]">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <div className="h-6 w-1 dark:bg-blue-300 bg-blue-500 mr-4"></div>
+          <p className="font-bold text-sm sm:text-base dark:text-white text-[#62748E]">
+            {formatDateToCustomFormat(post.createdAt)}
+          </p>
+        </div>
+
+        <span
+          className={`w-[6.5rem] h-[1.625rem] rounded-full text-xs text-black font-semibold flex items-center justify-center ${
+            levelColors[post.article_level] || "bg-gray-200 text-gray-700"
+          }`}
+        >
+          <p>{post.article_level}</p>
+        </span>
       </div>
 
       <div className="prose prose-invert max-w-none mt-8">
@@ -59,7 +76,7 @@ export function Post() {
         <div className="mt-8">
           <ReactMarkdown
             className=" prose dark:prose-invert prose-h1:text-black dark:prose-h1:text-white max-w-full 
-            prose-pre:overflow-x-auto prose-pre:max-w-full md:prose-pre:w-full sm-custom:prose-pre:w-[18rem] sm-extended:prose-pre:w-[30rem] xs-custom:prose-pre:w-[21rem] prose-pre:p-4 
+            prose-pre:overflow-x-auto prose-pre:max-w-full md:prose-pre:w-full sm-custom:prose-pre:w-full sm-extended:prose-pre:w-full xs-custom:prose-pre:w-full prose-pre:p-4 
           prose-pre:bg-gray-800 dark:prose-pre:bg-slate-800 prose-pre:text-white prose-pre:rounded-lg
             prose-code:break-words prose-code:whitespace-pre-wrap"
             rehypePlugins={[rehypeHighlight]}

src/components/posts/postlist/PostList.tsx

@@ -15,6 +15,7 @@ export interface PostType {
   };
   slug: string;
   estimated_time: number;
+  article_level: string;
 }
 
 export function PostList() {
@@ -47,6 +48,12 @@ export function PostList() {
     }, {});
   }
 
+  const levelColors: Record<string, string> = {
+    Iniciante: "bg-[#B4CB3F]",
+    Intermediário: "bg-[#408EEB]",
+    Avançado: "bg-[#7B66D4]",
+  };
+
   const postsByCategory = groupPostsByCategory(posts);
 
   return (
@@ -65,7 +72,7 @@ export function PostList() {
             {posts.map((post) => (
               <li
                 key={post.id}
-                className="dark:bg-[#1E293B] bg-[#93C5FD] p-6 rounded-lg dark:hover:bg-[#334155] hover:bg-[#71b4ff] transition w-[20rem] md:w-full h-full flex flex-col"
+                className="dark:bg-[#1E293B] bg-[#93C5FD] p-4 rounded-lg dark:hover:bg-[#334155] hover:bg-[#71b4ff] transition w-[20rem] md:w-full h-full flex flex-col"
               >
                 <div className="flex flex-col gap-4 flex-grow">
                   <Link to={`/posts/${post.slug}`} className="no-underline">
@@ -86,7 +93,7 @@ export function PostList() {
                   </p>
                 </div>
 
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between gap-4">
                   <Link
                     to={`/posts/${post.slug}`}
                     className="flex items-center gap-2 font-bold mt-auto min-h-14 text-sm dark:text-white text-black dark:hover:text-blue-400 hover:underline"
@@ -95,11 +102,22 @@ export function PostList() {
                     <ArrowRight size={16} />
                   </Link>
 
-                  <div className="flex items-center gap-2">
-                    <Clock size={20} weight="bold" color="#8ec5ff" />
-                    <p className="text-sm font-semibold text-blue-400">
-                      {post.estimated_time}min
-                    </p>
+                  <div className="flex items-center gap-2 lg:gap-4">
+                    <span
+                      className={`w-[6rem] h-[1.5rem] lg:w-[6.5rem] lg:h-[1.625rem] rounded-full text-xs text-black font-semibold flex items-center justify-center ${
+                        levelColors[post.article_level] ||
+                        "bg-gray-200 text-gray-700"
+                      }`}
+                    >
+                      <p>{post.article_level}</p>
+                    </span>
+
+                    <div className="flex items-center gap-2">
+                      <Clock size={20} weight="bold" color="#8ec5ff" />
+                      <p className="text-sm font-semibold text-blue-400">
+                        {post.estimated_time}min
+                      </p>
+                    </div>
                   </div>
                 </div>
               </li>