Overlays
parent
b59bd7508e
commit
4257940f01
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,367 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<form
|
||||
class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl"
|
||||
>
|
||||
<div class="h-0 flex-1 overflow-y-auto">
|
||||
<div class="bg-indigo-700 px-4 py-6 sm:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-white"
|
||||
>
|
||||
New Project
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-indigo-700 text-indigo-200 hover:text-white focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-hidden"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-2.5"
|
||||
></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<p class="text-sm text-indigo-300">
|
||||
Get started by filling in the information
|
||||
below to create your new project.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col justify-between">
|
||||
<div class="divide-y divide-gray-200 px-4 sm:px-6">
|
||||
<div class="space-y-6 pt-6 pb-5">
|
||||
<div>
|
||||
<label
|
||||
for="project-name"
|
||||
class="block text-sm/6 font-medium text-gray-900"
|
||||
>Project name</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<input
|
||||
id="project-name"
|
||||
type="text"
|
||||
name="project-name"
|
||||
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
for="project-description"
|
||||
class="block text-sm/6 font-medium text-gray-900"
|
||||
>Description</label
|
||||
>
|
||||
<div class="mt-2">
|
||||
<textarea
|
||||
id="project-description"
|
||||
name="project-description"
|
||||
rows="3"
|
||||
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="text-sm/6 font-medium text-gray-900"
|
||||
>
|
||||
Team Members
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="#"
|
||||
class="relative rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Tom Cook"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Whitney Francis"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Leonard Krasner"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Floyd Miles"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="relative rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Emily Selman"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-dashed border-gray-200 bg-white text-gray-400 hover:border-gray-300 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-2"
|
||||
></span>
|
||||
<span class="sr-only"
|
||||
>Add team member</span
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend
|
||||
class="text-sm/6 font-medium text-gray-900"
|
||||
>
|
||||
Privacy
|
||||
</legend>
|
||||
<div class="mt-2 space-y-4">
|
||||
<div
|
||||
class="relative flex items-start"
|
||||
>
|
||||
<div
|
||||
class="absolute flex h-6 items-center"
|
||||
>
|
||||
<input
|
||||
id="privacy-public"
|
||||
type="radio"
|
||||
name="privacy"
|
||||
value="public"
|
||||
checked
|
||||
aria-describedby="privacy-public-description"
|
||||
class="relative size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
|
||||
/>
|
||||
</div>
|
||||
<div class="pl-7 text-sm/6">
|
||||
<label
|
||||
for="privacy-public"
|
||||
class="font-medium text-gray-900"
|
||||
>Public access</label
|
||||
>
|
||||
<p
|
||||
id="privacy-public-description"
|
||||
class="text-gray-500"
|
||||
>
|
||||
Everyone with the link
|
||||
will see this project.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="relative flex items-start"
|
||||
>
|
||||
<div
|
||||
class="absolute flex h-6 items-center"
|
||||
>
|
||||
<input
|
||||
id="privacy-private-to-project"
|
||||
type="radio"
|
||||
name="privacy"
|
||||
value="private-to-project"
|
||||
aria-describedby="privacy-private-to-project-description"
|
||||
class="relative size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
|
||||
/>
|
||||
</div>
|
||||
<div class="pl-7 text-sm/6">
|
||||
<label
|
||||
for="privacy-private-to-project"
|
||||
class="font-medium text-gray-900"
|
||||
>Private to project
|
||||
members</label
|
||||
>
|
||||
<p
|
||||
id="privacy-private-to-project-description"
|
||||
class="text-gray-500"
|
||||
>
|
||||
Only members of this
|
||||
project would be
|
||||
able to access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="relative flex items-start"
|
||||
>
|
||||
<div
|
||||
class="absolute flex h-6 items-center"
|
||||
>
|
||||
<input
|
||||
id="privacy-private"
|
||||
type="radio"
|
||||
name="privacy"
|
||||
value="private"
|
||||
aria-describedby="privacy-private-to-project-description"
|
||||
class="relative size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
|
||||
/>
|
||||
</div>
|
||||
<div class="pl-7 text-sm/6">
|
||||
<label
|
||||
for="privacy-private"
|
||||
class="font-medium text-gray-900"
|
||||
>Private to
|
||||
you</label
|
||||
>
|
||||
<p
|
||||
id="privacy-private-description"
|
||||
class="text-gray-500"
|
||||
>
|
||||
You are the only one
|
||||
able to access this
|
||||
project.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="pt-4 pb-6">
|
||||
<div class="flex text-sm">
|
||||
<a
|
||||
href="#"
|
||||
class="group inline-flex items-center font-medium text-indigo-600 hover:text-indigo-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-indigo-500 group-hover:text-indigo-900"
|
||||
>
|
||||
<path
|
||||
d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"
|
||||
/>
|
||||
<path
|
||||
d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-2">Copy link</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-4 flex text-sm">
|
||||
<a
|
||||
href="#"
|
||||
class="group inline-flex items-center text-gray-500 hover:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-gray-400 group-hover:text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="ml-2"
|
||||
>Learn more about sharing</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 justify-end px-4 py-4">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="ml-4 inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,69 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col overflow-y-auto bg-white py-6 shadow-xl"
|
||||
>
|
||||
<div class="px-4 sm:px-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Panel title
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,275 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent not-open:hidden backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="absolute inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out data-closed:opacity-0"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="group/dialog-panel relative ml-auto block size-full max-w-sm transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<!-- Close button, show/hide based on slide-over state. -->
|
||||
<div
|
||||
class="absolute top-0 left-0 -ml-8 flex pt-4 pr-2 duration-500 ease-in-out group-data-closed/dialog-panel:opacity-0 sm:-ml-10 sm:pr-4"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md text-gray-300 hover:text-white focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Slide-over panel, show/hide based on slide-over state. -->
|
||||
<div class="h-full overflow-y-auto bg-white p-8">
|
||||
<div class="space-y-6 pb-16">
|
||||
<div>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80"
|
||||
alt=""
|
||||
class="block aspect-10/7 w-full rounded-lg object-cover"
|
||||
/>
|
||||
<div class="mt-4 flex items-start justify-between">
|
||||
<div>
|
||||
<h2
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
<span class="sr-only">Details for </span
|
||||
>IMG_4985.HEIC
|
||||
</h2>
|
||||
<p
|
||||
class="text-sm font-medium text-gray-500"
|
||||
>
|
||||
3.9 MB
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="relative ml-4 flex size-8 items-center justify-center rounded-full bg-white text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900">
|
||||
Information
|
||||
</h3>
|
||||
<dl
|
||||
class="mt-2 divide-y divide-gray-200 border-t border-b border-gray-200"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between py-3 text-sm font-medium"
|
||||
>
|
||||
<dt class="text-gray-500">Uploaded by</dt>
|
||||
<dd class="text-gray-900">Marie Culver</dd>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between py-3 text-sm font-medium"
|
||||
>
|
||||
<dt class="text-gray-500">Created</dt>
|
||||
<dd class="text-gray-900">June 8, 2020</dd>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between py-3 text-sm font-medium"
|
||||
>
|
||||
<dt class="text-gray-500">Last modified</dt>
|
||||
<dd class="text-gray-900">June 8, 2020</dd>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between py-3 text-sm font-medium"
|
||||
>
|
||||
<dt class="text-gray-500">Dimensions</dt>
|
||||
<dd class="text-gray-900">4032 x 3024</dd>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between py-3 text-sm font-medium"
|
||||
>
|
||||
<dt class="text-gray-500">Resolution</dt>
|
||||
<dd class="text-gray-900">72 x 72</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900">
|
||||
Description
|
||||
</h3>
|
||||
<div class="mt-2 flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500 italic">
|
||||
Add a description to this image.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="relative -mr-2 flex size-8 items-center justify-center rounded-full bg-white text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-1.5"></span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
|
||||
/>
|
||||
</svg>
|
||||
<span class="sr-only">Add description</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900">
|
||||
Shared with
|
||||
</h3>
|
||||
<ul
|
||||
role="list"
|
||||
class="mt-2 divide-y divide-gray-200 border-t border-b border-gray-200"
|
||||
>
|
||||
<li
|
||||
class="flex items-center justify-between py-3"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=1024&h=1024&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
<p
|
||||
class="ml-4 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Aimee Douglas
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-6 rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
Remove<span class="sr-only">
|
||||
Aimee Douglas</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="flex items-center justify-between py-3"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=oilqXxSqey&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-8 rounded-full"
|
||||
/>
|
||||
<p
|
||||
class="ml-4 text-sm font-medium text-gray-900"
|
||||
>
|
||||
Andrea McMillan
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-6 rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
Remove<span class="sr-only">
|
||||
Andrea McMillan</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
class="flex items-center justify-between py-2"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="group -ml-1 flex items-center rounded-md bg-white p-1 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-hidden"
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-full border-2 border-dashed border-gray-300 text-gray-400"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ml-4 text-sm font-medium text-indigo-600 group-hover:text-indigo-500"
|
||||
>Share</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-3 flex-1 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,230 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="group/dialog-panel ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col overflow-y-auto bg-white shadow-xl"
|
||||
>
|
||||
<div class="px-4 py-6 sm:px-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2
|
||||
id="slide-over-heading"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Profile
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main -->
|
||||
<div>
|
||||
<div class="pb-1 sm:pb-6">
|
||||
<div>
|
||||
<div class="relative h-40 sm:h-56">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=600&q=80"
|
||||
alt=""
|
||||
class="absolute size-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mt-6 px-4 sm:mt-8 sm:flex sm:items-end sm:px-6"
|
||||
>
|
||||
<div class="sm:flex-1">
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<h3
|
||||
class="text-xl font-bold text-gray-900 sm:text-2xl"
|
||||
>
|
||||
Ashley Porter
|
||||
</h3>
|
||||
<span
|
||||
class="ml-2.5 inline-block size-2 shrink-0 rounded-full bg-green-400"
|
||||
>
|
||||
<span class="sr-only"
|
||||
>Online</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500">
|
||||
@ashleyporter
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mt-5 flex flex-wrap space-y-3 sm:space-y-0 sm:space-x-3"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-full shrink-0 items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:flex-1"
|
||||
>
|
||||
Message
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-full flex-1 items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
Call
|
||||
</button>
|
||||
<div
|
||||
class="ml-3 inline-flex sm:ml-0"
|
||||
>
|
||||
<el-dropdown
|
||||
class="relative inline-block text-left"
|
||||
>
|
||||
<button
|
||||
class="relative inline-flex items-center rounded-md bg-white p-2 text-gray-400 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-1"
|
||||
></span>
|
||||
<span class="sr-only"
|
||||
>Open options
|
||||
menu</span
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<div class="py-1">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
||||
>View profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
||||
>Copy profile
|
||||
link</a
|
||||
>
|
||||
</div>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 pt-5 pb-5 sm:px-0 sm:pt-0">
|
||||
<dl class="space-y-8 px-4 sm:space-y-6 sm:px-6">
|
||||
<div>
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
||||
>
|
||||
Bio
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2"
|
||||
>
|
||||
<p>
|
||||
Enim feugiat ut ipsum, neque ut.
|
||||
Tristique mi id elementum praesent.
|
||||
Gravida in tempus feugiat netus enim
|
||||
aliquet a, quam scelerisque.
|
||||
Dictumst in convallis nec in
|
||||
bibendum aenean arcu.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
||||
>
|
||||
Location
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2"
|
||||
>
|
||||
New York, NY, USA
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
||||
>
|
||||
Website
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2"
|
||||
>
|
||||
ashleyporter.com
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
||||
>
|
||||
Birthday
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2"
|
||||
>
|
||||
<time datetime="1988-06-23"
|
||||
>June 23, 1988</time
|
||||
>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,393 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-2xl transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<form
|
||||
class="flex h-full flex-col overflow-y-auto bg-white shadow-xl"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<!-- Header -->
|
||||
<div class="bg-gray-50 px-4 py-6 sm:px-6">
|
||||
<div
|
||||
class="flex items-start justify-between space-x-3"
|
||||
>
|
||||
<div class="space-y-1">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
New project
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500">
|
||||
Get started by filling in the
|
||||
information below to create your new
|
||||
project.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-2.5"
|
||||
></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider container -->
|
||||
<div
|
||||
class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0"
|
||||
>
|
||||
<!-- Project name -->
|
||||
<div
|
||||
class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
for="project-name"
|
||||
class="block text-sm/6 font-medium text-gray-900 sm:mt-1.5"
|
||||
>Project name</label
|
||||
>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<input
|
||||
id="project-name"
|
||||
type="text"
|
||||
name="project-name"
|
||||
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project description -->
|
||||
<div
|
||||
class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5"
|
||||
>
|
||||
<div>
|
||||
<label
|
||||
for="project-description"
|
||||
class="block text-sm/6 font-medium text-gray-900 sm:mt-1.5"
|
||||
>Description</label
|
||||
>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<textarea
|
||||
id="project-description"
|
||||
name="project-description"
|
||||
rows="3"
|
||||
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Team members -->
|
||||
<div
|
||||
class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:items-center sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5"
|
||||
>
|
||||
<div>
|
||||
<h3
|
||||
class="text-sm/6 font-medium text-gray-900"
|
||||
>
|
||||
Team Members
|
||||
</h3>
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
href="#"
|
||||
class="shrink-0 rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Tom Cook"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="shrink-0 rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Whitney Francis"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="shrink-0 rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Leonard Krasner"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="shrink-0 rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Floyd Miles"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="shrink-0 rounded-full hover:opacity-75"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt="Emily Selman"
|
||||
class="inline-block size-8 rounded-full"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="relative inline-flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-dashed border-gray-200 bg-white text-gray-400 hover:border-gray-300 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-2"
|
||||
></span>
|
||||
<span class="sr-only"
|
||||
>Add team member</span
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy -->
|
||||
<fieldset
|
||||
class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5"
|
||||
>
|
||||
<legend class="sr-only">Privacy</legend>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="text-sm/6 font-medium text-gray-900"
|
||||
>
|
||||
Privacy
|
||||
</div>
|
||||
<div class="space-y-5 sm:col-span-2">
|
||||
<div class="space-y-5 sm:mt-0">
|
||||
<div class="relative flex items-start">
|
||||
<div
|
||||
class="absolute flex h-6 items-center"
|
||||
>
|
||||
<input
|
||||
id="privacy-public"
|
||||
type="radio"
|
||||
name="privacy"
|
||||
value="public"
|
||||
checked
|
||||
aria-describedby="privacy-public-description"
|
||||
class="relative size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
|
||||
/>
|
||||
</div>
|
||||
<div class="pl-7 text-sm/6">
|
||||
<label
|
||||
for="privacy-public"
|
||||
class="font-medium text-gray-900"
|
||||
>Public access</label
|
||||
>
|
||||
<p
|
||||
id="privacy-public-description"
|
||||
class="text-gray-500"
|
||||
>
|
||||
Everyone with the link will
|
||||
see this project.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex items-start">
|
||||
<div
|
||||
class="absolute flex h-6 items-center"
|
||||
>
|
||||
<input
|
||||
id="privacy-private-to-project"
|
||||
type="radio"
|
||||
name="privacy"
|
||||
value="private-to-project"
|
||||
aria-describedby="privacy-private-to-project-description"
|
||||
class="relative size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
|
||||
/>
|
||||
</div>
|
||||
<div class="pl-7 text-sm/6">
|
||||
<label
|
||||
for="privacy-private-to-project"
|
||||
class="font-medium text-gray-900"
|
||||
>Private to project
|
||||
members</label
|
||||
>
|
||||
<p
|
||||
id="privacy-private-to-project-description"
|
||||
class="text-gray-500"
|
||||
>
|
||||
Only members of this project
|
||||
would be able to access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex items-start">
|
||||
<div
|
||||
class="absolute flex h-6 items-center"
|
||||
>
|
||||
<input
|
||||
id="privacy-private"
|
||||
type="radio"
|
||||
name="privacy"
|
||||
value="private"
|
||||
aria-describedby="privacy-private-to-project-description"
|
||||
class="relative size-4 appearance-none rounded-full border border-gray-300 before:absolute before:inset-1 before:rounded-full before:bg-white not-checked:before:hidden checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden"
|
||||
/>
|
||||
</div>
|
||||
<div class="pl-7 text-sm/6">
|
||||
<label
|
||||
for="privacy-private"
|
||||
class="font-medium text-gray-900"
|
||||
>Private to you</label
|
||||
>
|
||||
<p
|
||||
id="privacy-private-description"
|
||||
class="text-gray-500"
|
||||
>
|
||||
You are the only one able to
|
||||
access this project.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-gray-200" />
|
||||
<div
|
||||
class="flex flex-col items-start space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex items-center space-x-2.5 text-sm font-medium text-indigo-600 hover:text-indigo-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-indigo-500 group-hover:text-indigo-900"
|
||||
>
|
||||
<path
|
||||
d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"
|
||||
/>
|
||||
<path
|
||||
d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Copy link</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
class="group flex items-center space-x-2.5 text-sm text-gray-500 hover:text-gray-900"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-gray-400 group-hover:text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
>Learn more about
|
||||
sharing</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div
|
||||
class="shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6"
|
||||
>
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,69 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-2xl transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col overflow-y-auto bg-white py-6 shadow-xl"
|
||||
>
|
||||
<div class="px-4 sm:px-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Panel title
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,237 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="group/dialog-panel ml-auto block size-full max-w-2xl transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col overflow-y-auto bg-white shadow-xl"
|
||||
>
|
||||
<div class="px-4 py-6 sm:px-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Profile
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main -->
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div class="pb-6">
|
||||
<div
|
||||
class="h-24 bg-indigo-700 sm:h-20 lg:h-28"
|
||||
></div>
|
||||
<div
|
||||
class="-mt-12 flow-root px-4 sm:-mt-8 sm:flex sm:items-end sm:px-6 lg:-mt-16"
|
||||
>
|
||||
<div>
|
||||
<div class="-m-1 flex">
|
||||
<div
|
||||
class="inline-flex overflow-hidden rounded-lg border-4 border-white"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80"
|
||||
alt=""
|
||||
class="size-24 shrink-0 sm:size-40 lg:size-48"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 sm:ml-6 sm:flex-1">
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<h3
|
||||
class="text-xl font-bold text-gray-900 sm:text-2xl"
|
||||
>
|
||||
Ashley Porter
|
||||
</h3>
|
||||
<span
|
||||
class="ml-2.5 inline-block size-2 shrink-0 rounded-full bg-green-400"
|
||||
>
|
||||
<span class="sr-only"
|
||||
>Online</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500">
|
||||
@ashleyporter
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mt-5 flex flex-wrap space-y-3 sm:space-y-0 sm:space-x-3"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-full shrink-0 items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:flex-1"
|
||||
>
|
||||
Message
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-full flex-1 items-center justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
Call
|
||||
</button>
|
||||
<div class="ml-3 inline-flex sm:ml-0">
|
||||
<el-dropdown
|
||||
class="relative inline-block text-left"
|
||||
>
|
||||
<button
|
||||
class="relative inline-flex items-center rounded-md bg-white p-2 text-gray-400 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-1"
|
||||
></span>
|
||||
<span class="sr-only"
|
||||
>Open options menu</span
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<el-menu
|
||||
anchor="bottom end"
|
||||
popover
|
||||
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
||||
>
|
||||
<div class="py-1">
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
||||
>View profile</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
||||
>Copy profile
|
||||
link</a
|
||||
>
|
||||
</div>
|
||||
</el-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:px-0 sm:py-0">
|
||||
<dl
|
||||
class="space-y-8 sm:space-y-0 sm:divide-y sm:divide-gray-200"
|
||||
>
|
||||
<div class="sm:flex sm:px-6 sm:py-5">
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0 lg:w-48"
|
||||
>
|
||||
Bio
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 sm:ml-6"
|
||||
>
|
||||
<p>
|
||||
Enim feugiat ut ipsum, neque ut.
|
||||
Tristique mi id elementum praesent.
|
||||
Gravida in tempus feugiat netus enim
|
||||
aliquet a, quam scelerisque.
|
||||
Dictumst in convallis nec in
|
||||
bibendum aenean arcu.
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="sm:flex sm:px-6 sm:py-5">
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0 lg:w-48"
|
||||
>
|
||||
Location
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 sm:ml-6"
|
||||
>
|
||||
New York, NY, USA
|
||||
</dd>
|
||||
</div>
|
||||
<div class="sm:flex sm:px-6 sm:py-5">
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0 lg:w-48"
|
||||
>
|
||||
Website
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 sm:ml-6"
|
||||
>
|
||||
ashleyporter.com
|
||||
</dd>
|
||||
</div>
|
||||
<div class="sm:flex sm:px-6 sm:py-5">
|
||||
<dt
|
||||
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0 lg:w-48"
|
||||
>
|
||||
Birthday
|
||||
</dt>
|
||||
<dd
|
||||
class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0 sm:ml-6"
|
||||
>
|
||||
<time datetime="1982-06-23"
|
||||
>June 23, 1982</time
|
||||
>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,73 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent not-open:hidden backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="absolute inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out data-closed:opacity-0"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col overflow-y-auto bg-white py-6 shadow-xl"
|
||||
>
|
||||
<div class="px-4 sm:px-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Panel title
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,76 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col overflow-y-auto bg-white shadow-xl"
|
||||
>
|
||||
<div class="bg-indigo-700 px-4 py-6 sm:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-white"
|
||||
>
|
||||
Panel title
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-indigo-700 text-indigo-200 hover:text-white focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-hidden"
|
||||
>
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1">
|
||||
<p class="text-sm text-indigo-300">
|
||||
Lorem, ipsum dolor sit amet consectetur
|
||||
adipisicing elit aliquam ad hic recusandae
|
||||
soluta.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1 px-4 py-6 sm:px-6">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,32 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button command="show-modal" commandfor="drawer" class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10">Open drawer</button>
|
||||
<el-dialog>
|
||||
<dialog id="drawer" aria-labelledby="drawer-title" class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent not-open:hidden backdrop:bg-transparent">
|
||||
<el-dialog-backdrop class="absolute inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out data-closed:opacity-0"></el-dialog-backdrop>
|
||||
|
||||
<div tabindex="0" class="absolute inset-0 pl-10 focus:outline-none sm:pl-16">
|
||||
<el-dialog-panel class="group/dialog-panel relative ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700">
|
||||
<!-- Close button, show/hide based on slide-over state. -->
|
||||
<div class="absolute top-0 left-0 -ml-8 flex pt-4 pr-2 duration-500 ease-in-out group-data-closed/dialog-panel:opacity-0 sm:-ml-10 sm:pr-4">
|
||||
<button type="button" command="close" commandfor="drawer" class="relative rounded-md text-gray-300 hover:text-white focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-hidden">
|
||||
<span class="absolute -inset-2.5"></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" data-slot="icon" aria-hidden="true" class="size-6">
|
||||
<path d="M6 18 18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex h-full flex-col overflow-y-auto bg-white py-6 shadow-xl">
|
||||
<div class="px-4 sm:px-6">
|
||||
<h2 id="drawer-title" class="text-base font-semibold text-gray-900">Panel title</h2>
|
||||
</div>
|
||||
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,91 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open drawer
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="drawer"
|
||||
aria-labelledby="drawer-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
||||
>
|
||||
<div
|
||||
class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl"
|
||||
>
|
||||
<div
|
||||
class="flex min-h-0 flex-1 flex-col overflow-y-auto py-6"
|
||||
>
|
||||
<div class="px-4 sm:px-6">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2
|
||||
id="drawer-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Panel title
|
||||
</h2>
|
||||
<div class="ml-3 flex h-7 items-center">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-hidden"
|
||||
>
|
||||
<span
|
||||
class="absolute -inset-2.5"
|
||||
></span>
|
||||
<span class="sr-only">Close panel</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
||||
<!-- Your content -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 justify-end px-4 py-4">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="drawer"
|
||||
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:ring-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="ml-4 inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,75 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="dialog"
|
||||
aria-labelledby="dialog-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="mx-auto flex size-12 items-center justify-center rounded-full bg-green-100"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-green-600"
|
||||
>
|
||||
<path
|
||||
d="m4.5 12.75 6 6 9-13.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<h3
|
||||
id="dialog-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Payment successful
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur
|
||||
adipisicing elit. Consequatur amet labore.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-6">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Go back to dashboard
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,88 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="dialog"
|
||||
aria-labelledby="dialog-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="mx-auto flex size-12 items-center justify-center rounded-full bg-green-100"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-green-600"
|
||||
>
|
||||
<path
|
||||
d="m4.5 12.75 6 6 9-13.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-5">
|
||||
<h3
|
||||
id="dialog-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Payment successful
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Lorem ipsum, dolor sit amet consectetur
|
||||
adipisicing elit. Eius aliquam laudantium
|
||||
explicabo pariatur iste dolorem animi vitae
|
||||
error totam. At sapiente aliquam accusamus
|
||||
facere veritatis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 sm:col-start-1 sm:mt-0"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,85 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="dialog"
|
||||
aria-labelledby="dialog-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-red-600"
|
||||
>
|
||||
<path
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3
|
||||
id="dialog-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Deactivate account
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Are you sure you want to deactivate your
|
||||
account? All of your data will be permanently
|
||||
removed from our servers forever. This action
|
||||
cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:ml-3 sm:w-auto"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,85 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="dialog"
|
||||
aria-labelledby="dialog-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-red-600"
|
||||
>
|
||||
<path
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3
|
||||
id="dialog-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Deactivate account
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Are you sure you want to deactivate your
|
||||
account? All of your data will be permanently
|
||||
removed from our servers forever. This action
|
||||
cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-4 sm:ml-10 sm:flex sm:pl-4">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:w-auto"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,110 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="dialog"
|
||||
aria-labelledby="dialog-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<div class="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
d="M6 18 18 6M6 6l12 12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-red-600"
|
||||
>
|
||||
<path
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3
|
||||
id="dialog-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Deactivate account
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Are you sure you want to deactivate your
|
||||
account? All of your data will be permanently
|
||||
removed from our servers forever. This action
|
||||
cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:ml-3 sm:w-auto"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,91 @@
|
||||
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
||||
<button
|
||||
command="show-modal"
|
||||
commandfor="dialog"
|
||||
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
||||
>
|
||||
Open dialog
|
||||
</button>
|
||||
<el-dialog>
|
||||
<dialog
|
||||
id="dialog"
|
||||
aria-labelledby="dialog-title"
|
||||
class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent"
|
||||
>
|
||||
<el-dialog-backdrop
|
||||
class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
||||
></el-dialog-backdrop>
|
||||
|
||||
<div
|
||||
tabindex="0"
|
||||
class="flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0"
|
||||
>
|
||||
<el-dialog-panel
|
||||
class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
||||
>
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-red-600"
|
||||
>
|
||||
<path
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
|
||||
>
|
||||
<h3
|
||||
id="dialog-title"
|
||||
class="text-base font-semibold text-gray-900"
|
||||
>
|
||||
Deactivate account
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
Are you sure you want to deactivate your
|
||||
account? All of your data will be
|
||||
permanently removed. This action cannot be
|
||||
undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:ml-3 sm:w-auto"
|
||||
>
|
||||
Deactivate
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
command="close"
|
||||
commandfor="dialog"
|
||||
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 sm:mt-0 sm:w-auto"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
@ -0,0 +1,47 @@
|
||||
<!-- Global notification live region, render this permanently at the end of the document -->
|
||||
<div
|
||||
aria-live="assertive"
|
||||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg ring-1 ring-black/5 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex w-0 flex-1 justify-between">
|
||||
<p class="w-0 flex-1 text-sm font-medium text-gray-900">
|
||||
Discussion archived
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-3 shrink-0 rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
Undo
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,61 @@
|
||||
<!-- Global notification live region, render this permanently at the end of the document -->
|
||||
<div
|
||||
aria-live="assertive"
|
||||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg ring-1 ring-black/5 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="shrink-0">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-green-400"
|
||||
>
|
||||
<path
|
||||
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
Successfully saved!
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Anyone with a link can now view this file.
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
<!-- Global notification live region, render this permanently at the end of the document -->
|
||||
<div
|
||||
aria-live="assertive"
|
||||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg ring-1 ring-black/5 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="shrink-0">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-6 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
Discussion moved
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing
|
||||
elit oluptatum tenetur.
|
||||
</p>
|
||||
<div class="mt-3 flex space-x-7">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-white text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
Undo
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md bg-white text-sm font-medium text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<!-- Global notification live region, render this permanently at the end of the document -->
|
||||
<div
|
||||
aria-live="assertive"
|
||||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<div
|
||||
class="pointer-events-auto flex w-full max-w-md translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg ring-1 ring-black/5 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
|
||||
>
|
||||
<div class="w-0 flex-1 p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="shrink-0 pt-0.5">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
Emilia Gates
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Sure! 8:30pm works great!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex border-l border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-center rounded-none rounded-r-lg border border-transparent p-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden"
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
<!-- Global notification live region, render this permanently at the end of the document -->
|
||||
<div
|
||||
aria-live="assertive"
|
||||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg ring-1 ring-black/5 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="shrink-0 pt-0.5">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
|
||||
alt=""
|
||||
class="size-10 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
Emilia Gates
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Sent you an invite to connect.
|
||||
</p>
|
||||
<div class="mt-4 flex">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-3 inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
||||
>
|
||||
Decline
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
<!-- Global notification live region, render this permanently at the end of the document -->
|
||||
<div
|
||||
aria-live="assertive"
|
||||
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<div
|
||||
class="pointer-events-auto flex w-full max-w-md translate-y-0 transform divide-x divide-gray-200 rounded-lg bg-white opacity-100 shadow-lg ring-1 ring-black/5 transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0"
|
||||
>
|
||||
<div class="flex w-0 flex-1 items-center p-4">
|
||||
<div class="w-full">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
Receive notifications
|
||||
</p>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Notifications may include alerts, sounds, and badges.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="flex flex-col divide-y divide-gray-200">
|
||||
<div class="flex h-0 flex-1">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:z-10 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden"
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex h-0 flex-1">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden"
|
||||
>
|
||||
Don't allow
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue