Modal

<Modal title="Terms of Service" {modalStatus} {closeModal}>
  Modal content
</Modal>

<script lang="ts">
	import { Modal, Button, uiHelpers } from 'svelte-5-ui-lib';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Default modal</Button>
</div>

<Modal title="Terms of Service" {modalStatus} {closeModal}>
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		With less than a month to go before the European Union enacts new consumer privacy laws for its
		citizens, companies around the world are updating their terms of service agreements to comply.
	</p>
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25
		and is meant to ensure a common set of data rights in the European Union. It requires
		organizations to notify users as soon as possible of high-risk data breaches that could
		personally affect them.
	</p>
</Modal>

<script lang="ts">
	import { Modal, Button, uiHelpers } from 'svelte-5-ui-lib';
	import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Pop-up modal</Button>
</div>

<Modal size="xs" {modalStatus} {closeModal}>
	<div class="text-center">
		<ExclamationCircleOutline class="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-200" />
		<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
			Are you sure you want to delete this product?
		</h3>
		<Button color="red" class="me-2">Yes, I'm sure</Button>
		<Button color="alternative">No, cancel</Button>
	</div>
</Modal>

<script>
	import { Button, Modal, Label, Input, Checkbox, uiHelpers } from 'svelte-5-ui-lib';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Pop-up modal</Button>
</div>

<Modal {modalStatus} {closeModal} size="xs" class="w-full">
	<form class="flex flex-col space-y-6" action="#">
		<h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
		<Label class="space-y-2">
			<span>Email</span>
			<Input type="email" name="email" placeholder="name@company.com" required />
		</Label>
		<Label class="space-y-2">
			<span>Your password</span>
			<Input type="password" name="password" placeholder="•••••" required />
		</Label>
		<div class="flex items-start">
			<Checkbox>Remember me</Checkbox>
			<a href="/" class="text-primary-700 dark:text-primary-500 ms-auto text-sm hover:underline"
				>Lost password?</a
			>
		</div>
		<Button type="submit" class="w-full1">Login to your account</Button>
		<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
			Not registered? <a href="/" class="text-primary-700 dark:text-primary-500 hover:underline"
				>Create account</a
			>
		</div>
	</form>
</Modal>

<script lang="ts">
	import { Modal, Button, uiHelpers } from 'svelte-5-ui-lib';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Pop-up modal</Button>
</div>

<Modal title="Terms of Service" {modalStatus} {closeModal} outsideClose={false}>
	{#snippet footer()}
		<Button onclick={() => alert('Handle "success"')}>I accept</Button>
		<Button color="alternative" onclick={closeModal}>Decline</Button>
	{/snippet}
	<!-- Modal body -->
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		With less than a month to go before the European Union enacts new consumer privacy laws for its
		citizens, companies around the world are updating their terms of service agreements to comply.
	</p>
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25
		and is meant to ensure a common set of data rights in the European Union. It requires
		organizations to notify users as soon as possible of high-risk data breaches that could
		personally affect them.
	</p>
</Modal>

<script>
	import { Button, Modal, uiHelpers } from 'svelte-5-ui-lib';
	import MetaMask from '../../../utils/icons/MetaMask.svelte';
	import CoinbaseWallet from '../../../utils/icons/CoinbaseWallet.svelte';
	import OperaWallet from '../../../utils/icons/OperaWallet.svelte';
	import Fortmatic from '../../../utils/icons/Fortmatic.svelte';
	import WalletConnect from '../../../utils/icons/WalletConnect.svelte';
	import { QuestionCircleOutline } from 'flowbite-svelte-icons';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Pop-up modal</Button>
</div>

<Modal title="Connect wallet" {modalStatus} {closeModal} size="xs">
	<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
		Connect with one of our available wallet providers or create a new one.
	</p>
	<ul class="my-4 space-y-3">
		<li>
			<a
				href="/"
				class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500"
			>
				<MetaMask />
				<span class="ms-3 flex-1 whitespace-nowrap">MetaMask</span>
				<span
					class="ms-3 inline-flex items-center justify-center rounded bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-400"
					>Popular</span
				>
			</a>
		</li>
		<li>
			<a
				href="/"
				class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500"
			>
				<CoinbaseWallet />
				<span class="ms-3 flex-1 whitespace-nowrap">Coinbase Wallet</span>
			</a>
		</li>
		<li>
			<a
				href="/"
				class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500"
			>
				<OperaWallet />
				<span class="ms-3 flex-1 whitespace-nowrap">Opera Wallet</span>
			</a>
		</li>
		<li>
			<a
				href="/"
				class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500"
			>
				<WalletConnect />
				<span class="ms-3 flex-1 whitespace-nowrap">WalletConnect</span>
			</a>
		</li>
		<li>
			<a
				href="/"
				class="group flex items-center rounded-lg bg-gray-50 p-3 text-base font-bold text-gray-900 hover:bg-gray-100 hover:shadow dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500"
			>
				<Fortmatic />
				<span class="ms-3 flex-1 whitespace-nowrap">Fortmatic</span>
			</a>
		</li>
	</ul>
	<div>
		<a
			href="/"
			class="inline-flex items-center text-xs font-normal text-gray-500 hover:underline dark:text-gray-400"
		>
			<QuestionCircleOutline class="me-2 h-3 w-3" /> Why do I need to connect with my wallet?
		</a>
	</div>
</Modal>

<script lang="ts">
	import { Modal, Button, uiHelpers } from 'svelte-5-ui-lib';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Default modal</Button>
</div>

<Modal {modalStatus} {closeModal}>
	{#snippet header()}
		<h2 class="weight-bold text-xl text-pink-700">Terms of Service</h2>
	{/snippet}
	<!-- Modal body -->
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		With less than a month to go before the European Union enacts new consumer privacy laws for its
		citizens, companies around the world are updating their terms of service agreements to comply.
	</p>
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25
		and is meant to ensure a common set of data rights in the European Union. It requires
		organizations to notify users as soon as possible of high-risk data breaches that could
		personally affect them.
	</p>
</Modal>

<script lang="ts">
	import { Modal, Button, uiHelpers } from 'svelte-5-ui-lib';
	const modalExample = uiHelpers();
	let modalStatus = $state(false);
	const closeModal = modalExample.close;
	$effect(() => {
		modalStatus = modalExample.isOpen;
	});
</script>

<div class="flex justify-center">
	<Button onclick={modalExample.toggle}>Default modal</Button>
</div>

<Modal title="Terms of Service" {modalStatus} {closeModal}>
	{#snippet footer()}
		<Button onclick={() => alert('Handle "success"')}>I accept</Button>
		<Button color="alternative" onclick={closeModal}>Decline</Button>
	{/snippet}
	<!-- Modal body -->
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		With less than a month to go before the European Union enacts new consumer privacy laws for its
		citizens, companies around the world are updating their terms of service agreements to comply.
	</p>
	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
		The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25
		and is meant to ensure a common set of data rights in the European Union. It requires
		organizations to notify users as soon as possible of high-risk data breaches that could
		personally affect them.
	</p>
</Modal>