Create a widgets page

src/components/widgets/Note.astro

@@ -1,11 +1,24 @@
 ---
 import { Icon } from 'astro-icon/components';
+
+export interface Props {
+  note?: string;
+  icon?: string;
+  subtitle?: string;
+}
+
+const {
+  note = await Astro.slots.render('note'),
+  icon = await Astro.slots.render('icon'),
+  subtitle = await Astro.slots.render('subtitle'),
+} = Astro.props;
 ---
 
 <section class="bg-blue-50 dark:bg-slate-800 not-prose">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
     <span class="font-bold">
-      <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span
-    > Simplicity, Best Practices and High Performance
+      <Icon name={icon || 'tabler:info-square'} class="w-5 h-5 inline-block align-text-bottom" /> {subtitle}:</span
+    >
+    {note}
   </div>
 </section>

src/components/widgets/WidgetTitle.astro

@@ -0,0 +1,9 @@
+---
+// WidgetTitle.astro
+export interface Props {
+  title?: string;
+}
+const { title = await Astro.slots.render('title') } = Astro.props;
+---
+
+<p class="font-bold tracking-tighter font-heading text-heading text-4xl pb-3">{title}</p>

src/navigation.ts

@@ -112,7 +112,7 @@ export const headerData = {
     },
     {
       text: 'Widgets',
-      href: '#',
+      href: getPermalink('/widgets'),
     },
   ],
   actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }],

src/pages/index.astro

@@ -52,7 +52,7 @@ const metadata = {
 
   <!-- Note Widget ******************* -->
 
-  <Note />
+  <Note subtitle="Philosophy" note="Simplicity, Best Practices and High Performance" />
 
   <!-- Features Widget *************** -->