finish

superpage/src/components/Course/HeaderNav.astro

@@ -2,6 +2,8 @@
 import { Icon } from "astro-icon/components";
 import Container from "../Container.astro";
 import BuyDropdown from "./BuyDropdown.astro";
+import Trends from "~/components/Trends.astro";
+import Search from "~/components/Search.astro";
 
 import { getCollection } from "astro:content";
 const courses = await getCollection(
@@ -12,8 +14,8 @@ const courses = await getCollection(
 const { title } = Astro.props;
 ---
 
-<nav class="sticky top-0 z-10 bg-lime-400 py-3 drop-shadow shadow-sm">
-    <Container class="flex items-center relative">
+<nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
+    <Container class="flex items-center relative py-3">
         <button
             data-toggle="menu"
             data-target="#heromenu"
@@ -26,40 +28,37 @@ const { title } = Astro.props;
         </button>
 
         <BuyDropdown class="ml-auto" {...Astro.props} />
-    </Container>
+        <dialog
+            id="heromenu"
+            class="absolute top-full translate-y-1 w-full bg-transparent max-lg:px-2.5"
+            closedby="any"
+        >
+            <div class="text-black bg-lime-400 rounded-xl lg:rounded-2xl">
+                <div class="lg:w-1/2 mx-auto p-5 lg:py-24">
+                    <search class="space-y-5">
+                        <label for="search" class="block">
+                            <h1
+                                class="text-pretty font-semibold text-3xl lg:text-4xl"
+                            >
+                                Digite o curso para ver todos detalhes
+                            </h1>
+                        </label>
 
-    <dialog
-        id="heromenu"
-        class="absolute text-black bg-lime-400 w-full inset-0 rounded-b-2xl h-fit overflow-hidden"
-        closedby="any"
-    >
-        <Container class="relative overflow-auto h-100">
-            <div class="sticky top-0 py-2.5 backdrop-blur-sm">
-                <h6 class="font-medium text-xl lg:text-2xl">
-                    Conheça outros cursos da EDUSEG&reg;
-                </h6>
+                        <Search />
+                    </search>
+
+                    <div class="space-y-1.5">
+                        <h2 class="font-bold text-xl flex gap-1">
+                            <Icon name="arrow-trending-up" class="size-6" />
+                            <span>Cursos mais procurados</span>
+                        </h2>
+
+                        <Trends />
+                    </div>
+                </div>
             </div>
-
-            <ul
-                class="list-disc list-inside max-lg:[&_li]:truncate font-medium"
-            >
-                {
-                    courses.map(({ data: { title, slug } }) => {
-                        return (
-                            <li>
-                                <a
-                                    href={`/${slug}`}
-                                    class=" hover:underline p-0.5"
-                                >
-                                    {title}
-                                </a>
-                            </li>
-                        );
-                    })
-                }
-            </ul>
-        </Container>
-    </dialog>
+        </dialog>
+    </Container>
 </nav>
 
 <script>