glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-15 09:50:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "TrangaPage" composable

Browse Source
This commit is contained in:
glax
2025-10-14 21:08:30 +02:00
parent a622c7c45a
commit 39a1cb3857
13 changed files with 109 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
website/app/components/TrangaPage.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<UPageBody v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
<div class="flex flex-row gap-4 h-full relative">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated w-1/5 h-full pl-4 py-4">
<slot name="left" />
</div>
<div :class="['flex flex-col gap-2 w-full py-4 relative', $slots.left ? '' : 'pl-4']">
<div class="w-full flex flex-row justify-between mb-4">
<div class="flex flex-row gap-6">
<UButton variant="outline" color="neutral" :to="back?.href ?? '/'" :icon="back?.icon ?? 'i-lucide-home'">{{
back?.text ?? 'Home'
}}</UButton>
<slot name="title">
<p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
</slot>
</div>
<div class="flex flew-row gap-2">
<slot name="actions" />
</div>
</div>
<slot />
</div>
</div>
</UPageBody>
</template>
<script setup lang="ts">
import type { PageBodyProps } from '#ui/components/PageBody.vue';
export interface PageProps extends PageBodyProps {
title?: string;
back?: { href?: string; text?: string; icon?: string };
}
defineProps<PageProps>();
</script>