chore(Frontend): 💄 Add badge

Add badge to problems page

frontend/src/components/badge.rs

@@ -1,4 +1,17 @@
 use leptos::*;
+use tailwind_fuse::*;
 
 #[component]
-pub fn Badge() -> impl IntoView {}
+pub fn Badge(difficulty: u32) -> impl IntoView {
+    let style = match difficulty {
+        0..500 => "border-green-500",
+        500..1000 => "border-green-700",
+        1000..1500 => "border-yellow-400",
+        1500..2000 => "border-yellow-600",
+        2000..2500 => "border-red-500",
+        2500..3000 => "border-red-700",
+        _ => "border-primary",
+    };
+
+    view! { <p class=tw_join!("p-1 m-1 w-min h-min border-2 rounded m-auto",style)>{difficulty}</p> }
+}

frontend/src/components/paginate_table.rs

@@ -67,7 +67,9 @@ fn Row<const N: usize>(
     cols: [View; N],
     href: impl ToHref + 'static,
 ) -> impl IntoView {
-    let cols = cols.map(|v| view! { <td>{v}</td> }).collect_view();
+    let cols = cols
+        .map(|v| view! { <td class="my-auto">{v}</td> })
+        .collect_view();
     view! {
         <A class="grid col-span-full grid-cols-subgrid even:bg-black-900 text-sm p-4" href>
             <tr class="grid col-span-full grid-cols-subgrid">{cols}</tr>

frontend/src/pages/problems.rs

@@ -120,7 +120,7 @@ fn Table(
                 [
                     format!("{:04}", info.id).into_view(),
                     info.title.into_view(),
-                    info.difficulty.into_view(),
+                    view! { <Badge difficulty=info.difficulty /> }.into_view(),
                     info.submit_count.into_view(),
                     format!("{:.2}", info.ac_rate * 100.0).into_view(),
                 ],