78 lines
3.0 KiB
Plaintext
78 lines
3.0 KiB
Plaintext
---
|
|
// Import necessary components from individual files
|
|
import EmailInput from './input/EmailInput.astro';
|
|
import TextAreaInput from './input/TextAreaInput.astro';
|
|
import AuthBtn from '@components/ui/buttons/AuthBtn.astro';
|
|
|
|
// Config object for customization of the component
|
|
const config = {
|
|
id: 'hs-toggle-between-modals-recover-modal', // Modal identifier
|
|
title: 'Prepare email context', // Main heading
|
|
subTitle: 'Need a walkthrough instead?', // Sub-heading text
|
|
contactBtn: 'Open contact request', // Text for contact button
|
|
contactBtnDataHS: '#hs-public-contact-modal', // Target link for contact button
|
|
};
|
|
---
|
|
|
|
{/* Root element of the modal with id and styling */}
|
|
<div
|
|
id={config.id}
|
|
class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
|
|
>
|
|
{/* Modal content container */}
|
|
<div
|
|
class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 m-3 mt-0 opacity-0 transition-all ease-out sm:mx-auto sm:w-full sm:max-w-lg"
|
|
>
|
|
<div class="mx-auto w-full max-w-md p-6">
|
|
{/* Actual box for the modal elements */}
|
|
<div
|
|
class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-xs dark:border-neutral-700 dark:bg-neutral-800"
|
|
>
|
|
<div class="p-4 sm:p-7">
|
|
<div class="text-center">
|
|
<div
|
|
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
|
role="heading"
|
|
aria-level="1"
|
|
aria-label={config.title}
|
|
>
|
|
{config.title}
|
|
</div>
|
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
|
{config.subTitle}
|
|
{/* Button that, when clicked, opens the contact modal */}
|
|
<button
|
|
class="rounded-lg p-1 font-medium text-orange-400 decoration-2 ring-zinc-500 outline-hidden hover:underline focus-visible:ring-3 dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-hidden"
|
|
data-hs-overlay={config.contactBtnDataHS}
|
|
>
|
|
{config.contactBtn}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
{/* The form for public contact context */}
|
|
<form
|
|
action="mailto:hello@tenantial.com"
|
|
method="post"
|
|
enctype="text/plain"
|
|
>
|
|
<div class="grid gap-y-4">
|
|
{/* Email input field imported from EmailInput component */}
|
|
<EmailInput id="email-context" errorId="email-context-error" />
|
|
<TextAreaInput
|
|
id="email-notes"
|
|
name="email-notes"
|
|
label="Notes for Tenantial"
|
|
/>
|
|
{/* Contact button imported from AuthBtn component */}
|
|
<AuthBtn title="Prepare email context" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|