change color

src/components/dashboard/PageHeader.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
 import { VNode } from 'vue';
-import VueHead from '@/components/VueHead';
 
 interface Breadcrumb {
   label: string;
@@ -16,7 +15,7 @@ interface Action {
 }
 
 interface Props {
-  title: string;
+  title: string | VNode;
   description?: string;
   breadcrumbs?: Breadcrumb[];
   actions?: Action[];
@@ -67,8 +66,8 @@ const getButtonClass = (variant?: string) => {
     <!-- Title & Actions -->
     <div class="flex items-start justify-between gap-4 flex-wrap">
       <div class="flex-1 min-w-0">
-        <h1 class="text-3xl font-bold text-gray-900 mb-1">{{ title }}</h1>
-        <vue-head :input="{ title, meta: [{ name: 'description', content: description || '' }] }" />
+        <h1 v-if="typeof props.title == 'string'" class="text-3xl font-bold text-gray-900 mb-1">{{ title }}</h1>
+        <component v-else :is="title" />
         <p v-if="description" class="text-gray-600">{{ description }}</p>
       </div>
 

src/components/icons/ArrowDownTray.vue

@@ -0,0 +1,17 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+        v-if="!filled">
+        <path stroke-linecap="round" stroke-linejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" v-else>
+        <path fill-rule="evenodd"
+            d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"
+            clip-rule="evenodd" />
+    </svg>
+</template>
+<script lang="ts" setup>
+defineProps<{
+    filled?: boolean
+}>()
+</script>