You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
<!-- 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>
|