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.
481 lines
26 KiB
HTML
481 lines
26 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="dialog"
|
|
class="rounded-md bg-white/80 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-white/90"
|
|
>
|
|
Open command palette
|
|
</button>
|
|
|
|
<el-dialog>
|
|
<dialog id="dialog" class="backdrop:bg-transparent">
|
|
<el-dialog-backdrop
|
|
class="fixed inset-0 bg-gray-500/25 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="fixed inset-0 w-screen overflow-y-auto p-4 focus:outline-none sm:p-6 md:p-20"
|
|
>
|
|
<el-dialog-panel
|
|
class="mx-auto block max-w-xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all data-closed:scale-95 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
|
>
|
|
<el-command-palette>
|
|
<div class="grid grid-cols-1 border-b border-gray-100">
|
|
<input
|
|
type="text"
|
|
autofocus
|
|
placeholder="Search..."
|
|
class="col-start-1 row-start-1 h-12 w-full pr-4 pl-11 text-base text-gray-900 outline-hidden placeholder:text-gray-400 sm:text-sm"
|
|
/>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="pointer-events-none col-start-1 row-start-1 ml-4 size-5 self-center text-gray-400"
|
|
>
|
|
<path
|
|
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<el-command-list
|
|
hidden
|
|
class="block max-h-96 transform-gpu scroll-py-3 overflow-y-auto p-3"
|
|
>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-1-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-indigo-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-1-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Text
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add freeform text with basic formatting
|
|
options.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-2-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-blue-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-2-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Video
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a video from YouTube, Vimeo or other
|
|
services.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-3-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-violet-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-3-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Page
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a new blank page to your project.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-4-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-sky-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-4-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
List
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add an ordered or unordered list.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-5-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-pink-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M9 4.5v15m6-15v15m-10.875 0h15.75c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125H4.125C3.504 4.5 3 5.004 3 5.625v12.75c0 .621.504 1.125 1.125 1.125Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-5-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Board
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a kanban style board with cards and
|
|
columns.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-6-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-teal-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-6-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Calendar
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a full month calendar or a week view
|
|
calendar.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-7-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-cyan-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-7-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Table
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a table for displaying larger sets of
|
|
data.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-8-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-fuchsia-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-8-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Link
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a link to another page, website, or
|
|
email address.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-9-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-purple-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-9-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Code
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add raw HTML, JavaScript or CSS code.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
<a
|
|
href="#"
|
|
hidden
|
|
aria-labelledby="item-10-label"
|
|
class="group flex cursor-default rounded-xl p-3 select-none focus:outline-hidden aria-selected:bg-gray-100"
|
|
>
|
|
<div
|
|
class="flex size-10 flex-none items-center justify-center rounded-lg bg-rose-500"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6 text-white"
|
|
>
|
|
<path
|
|
d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4 flex-auto">
|
|
<p
|
|
id="item-10-label"
|
|
class="text-sm font-medium text-gray-700 group-aria-selected:text-gray-900"
|
|
>
|
|
Image
|
|
</p>
|
|
<p
|
|
class="text-sm text-gray-500 group-aria-selected:text-gray-700"
|
|
>
|
|
Add a simple image or a photo gallery.
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</el-command-list>
|
|
|
|
<el-no-results
|
|
hidden
|
|
class="block px-6 py-14 text-center text-sm sm:px-14"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="mx-auto size-6 text-gray-400"
|
|
>
|
|
<path
|
|
d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
<p class="mt-4 font-semibold text-gray-900">
|
|
No results found
|
|
</p>
|
|
<p class="mt-2 text-gray-500">
|
|
No components found for this search term. Please try
|
|
again.
|
|
</p>
|
|
</el-no-results>
|
|
</el-command-palette>
|
|
</el-dialog-panel>
|
|
</div>
|
|
</dialog>
|
|
</el-dialog>
|