component updates, a start

Author: connorabbas

package-lock.json

@@ -34,5 +34,8 @@
         "vite": "^6.2",
         "vue": "^3.5.0",
         "vue-router": "^4.4.0"
+    },
+    "dependencies": {
+        "lucide-vue-next": "^0.487.0"
     }
 }

package.json

@@ -1,10 +1,16 @@
 <template>
     <section>
         <div class="flex items-end justify-between flex-wrap gap-2 md:gap-4">
-            <div>
-                <h1 class="font-bold text-2xl md:text-3xl leading-tight">
+            <div class="flex flex-col gap-2">
+                <h1 class="font-bold text-2xl leading-tight">
                     <slot name="title" />
                 </h1>
+                <div
+                    v-if="$slots.subTitle"
+                    class="text-muted-color"
+                >
+                    <slot name="subTitle" />
+                </div>
             </div>
             <div>
                 <div v-if="$slots.end">

src/components/PageTitleSection.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { ref, watchEffect, inject } from 'vue';
+import { Sun, Moon, Monitor } from 'lucide-vue-next';
+
+const colorMode = inject('colorMode');
+const selectedColorMode = ref(colorMode.value);
+
+const options = [
+    { label: 'Light', value: 'light', icon: Sun },
+    { label: 'Dark', value: 'dark', icon: Moon },
+    { label: 'System', value: 'auto', icon: Monitor },
+];
+
+watchEffect(() => colorMode.value = selectedColorMode.value)
+</script>
+
+<template>
+    <SelectButton
+        v-model="selectedColorMode"
+        :options="options"
+        :allowEmpty="false"
+        optionLabel="label"
+        optionValue="value"
+    >
+        <template #option="{ option }">
+            <component :is="option.icon" /> {{ option.label }}
+        </template>
+    </SelectButton>
+</template>

src/components/SelectColorModeButton.vue

@@ -1,16 +1,36 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
 import Menu from 'primevue/menu';
+import type { ExtendedMenuItem } from '@/types';
 
-type MenuType = InstanceType<typeof Menu>
+const componentProps = defineProps<{
+    model: ExtendedMenuItem[]
+}>();
+
+type MenuType = InstanceType<typeof Menu>;
 const childRef = useTemplateRef<MenuType>('child-ref');
+
 defineExpose({
     childRef,
+    toggle: (event: Event) => childRef.value?.toggle(event)
 });
 </script>
 
 <template>
-    <Menu ref="child-ref">
+    <Menu
+        ref="child-ref"
+        :model="componentProps.model"
+    >
+        <template
+            v-for="(_, slotName) in $slots"
+            #[slotName]="slotProps"
+        >
+            <slot
+                v-if="slotName != 'item'"
+                :name="slotName"
+                v-bind="slotProps ?? {}"
+            />
+        </template>
         <template #item="{ item, props }">
             <RouterLink
                 v-if="item.route"
@@ -24,11 +44,16 @@ defineExpose({
                     class="p-menu-item-link"
                     @click="navigate"
                 >
-                    <span
+                    <i
                         v-if="item.icon"
                         :class="item.icon"
                         class="p-menu-item-icon"
                     />
+                    <component
+                        :is="item.lucideIcon"
+                        v-else-if="item.lucideIcon"
+                        class="p-menu-item-icon"
+                    />
                     <span class="p-menu-item-label">{{ item.label }}</span>
                 </a>
             </RouterLink>
@@ -38,11 +63,16 @@ defineExpose({
                 :target="item.target"
                 v-bind="props.action"
             >
-                <span
+                <i
                     v-if="item.icon"
                     :class="item.icon"
                     class="p-menu-item-icon"
                 />
+                <component
+                    :is="item.lucideIcon"
+                    v-else-if="item.lucideIcon"
+                    class="p-menu-item-icon"
+                />
                 <span class="p-menu-item-label">{{ item.label }}</span>
             </a>
         </template>