fix

superpage/src/components/Course/HeroNav.astro

@@ -5,13 +5,11 @@ import BuyDropdown from "./BuyDropdown.astro";
 import Trends from "~/components/Trends.astro";
 import Search from "~/components/Search.astro";
 
-import { getCollection } from "astro:content";
+import { getEntries } from "astro:content";
-const courses = await getCollection(
+const { title, ...data } = Astro.props;
-    "courses",
+const relatedCourses = data?.relatedCourses
-    ({ data }) => data.draft != true,
+    ? await getEntries(data.relatedCourses)
-);
+    : null;
-
-const { title } = Astro.props;
 ---
 
 <nav class="sticky bg-lime-400 top-0 z-10 drop-shadow shadow-sm">
@@ -49,11 +47,28 @@ const { title } = Astro.props;
 
                     <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>
+                                relatedCourses ? (
+                                    <>
+                                        <Icon
+                                            name="puzzle-piece"
+                                            class="size-6"
+                                        />
+                                        <span>Cursos relacionados</span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <Icon
+                                            name="arrow-trending-up"
+                                            class="size-6"
+                                        />
+                                        <span>Cursos mais procurados</span>
+                                    </>
+                                )
+                            }
                         </h2>
 
-                        <Trends />
+                        <Trends relatedCourses={relatedCourses} />
                     </div>
                 </div>
             </div>

superpage/src/components/Trends.astro

@@ -1,20 +1,16 @@
 ---
 import { getEntries } from "astro:content";
+import TRENDS from "~/data/trends.json";
 
-const trends = await getEntries([
+const trends = await getEntries(
-    { collection: "courses", id: "nr-18-plataforma-de-trabalho-aereo" },
+    TRENDS.map((x) => ({ collection: "courses", ...x })),
-    { collection: "courses", id: "nr-10-basico" },
+);
-    { collection: "courses", id: "cipa-grau-de-risco-3" },
+const { relatedCourses } = Astro.props;
-    {
-        collection: "courses",
-        id: "nr-35-seguranca-nos-trabalhos-em-altura-teorico",
-    },
-]);
 ---
 
 <ul class="list-disc list-inside font-medium">
     {
-        trends.map(({ data }) => (
+        (relatedCourses ?? trends).map(({ data }) => (
             <li>
                 <a href={data.slug}>{data.title}</a>
             </li>

superpage/src/content.config.ts

@@ -30,6 +30,7 @@ const courses = defineCollection({
         unit_price: z.number().default(0),
         reciclagem: z.boolean().default(false),
       }),
+      relatedCourses: z.array(reference("courses")).optional(),
       seo: z
         .object({
           tags: z.array(z.string()),

superpage/src/content/courses/cipa-grau-de-risco-1.mdx

@@ -4,6 +4,10 @@ title: NR-05 CIPA Grau de Risco 1
 excerpt: Capacita os integrantes da CIPA no grau de risco 1 para identificar riscos, propor medidas preventivas, promover a saúde e a segurança no ambiente de trabalho, e agir de forma eficiente em situações de emergência, conforme a NR-05.
 slug: cipa-grau-de-risco-1
 draft: false
+relatedCourses:
+  - cipa-grau-de-risco-2
+  - cipa-grau-de-risco-3
+  - cipa-grau-de-risco-4
 
 course:
   hours: 8

superpage/src/data/trends.json

@@ -0,0 +1,8 @@
+[
+  { "id": "nr-18-plataforma-de-trabalho-aereo" },
+  { "id": "nr-10-basico" },
+  { "id": "cipa-grau-de-risco-3" },
+  {
+    "id": "nr-35-seguranca-nos-trabalhos-em-altura-teorico"
+  }
+]

superpage/src/icons/puzzle-piece.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
+</svg>

superpage/src/pages/[slug].astro

@@ -1,10 +1,10 @@
 ---
-import { getCollection, render } from "astro:content";
+import { getCollection, getEntries, render } from "astro:content";
 import { Picture } from "astro:assets";
 import { Icon } from "astro-icon/components";
 import Layout from "~/layouts/Layout.astro";
 import Container from "~/components/Container.astro";
-import HeaderNav from "~/components/Course/HeaderNav.astro";
+import HeroNav from "~/components/Course/HeroNav.astro";
 import BuyButton from "./_components/BuyButton.astro";
 
 import placeholder from "~/assets/placeholder.png";
@@ -34,7 +34,7 @@ const { Content } = await render(course);
     </Fragment>
 
     <Fragment slot="nav">
-        <HeaderNav {...data} />
+        <HeroNav {...data} />
     </Fragment>
 
     <section class="space-y-6 lg:space-y-24">