54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<div
|
|
v-if="!isSidebarCollapsed"
|
|
class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
|
|
>
|
|
<div class="flex flex-col gap-1">
|
|
<slot>
|
|
<div class="inline-flex gap-2 items-center font-medium">
|
|
<FeatherIcon class="h-4" name="info" />
|
|
Loved the demo?
|
|
</div>
|
|
<div class="text-ink-gray-7 text-p-sm">
|
|
{{ `Try ${appName} for free with a 14-day trial.` }}
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
<Button label="Sign up now" theme="blue" @click="signupNow">
|
|
<template #prefix>
|
|
<LightningIcon class="size-4" />
|
|
</template>
|
|
</Button>
|
|
</div>
|
|
<Button v-else @click="signupNow">
|
|
<LightningIcon class="h-4 my-0.5 shrink-0" />
|
|
</Button>
|
|
</template>
|
|
<script setup>
|
|
import LightningIcon from '../Icons/LightningIcon.vue'
|
|
|
|
const props = defineProps({
|
|
isSidebarCollapsed: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
appName: {
|
|
type: String,
|
|
default: 'Frappe CRM',
|
|
},
|
|
redirectURL: {
|
|
type: String,
|
|
default: 'https://frappecloud.com/crm/signup',
|
|
},
|
|
afterSignup: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
})
|
|
|
|
function signupNow() {
|
|
window.open(props.redirectURL, '_blank')
|
|
props.afterSignup?.()
|
|
}
|
|
</script>
|