BbAlert

<template>
	<form class="flex max-w-md flex-col gap-3" @submit.prevent="submit">
		<BbAlert
			v-if="submitted && missing.length > 0"
			hide-close
			icon="lucide:circle-x"
			title="The invitation was not sent"
			variant="destructive"
		>
			<ul class="list-inside list-disc">
				<li v-for="problem in missing" :key="problem">{{ problem }}</li>
			</ul>
		</BbAlert>

		<BbTextInput
			id="invite-name"
			v-model="name"
			label="Full name"
			name="name"
		/>
		<BbTextInput
			id="invite-email"
			v-model="email"
			label="Work email"
			name="email"
			type="email"
		/>

		<BbButton class="self-start" type="submit" variant="primary">
			Send invitation
		</BbButton>
	</form>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { BbAlert, BbButton, BbTextInput } from 'bitboss-ui';

const name = ref('');
const email = ref('');
const submitted = ref(false);

const missing = computed(() => [
	...(name.value.trim() ? [] : ['Enter the full name of the person to invite']),
	...(email.value.includes('@') ? [] : ['Enter a valid work email address']),
]);

const submit = () => {
	submitted.value = true;
};
</script>

<template>
	<div class="flex max-w-md flex-col gap-3">
		<BbAlert
			hide-close
			icon="lucide:info"
			text="The catalogue shows net prices; VAT is added at checkout."
			title="Prices exclude VAT"
		/>

		<BbAlert
			hide-close
			icon="lucide:rocket"
			text="Warehouse levels now refresh every 15 minutes."
			title="Stock sync is faster"
			variant="primary"
		/>

		<BbAlert
			hide-close
			icon="lucide:triangle-alert"
			:text="`${keyboard.name} is down to ${keyboard.stock} units.`"
			title="Low stock"
			variant="warning"
		/>

		<BbAlert
			hide-close
			icon="lucide:circle-x"
			text="Row 42 has no SKU, so nothing was imported."
			title="Import failed"
			variant="destructive"
		/>
	</div>
</template>

<script setup lang="ts">
import { BbAlert } from 'bitboss-ui';
import { productById } from '~/demo-data';

const keyboard = productById[113]!;
</script>

<template>
	<div class="flex max-w-md flex-col gap-3">
		<!--
			No v-if here: the component owns its own visibility and animates
			itself out when the model turns false.
		-->
		<BbAlert
			v-model="reminderVisible"
			close-label="Dismiss the email verification reminder"
			icon="lucide:mail"
			:text="`We sent a link to ${owner.email}. It expires in 24 hours.`"
			title="Verify your email"
			variant="primary"
		/>

		<BbButton
			v-if="!reminderVisible"
			class="self-start"
			prepend:icon="lucide:undo-2"
			variant="ghost"
			@click="reminderVisible = true"
		>
			Bring the reminder back
		</BbButton>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BbAlert, BbButton } from 'bitboss-ui';
import { userById } from '~/demo-data';

const owner = userById[1]!;

// Bound, so the page can read the state back and restore it. Left unbound the
// close button would still work — it would just be a one-way trip.
const reminderVisible = ref(true);
</script>

<template>
	<div class="max-w-md">
		<BbAlert
			hide-close
			icon="lucide:sparkles"
			text="Vantera Free keeps three active projects."
			variant="primary"
		>
			<template #title> You are on the <strong>Free</strong> plan </template>

			<!--
				The slot receives the `text` prop, so the string stays where it is
				and the slot only decorates it.
			-->
			<template #text="{ text }">
				{{ text }}
				<a class="font-medium underline" href="#pricing">Compare plans</a>
			</template>
		</BbAlert>
	</div>
</template>

<script setup lang="ts">
import { BbAlert } from 'bitboss-ui';
</script>