From 8f818183a076bc56f79ec7fcaf632383d5bd880d Mon Sep 17 00:00:00 2001
From: Sayo <75541866+SaySayo@users.noreply.github.com>
Date: Wed, 2 Aug 2023 08:41:28 +0100
Subject: [PATCH] Skill Tag Component [Learn Area Redesign] (#1427)

---
 .../components/learn_components.eml           | 15 +++++++++++++++
 src/ocamlorg_frontend/dune                    |  8 ++++++++
 src/ocamlorg_frontend/pages/books.eml         | 19 ++++++-------------
 3 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/ocamlorg_frontend/components/learn_components.eml

diff --git a/src/ocamlorg_frontend/components/learn_components.eml b/src/ocamlorg_frontend/components/learn_components.eml
new file mode 100644
index 0000000000..2377dc1d85
--- /dev/null
+++ b/src/ocamlorg_frontend/components/learn_components.eml
@@ -0,0 +1,15 @@
+let skill_tag 
+difficulty
+class_
+ =
+  match difficulty with 
+  | Some "beginner" ->
+    <div class="<%s class_ %> px-2 py-1 inline-block bg-teal-700 rounded-3xl border-2 border-teal-700 font-normal text-center text-white"> Beginner  </div>
+  | Some "intermediate" -> 
+    <div class="<%s class_ %> px-2 py-1 inline-block bg-[#040113] rounded-3xl border-2 border-[#040113] font-normal text-center text-white"> Intermediate </div>
+  | Some "advanced" -> 
+    <div class="<%s class_ %> px-2 py-1 inline-block bg-primary-700 rounded-3xl border-2 border-primary-700 font-normal text-center text-white"> Advanced </div>
+  | None -> 
+    <></> 
+  | Some _ -> 
+    <></>
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/dune b/src/ocamlorg_frontend/dune
index a7b761ce19..ae3588b5c0 100644
--- a/src/ocamlorg_frontend/dune
+++ b/src/ocamlorg_frontend/dune
@@ -263,4 +263,12 @@
     %{bin:dream_eml}
     %{dep:learn_sidebar.eml}
     --workspace
+    %{workspace_root})))
+ (rule
+  (target learn_components.ml)
+  (action
+   (run
+    %{bin:dream_eml}
+    %{dep:learn_components.eml}
+    --workspace
     %{workspace_root}))))
diff --git a/src/ocamlorg_frontend/pages/books.eml b/src/ocamlorg_frontend/pages/books.eml
index 856372f09f..d8b17c2c77 100644
--- a/src/ocamlorg_frontend/pages/books.eml
+++ b/src/ocamlorg_frontend/pages/books.eml
@@ -3,21 +3,14 @@ let render_books books =
         <% books |> List.iter (fun (item : Data.Book.t) -> %>
         <div
             class="flex space-y-10 lg:space-y-0 lg:space-x-16 pb-10 lg:pb-20 border-b border-gray-200 mt-10 lg:mt-20 flex-col lg:flex-row">
-            <img src="<%s Ocamlorg_static.Media.url item.cover %>"
-                class="m-auto h-48 w-32 lg:w-64 lg:h-96 md:w-64 md:h-96 rounded-2xl border border-gray-200"
-                alt="">
+            <div class="flex flex-col gap-y-4">
+                <img src="<%s Ocamlorg_static.Media.url item.cover %>"
+                    class="m-4 h-48 w-32 lg:w-64 lg:h-96 md:w-64 md:h-96 rounded-2xl border border-gray-200"
+                    alt="">
+                <%s! Learn_components.skill_tag item.difficulty "mx-4 w-32 lg:w-64 md:w-64" %>
+            </div>
             <div class="flex-col flex-1">
                 <h4 class="font-bold mb-6"><%s item.title %></h4>
-                <% (match item.rating with | None -> () | Some rating ->  %>
-                <div class="flex space-x-1 mb-6 text-primary-600">
-                    <% List.init rating (fun _ -> ()) |> List.iter (fun () -> %>
-                    <%s! Icons.star_2 "h-6 w-6 text-yellow-300" %>
-                    <% ); %>
-                    <% List.init (5 - rating) (fun _ -> ()) |> List.iter (fun () -> %>
-                    <%s! Icons.star_2 "h-6 w-6 text-gray-300" %>
-                    <% ); %>
-                </div>
-                <% ); %>
                 <div class="font-semibold text-base mb-6 uppercase"><%s item.authors |> String.concat ", " %></div>
                 <div class="prose prose-orange mb-6"><%s! item.body_html %></div>
                 <% item.links |> List.iter (fun (link : Data.Book.link) -> %>