make sticky header an astro component

src/components/BlogStickyHeader.astro

@@ -0,0 +1,39 @@
+---
+import type { CollectionEntry } from 'astro:content'
+
+interface Props {
+  post: CollectionEntry<'blog'>
+}
+
+const { post } = Astro.props
+---
+
+<header
+  id="sticky-header"
+  class="inset-x-0 items-center backdrop-blur-sm bg-[hsla(0,0%,100%,.8)] dark:bg-white-reversed/50 flex h-[50px] justify-between px-8 fixed z-[90] top-[-50px] opacity-0 data-[hydrated=true]:opacity-100"
+>
+  <div class="flex flex-row justify-between w-full items-center">
+    <div class="overflow-hidden text-ellipsis whitespace-nowrap text-slate-800 dark:text-white leading-[1.3] mr-4 text-sm font-bold">
+      {post.data.title}
+    </div>
+  </div>
+
+  <div class="bg-[#e6e6e6] dark:bg-slate-600 bottom-[-2px] h-[2px] left-0 absolute w-full">
+    <div id="progress-indicator" class="bg-orange-400 h-full origin-[0%] scale-x-0" />
+  </div>
+</header>
+
+<script>
+  import { animate, scroll } from 'motion'
+
+  // Start showing and moving the sticky header until 100px offset.
+  scroll(animate('#sticky-header', { x: 0, y: 50, opacity: [0, 1] }), {
+    offset: ['start start', '100px'],
+  })
+
+  // Animate scroll indicator depending on the window scroll position
+  scroll(animate('#progress-indicator', { scaleX: ['0', '1'] }), {
+    offset: ['100px', 'end end'],
+  })
+</script>
+

src/pages/[slug]/index.astro

@@ -4,7 +4,7 @@ import { getEntry } from 'astro:content'
 import { getCollection } from 'astro:content'
 import BlogFooter from '@/components/BlogFooter.astro'
 import BlogRow from '@/components/BlogRow.astro'
-import BlogStickyHeader from '@/components/BlogStickyHeader'
+import BlogStickyHeader from '@/components/BlogStickyHeader.astro'
 import { components } from '@/components/mdx'
 import Container from '@/components/ui/Container'
 import Figure from '@/components/ui/Figure.astro'