From 97566289cd2c34f925b086e0d8a882f33ba25321 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 30 Nov 2024 17:17:16 +0100
Subject: [PATCH] refactor: :recycle: Use "header" HTML tag for note headers

---
 components/notes/note.vue         |  2 +-
 components/ui/card/CardHeader.vue | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/notes/note.vue b/components/notes/note.vue
index 178b35a..ea084dc 100644
--- a/components/notes/note.vue
+++ b/components/notes/note.vue
@@ -1,6 +1,6 @@
 <template>
     <Card as="article" class="rounded-none border-0 duration-200 shadow-none">
-        <CardHeader class="pb-4">
+        <CardHeader class="pb-4" as="header">
             <ReblogHeader v-if="note.reblog" :avatar="note.account.avatar"
                 :display-name="note.account.display_name" :url="reblogAccountUrl" />
             <Header :avatar="noteToUse.account.avatar" :corner-avatar="note.reblog ? note.account.avatar : undefined"
diff --git a/components/ui/card/CardHeader.vue b/components/ui/card/CardHeader.vue
index e186f39..8779237 100644
--- a/components/ui/card/CardHeader.vue
+++ b/components/ui/card/CardHeader.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { cn } from "@/lib/utils";
+import { Primitive, type PrimitiveProps } from "radix-vue";
 import type { HTMLAttributes } from "vue";
 
-const props = defineProps<{
-    class?: HTMLAttributes["class"];
-}>();
+const props = withDefaults(
+    defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        as: "div",
+    },
+);
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
-    <slot />
-  </div>
+    <Primitive :as="props.as" :as-child="props.asChild" :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+        <slot />
+    </Primitive>
 </template>