Add NoteBox component to display styled notes and remove notes section on functions page

Author: Lettify

web/src/components/NoteBox.astro

@@ -0,0 +1,21 @@
+---
+// Componente reutilizável para exibir uma caixa de nota estilizada.
+// Ele usa um slot padrão para receber o conteúdo da nota.
+---
+<div class="custom-note-box">
+    <slot /> {/* O conteúdo da nota será inserido aqui */}
+</div>
+
+<style>
+.custom-note-box {
+    background-color: var(--sl-color-blue-low); /* Tema Claro */
+    border-left: 4px solid var(--sl-color-blue);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    margin-bottom: 1rem; /* Espaço abaixo se houver múltiplas notas */
+    color: var(--sl-color-text);
+}
+html[data-theme="dark"] .custom-note-box {
+    background-color: var(--sl-color-gray-5); /* Tema Escuro */
+}
+</style>

web/src/pages/[func].astro

@@ -7,6 +7,7 @@ import fs from "fs";
 import path from "path";
 import { Code } from '@astrojs/starlight/components';
 
+import NoteBox from '@src/components/NoteBox.astro';
 import '@src/styles/function-page.css';
 
 export async function getStaticPaths() {
@@ -62,15 +63,13 @@ if (Array.isArray(funcNotes) && funcNotes.length > 0) {
         {description && <Fragment set:html={marked(description)} />}
 
         <!-- Notes -->
-        {notesContent.length > 0 && (
-            <div class="notes-section">
-                {notesContent.map((note) => (
-                    <div class="custom-note-box">
-                        <Fragment set:html={marked(note)} />
-                    </div>
-                ))}
-            </div>
-        )}
+        <div class="notes-section">
+            {notesContent.map((note) => (
+                <NoteBox>
+                    <Fragment set:html={marked(note)} />
+                </NoteBox>
+            ))}
+        </div>
 
         <!-- Examples -->
         {processedExamples.length > 0 && (

web/src/styles/function-page.css

@@ -15,19 +15,6 @@
     padding-bottom: 0.25rem;
 }
 
-.custom-note-box {
-    background-color: var(--sl-color-blue-low);
-    border-left: 4px solid var(--sl-color-blue);
-    border-radius: 8px;
-    padding: 1rem 1.25rem;
-    margin-bottom: 1rem;
-    color: var(--sl-color-text);
-}
-
-html[data-theme="dark"] .custom-note-box {
-    background-color: var(--sl-color-gray-5);
-}
-
 .function-example {
     margin-bottom: 1.5rem;
 }