44956176a1
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
iconName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
href: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
linkText: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
|
|
const openInNewTab = url => {
|
|
if (!url) return;
|
|
window.open(url, '_blank', 'noopener noreferrer');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col items-start w-full gap-4">
|
|
<!-- Header section with icon, title and action button -->
|
|
<div class="flex items-center justify-between w-full gap-4">
|
|
<!-- Icon and title container -->
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
|
|
>
|
|
<fluent-icon
|
|
size="14"
|
|
:icon="iconName"
|
|
type="outline"
|
|
class="flex-shrink-0 text-woot-500 dark:text-woot-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h1
|
|
class="text-2xl font-medium tracking-tight text-slate-900 dark:text-slate-25"
|
|
>
|
|
{{ title }}
|
|
</h1>
|
|
</div>
|
|
<!-- Slot for additional actions on larger screens -->
|
|
<div class="hidden gap-2 sm:flex">
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
<!-- Description and optional link -->
|
|
<div
|
|
class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 max-w-[721px] w-full"
|
|
>
|
|
<p class="mb-0 text-sm font-normal">
|
|
<slot name="description">{{ description }}</slot>
|
|
</p>
|
|
<!-- Conditional link -->
|
|
<a
|
|
v-if="href && linkText"
|
|
:href="href"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
|
|
>
|
|
{{ linkText }}
|
|
<fluent-icon
|
|
size="16"
|
|
icon="chevron-right"
|
|
type="outline"
|
|
class="flex-shrink-0 text-woot-500 dark:text-woot-500"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<!-- Mobile view for actions and link -->
|
|
<div class="flex items-start justify-start w-full gap-3 sm:hidden">
|
|
<slot name="actions" />
|
|
<woot-button
|
|
v-if="href && linkText"
|
|
color-scheme="secondary"
|
|
icon="arrow-outwards"
|
|
class="flex-row-reverse rounded-xl min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
|
|
@click="openInNewTab(href)"
|
|
>
|
|
{{ linkText }}
|
|
</woot-button>
|
|
</div>
|
|
</div>
|
|
</template>
|