Add a site-wide dark mode
This commit is contained in:
NeilClack
@@ -16,8 +16,12 @@
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Dashboard</h1>
|
||||
<p class="mt-1 text-sm text-slate-500 sm:text-base">Manage your account and license keys.</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100">
|
||||
Dashboard
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-slate-500 sm:text-base dark:text-slate-400">
|
||||
Manage your account and license keys.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
@@ -31,11 +35,13 @@
|
||||
|
||||
<DashboardSection title="License Keys" description="Your active and inactive license keys.">
|
||||
{#if data.licenseKeys.length > 0}
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<!-- Desktop / tablet: table -->
|
||||
<table class="hidden w-full text-left text-sm sm:table">
|
||||
<thead
|
||||
class="border-b border-slate-200 bg-slate-50 text-xs tracking-wide text-slate-500 uppercase"
|
||||
class="border-b border-slate-200 bg-slate-50 text-xs tracking-wide text-slate-500 uppercase dark:border-slate-800 dark:bg-slate-950 dark:text-slate-400"
|
||||
>
|
||||
<tr>
|
||||
<th class="px-6 py-3 font-semibold">Key</th>
|
||||
@@ -46,19 +52,27 @@
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
{#each data.licenseKeys as key (key.key)}
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="px-6 py-4 font-mono text-slate-800">{key.key}</td>
|
||||
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800">
|
||||
<td class="px-6 py-4 font-mono text-slate-800 dark:text-slate-200">{key.key}</td>
|
||||
<td class="px-6 py-4">
|
||||
{#if key.active}
|
||||
<span class="text-lg text-green-600" title="Active" aria-label="Active">☑</span>
|
||||
<span
|
||||
class="text-lg text-green-600 dark:text-green-400"
|
||||
title="Active"
|
||||
aria-label="Active">☑</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-lg text-slate-300" title="Inactive" aria-label="Inactive"
|
||||
>☐</span
|
||||
<span
|
||||
class="text-lg text-slate-300 dark:text-slate-600"
|
||||
title="Inactive"
|
||||
aria-label="Inactive">☐</span
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-slate-600">{formatDate(key.createdAt)}</td>
|
||||
<td class="px-6 py-4 text-slate-600">
|
||||
<td class="px-6 py-4 text-slate-600 dark:text-slate-400"
|
||||
>{formatDate(key.createdAt)}</td
|
||||
>
|
||||
<td class="px-6 py-4 text-slate-600 dark:text-slate-400">
|
||||
{key.lastValidatedAt ? formatDate(key.lastValidatedAt) : 'Never'}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -71,19 +85,29 @@
|
||||
{#each data.licenseKeys as key (key.key)}
|
||||
<li class="flex flex-col gap-2 px-4 py-4">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span class="min-w-0 font-mono text-sm break-all text-slate-800">{key.key}</span>
|
||||
<span class="min-w-0 font-mono text-sm break-all text-slate-800 dark:text-slate-200"
|
||||
>{key.key}</span
|
||||
>
|
||||
<span class="shrink-0">
|
||||
{#if key.active}
|
||||
<span class="text-lg text-green-600" title="Active" aria-label="Active">☑</span>
|
||||
<span
|
||||
class="text-lg text-green-600 dark:text-green-400"
|
||||
title="Active"
|
||||
aria-label="Active">☑</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-lg text-slate-300" title="Inactive" aria-label="Inactive"
|
||||
>☐</span
|
||||
<span
|
||||
class="text-lg text-slate-300 dark:text-slate-600"
|
||||
title="Inactive"
|
||||
aria-label="Inactive">☐</span
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-500">Created {formatDate(key.createdAt)}</span>
|
||||
<span class="text-xs text-slate-500">
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400"
|
||||
>Created {formatDate(key.createdAt)}</span
|
||||
>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400">
|
||||
Last verified {key.lastValidatedAt ? formatDate(key.lastValidatedAt) : 'Never'}
|
||||
</span>
|
||||
</li>
|
||||
@@ -91,8 +115,12 @@
|
||||
</ul>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center">
|
||||
<p class="text-sm text-slate-600">You don't have any license keys yet.</p>
|
||||
<div
|
||||
class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-900"
|
||||
>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">
|
||||
You don't have any license keys yet.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</DashboardSection>
|
||||
|
||||
@@ -62,26 +62,40 @@
|
||||
</script>
|
||||
|
||||
<div class="mx-auto w-full max-w-3xl">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Profile</h1>
|
||||
<p class="mt-1 text-sm text-slate-500 sm:text-base">Manage your account details and addresses.</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100">
|
||||
Profile
|
||||
</h1>
|
||||
<p class="mt-1 text-sm text-slate-500 sm:text-base dark:text-slate-400">
|
||||
Manage your account details and addresses.
|
||||
</p>
|
||||
|
||||
<!-- Email (read-only) -->
|
||||
<div class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
|
||||
<p class="text-xs tracking-wide text-slate-500 uppercase">Email</p>
|
||||
<p class="mt-1 text-base break-words text-slate-900">{data.user.email}</p>
|
||||
<div
|
||||
class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6 dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<p class="text-xs tracking-wide text-slate-500 uppercase dark:text-slate-400">Email</p>
|
||||
<p class="mt-1 text-base break-words text-slate-900 dark:text-slate-100">{data.user.email}</p>
|
||||
</div>
|
||||
|
||||
<!-- Profile Form -->
|
||||
<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
|
||||
<h2 class="text-lg font-semibold text-slate-900">Profile</h2>
|
||||
<section
|
||||
class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6 dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Profile</h2>
|
||||
|
||||
{#if form?.action === 'updateProfile' && form?.success}
|
||||
<div class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-950/50 dark:text-green-300"
|
||||
role="status"
|
||||
>
|
||||
Profile updated successfully.
|
||||
</div>
|
||||
{/if}
|
||||
{#if form?.action === 'updateProfile' && form?.error}
|
||||
<div class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
|
||||
role="alert"
|
||||
>
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -89,30 +103,36 @@
|
||||
<form method="POST" action="?/updateProfile" class="mt-5 flex flex-col gap-4">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="firstName" class="text-sm font-medium text-slate-700"> First Name </label>
|
||||
<label for="firstName" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
value={data.user.profile?.firstName ?? ''}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="lastName" class="text-sm font-medium text-slate-700"> Last Name </label>
|
||||
<label for="lastName" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
value={data.user.profile?.lastName ?? ''}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="phoneNumber" class="text-sm font-medium text-slate-700"> Phone Number </label>
|
||||
<label for="phoneNumber" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phoneNumber"
|
||||
@@ -120,7 +140,7 @@
|
||||
bind:value={phoneNumber}
|
||||
oninput={handlePhoneInput}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -135,38 +155,49 @@
|
||||
</section>
|
||||
|
||||
<!-- Addresses -->
|
||||
<section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
|
||||
<section
|
||||
class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6 dark:border-slate-800 dark:bg-slate-900"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<h2 class="text-lg font-semibold text-slate-900">Addresses</h2>
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Addresses</h2>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (showAddressForm ? closeAddressForm() : openAddAddress())}
|
||||
class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
|
||||
class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
{showAddressForm ? 'Cancel' : 'Add Address'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if form?.action === 'addAddress' && form?.success}
|
||||
<div class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-950/50 dark:text-green-300"
|
||||
role="status"
|
||||
>
|
||||
Address added successfully.
|
||||
</div>
|
||||
{/if}
|
||||
{#if form?.action === 'updateAddress' && form?.success}
|
||||
<div class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-950/50 dark:text-green-300"
|
||||
role="status"
|
||||
>
|
||||
Address updated successfully.
|
||||
</div>
|
||||
{/if}
|
||||
{#if form?.action === 'deleteAddress' && form?.success}
|
||||
<div class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800 dark:bg-green-950/50 dark:text-green-300"
|
||||
role="status"
|
||||
>
|
||||
Address deleted successfully.
|
||||
</div>
|
||||
{/if}
|
||||
{#if (form?.action === 'addAddress' ||
|
||||
form?.action === 'updateAddress' ||
|
||||
form?.action === 'deleteAddress') &&
|
||||
form?.error}
|
||||
<div class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
|
||||
{#if (form?.action === 'addAddress' || form?.action === 'updateAddress' || form?.action === 'deleteAddress') && form?.error}
|
||||
<div
|
||||
class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950/50 dark:text-red-300"
|
||||
role="alert"
|
||||
>
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -181,61 +212,71 @@
|
||||
<input type="hidden" name="id" value={editingAddressId} />
|
||||
{/if}
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="street" class="text-sm font-medium text-slate-700">Street</label>
|
||||
<label for="street" class="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>Street</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="street"
|
||||
name="street"
|
||||
bind:value={addrStreet}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="city" class="text-sm font-medium text-slate-700">City</label>
|
||||
<label for="city" class="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>City</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
bind:value={addrCity}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="state" class="text-sm font-medium text-slate-700">State</label>
|
||||
<label for="state" class="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>State</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="state"
|
||||
name="state"
|
||||
bind:value={addrState}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="postalCode" class="text-sm font-medium text-slate-700"> Postal Code </label>
|
||||
<label for="postalCode" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Postal Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="postalCode"
|
||||
name="postalCode"
|
||||
bind:value={addrPostal}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="country" class="text-sm font-medium text-slate-700">Country</label>
|
||||
<label for="country" class="text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>Country</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="country"
|
||||
name="country"
|
||||
bind:value={addrCountry}
|
||||
required
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -253,18 +294,20 @@
|
||||
{#if data.user.profile?.addresses && data.user.profile.addresses.length > 0}
|
||||
<div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{#each data.user.profile.addresses as address (address.id)}
|
||||
<div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
|
||||
<p class="text-sm font-medium text-slate-900">{address.street}</p>
|
||||
<p class="mt-1 text-sm text-slate-600">
|
||||
<div
|
||||
class="rounded-lg border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950"
|
||||
>
|
||||
<p class="text-sm font-medium text-slate-900 dark:text-slate-100">{address.street}</p>
|
||||
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
|
||||
{address.city}, {address.state}
|
||||
{address.postalCode}
|
||||
</p>
|
||||
<p class="text-sm text-slate-600">{address.country}</p>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">{address.country}</p>
|
||||
<div class="mt-3 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => openEditAddress(address)}
|
||||
class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
|
||||
class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
@@ -278,7 +321,7 @@
|
||||
<input type="hidden" name="id" value={address.id} />
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50"
|
||||
class="rounded-md border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 dark:border-red-800 dark:bg-slate-900 dark:text-red-400 dark:hover:bg-red-950/50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@@ -288,7 +331,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
{:else if !showAddressForm}
|
||||
<p class="mt-5 text-sm text-slate-500">No addresses on file.</p>
|
||||
<p class="mt-5 text-sm text-slate-500 dark:text-slate-400">No addresses on file.</p>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
<Window>
|
||||
<form method="POST" class="flex flex-col items-center gap-5">
|
||||
<h1 class="text-center text-2xl font-bold text-slate-900">
|
||||
<h1 class="text-center text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
Please finish setting up your profile
|
||||
</h1>
|
||||
|
||||
@@ -55,44 +55,50 @@
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class="flex h-24 w-24 items-center justify-center rounded-full bg-indigo-100 text-3xl font-semibold text-indigo-700 sm:h-28 sm:w-28"
|
||||
class="flex h-24 w-24 items-center justify-center rounded-full bg-indigo-100 text-3xl font-semibold text-indigo-700 sm:h-28 sm:w-28 dark:bg-indigo-900 dark:text-indigo-300"
|
||||
>
|
||||
{data.user?.name?.charAt(0)?.toUpperCase() ?? '?'}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="text-base text-slate-900">{data.user?.email}</p>
|
||||
<p class="text-base text-slate-900 dark:text-slate-100">{data.user?.email}</p>
|
||||
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<input type="hidden" name="userId" value={data.user?.id} />
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="firstName" class="text-sm font-medium text-slate-700"> First Name </label>
|
||||
<label for="firstName" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
id="firstName"
|
||||
type="text"
|
||||
name="firstName"
|
||||
placeholder="First Name"
|
||||
bind:value={firstName}
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="lastName" class="text-sm font-medium text-slate-700"> Last Name </label>
|
||||
<label for="lastName" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
id="lastName"
|
||||
type="text"
|
||||
name="lastName"
|
||||
placeholder="Last Name"
|
||||
bind:value={lastName}
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<label for="phoneNumber" class="text-sm font-medium text-slate-700"> Phone Number </label>
|
||||
<label for="phoneNumber" class="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
id="phoneNumber"
|
||||
type="tel"
|
||||
@@ -100,7 +106,7 @@
|
||||
placeholder="(555) 555-5555"
|
||||
bind:value={phoneNumber}
|
||||
oninput={handlePhoneInput}
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
||||
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 dark:border-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user