<div class="relative z-20">
<div x-show="preview" class="relative w-full bg-white border rounded-md border-neutral-200">
<div class="w-full min-h-[250px] overflow-scroll rounded-md w-full sm:p-10 p-4 box-border flex items-center justify-center">
<div x-data="{
contextMenuOpen: false,
contextMenuToggle: function(event) {
this.contextMenuOpen = true;
event.preventDefault();
this.$refs.contextmenu.classList.add('opacity-0');
let that = this;
$nextTick(function(){
that.calculateContextMenuPosition(event);
that.calculateSubMenuPosition(event);
that.$refs.contextmenu.classList.remove('opacity-0');
});
},
calculateContextMenuPosition (clickEvent) {
if(window.innerHeight < clickEvent.clientY + this.$refs.contextmenu.offsetHeight){
this.$refs.contextmenu.style.top = (window.innerHeight - this.$refs.contextmenu.offsetHeight) + 'px';
} else {
this.$refs.contextmenu.style.top = clickEvent.clientY + 'px';
}
if(window.innerWidth < clickEvent.clientX + this.$refs.contextmenu.offsetWidth){
this.$refs.contextmenu.style.left = (clickEvent.clientX - this.$refs.contextmenu.offsetWidth) + 'px';
} else {
this.$refs.contextmenu.style.left = clickEvent.clientX + 'px';
}
},
calculateSubMenuPosition (clickEvent) {
let submenus = document.querySelectorAll('[data-submenu]');
let contextMenuWidth = this.$refs.contextmenu.offsetWidth;
for(let i = 0; i < submenus.length; i++){
if(window.innerWidth < (clickEvent.clientX + contextMenuWidth + submenus[i].offsetWidth)){
submenus[i].classList.add('left-0', '-translate-x-full');
submenus[i].classList.remove('right-0', 'translate-x-full');
} else {
submenus[i].classList.remove('left-0', '-translate-x-full');
submenus[i].classList.add('right-0', 'translate-x-full');
}
if(window.innerHeight < (submenus[i].previousElementSibling.getBoundingClientRect().top + submenus[i].offsetHeight)){
let heightDifference = (window.innerHeight - submenus[i].previousElementSibling.getBoundingClientRect().top) - submenus[i].offsetHeight;
submenus[i].style.top = heightDifference + 'px';
} else {
submenus[i].style.top = '';
}
}
}
}" x-init="
$watch('contextMenuOpen', function(value){
if(value === true){ document.body.classList.add('overflow-hidden') }
else { document.body.classList.remove('overflow-hidden') }
});
window.addEventListener('resize', function(event) { contextMenuOpen = false; });
" @contextmenu="contextMenuToggle(event)" class="relative z-50 flex h-[150px] w-[300px] text-sm items-center justify-center rounded-md border border-neutral-300 border-dashed text-neutral-800" "="">
<span class="cursor-default text-neutral-400" xt-marked="ok">右クリックでコンテキストメニューを開く</span>
<template x-teleport="body">
<div x-show="contextMenuOpen" @click.away="contextMenuOpen=false" x-ref="contextmenu" class="z-50 min-w-[8rem] text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm fixed p-1 shadow-md w-64" x-cloak="">
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"></path></svg>
<span>New Folder</span>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"></path></svg>
<span>Get Info</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px stroke-current left-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M20.2507 8.25V5.75C20.2507 4.64543 19.3553 3.75 18.2507 3.75H5.74902C4.64445 3.75 3.74902 4.64543 3.74902 5.75V8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 20.25L12 3.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.75 20.25L15.25 20.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
<span>Rename</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px stroke-current left-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M3.75 20.25V5.75C3.75 4.09315 5.09315 2.75 6.75 2.75H12.9225C13.453 2.75 13.9617 2.96075 14.3368 3.33588L19.6643 8.66423C20.0393 9.0393 20.25 9.54796 20.25 10.0783V17.25C20.25 18.9069 18.9069 20.25 17.25 20.25H14.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.75 2.92993V7.24993C13.75 8.3545 14.6454 9.24993 15.75 9.24993H20.07" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.75 5H10.25M9.75 8H10.25M9.75 11H10.25M9.75 14H10.25M7.75 3.5L8.25 3.5M7.75 6.5H8.25M7.75 9.5H8.25M7.75 12.5H8.25M7.75 15.5H8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7.2627 21.25H10.75C11.0931 21.25 11.3343 20.9124 11.223 20.5879L10.655 18.9305C10.413 18.2244 9.74895 17.75 9.00244 17.75C8.2532 17.75 7.58738 18.2278 7.34748 18.9376L6.78902 20.5899C6.67946 20.914 6.92054 21.25 7.2627 21.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
<span>Compress "Untitled.pdf"</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"></path></svg>
<span>Duplicate</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path></svg>
<span>Quick Look</span>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px stroke-current left-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="none"><path d="M7.75 7.757V6.75a3 3 0 0 1 3-3h6.5a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3h-.992" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.75 10.75a3 3 0 0 1 3-3h6.5a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3h-6.5a3 3 0 0 1-3-3v-6.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
<span>Copy</span>
</div>
<div class="relative group">
<div class="flex cursor-default select-none items-center rounded px-2 hover:bg-blue-600 hover:text-white py-1.5 outline-none pl-8">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"></path></svg>
<span>Share</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 ml-auto"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
<div data-submenu="" class="absolute top-0 right-0 invisible mr-1 duration-200 ease-out translate-x-full opacity-0 group-hover:mr-0 group-hover:visible group-hover:opacity-100">
<div class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md animate-in slide-in-from-left-1 w-48">
<div @click="contextMenuOpen=false" class="relative pl-8 flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"></path></svg>
<span>Upload File</span>
</div>
<div @click="contextMenuOpen=false" class="relative pl-8 flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path></svg>
<span>Email File</span>
</div>
</div>
</div>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"></path><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z"></path></svg>
<span>Tags</span>
<span class="flex items-center h-full pl-3 mt-px space-x-2">
<span class="w-2.5 h-2.5 bg-red-400 rounded-full"></span>
<span class="w-2.5 h-2.5 bg-orange-400 rounded-full"></span>
<span class="w-2.5 h-2.5 bg-yellow-400 rounded-full"></span>
<span class="w-2.5 h-2.5 bg-green-400 rounded-full"></span>
<span class="w-2.5 h-2.5 bg-blue-400 rounded-full"></span>
<span class="w-2.5 h-2.5 bg-purple-400 rounded-full"></span>
<span class="w-2.5 h-2.5 bg-gray-300 rounded-full"></span>
</span>
</div>
<div @click="contextMenuOpen=false" class="relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-red-600 hover:text-white text-red-600 outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none">
<svg class="absolute w-4 h-4 -mt-px left-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"></path></svg>
<span>Move To Trash</span>
</div>
</div>
</template>
</div>
</div>
</div>
<div class="w-full min-h-[250px] rounded-md w-full sm:p-10 p-4 box-border flex items-center justify-center">
<nav x-data="{
navigationMenuOpen: false,
navigationMenu: '',
navibationMenuCloseDelay: 200,
navigationMenuCloseTimeout: null,
navigationMenuLeave() {
let that = this;
this.navigationMenuCloseTimeout = setTimeout(() => {
that.navigationMenuClose();
}, this.navibationMenuCloseDelay);
},
navigationMenuReposition(navElement) {
this.navigationMenuClearCloseTimeout();
this.$refs.navigationDropdown.style.left = navElement.offsetLeft + 'px';
this.$refs.navigationDropdown.style.marginLeft = (navElement.offsetWidth/2) + 'px';
},
navigationMenuClearCloseTimeout(){
clearTimeout(this.navigationMenuCloseTimeout);
},
navigationMenuClose(){
this.navigationMenuOpen = false;
this.navigationMenu = '';
}
}" class="relative z-10 w-auto">
<div class="relative">
<ul class="flex items-center justify-center flex-1 p-1 space-x-1 list-none border rounded-md text-neutral-700 group border-neutral-200/80">
<li>
<button :class="{ 'bg-neutral-100' : navigationMenu=='getting-started', 'hover:bg-neutral-100' : navigationMenu!='getting-started' }" @mouseover="navigationMenuOpen=true; navigationMenuReposition($el); navigationMenu='getting-started'" @mouseleave="navigationMenuLeave()" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none group w-max hover:bg-neutral-100">
<span xt-marked="ok">Getting started</span>
<svg :class="{ '-rotate-180' : navigationMenuOpen==true && navigationMenu == 'getting-started' }" class="relative top-[1px] ml-1 h-3 w-3 ease-out duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</li>
<li>
<button :class="{ 'bg-neutral-100' : navigationMenu=='learn-more', 'hover:bg-neutral-100' : navigationMenu!='learn-more' }" @mouseover="navigationMenuOpen=true; navigationMenuReposition($el); navigationMenu='learn-more'" @mouseleave="navigationMenuLeave()" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none bg-background group w-max hover:bg-neutral-100">
<span xt-marked="ok">Learn More</span>
<svg :class="{ '-rotate-180' : navigationMenuOpen==true && navigationMenu == 'learn-more' }" class="relative top-[1px] ml-1 h-3 w-3 ease-out duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
</li>
<li>
<a href="#_" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors rounded-md hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-neutral-100 group w-max" xt-marked="ok">
Documentation
</a>
</li>
</ul>
</div>
<div x-ref="navigationDropdown" x-show="navigationMenuOpen" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" @mouseover="navigationMenuClearCloseTimeout()" @mouseleave="navigationMenuLeave()" class="absolute top-0 pt-3 duration-200 ease-out -translate-x-1/2 translate-y-11" style="left: 5px; margin-left: 72px; display: none;">
<div class="flex justify-center w-auto h-auto overflow-hidden bg-white border rounded-md shadow-sm border-neutral-200/70">
<div x-show="navigationMenu == 'getting-started'" class="flex items-stretch justify-center w-full max-w-2xl p-6 gap-x-3" style="display: none;">
<div class="flex-shrink-0 w-48 rounded pt-28 pb-7 bg-gradient-to-br from-neutral-800 to-black">
<div class="relative px-7 space-y-1.5 text-white">
<svg class="block w-auto h-9" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M67.683 89.217h44.634l30.9 53.218H36.783l30.9-53.218Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M77.478 120.522h21.913v46.956H77.478v-46.956Zm-34.434-29.74 45.59-78.26 46.757 78.26H43.044Z" fill="currentColor"></path></svg>
<span class="block font-bold" xt-marked="ok">Pines UI</span>
<span class="block text-sm opacity-60" xt-marked="ok">An Alpine and Tailwind UI library</span>
</div>
</div>
<div class="w-72">
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Introduction</span>
<span class="block font-light leading-5 opacity-50" xt-marked="ok">Re-usable elements built using Alpine JS and Tailwind CSS.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">How to use</span>
<span class="block leading-5 opacity-50" xt-marked="ok">Couldn't be easier. It's is as simple as copy, paste, and preview.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Contributing</span>
<span class="block leading-5 opacity-50" xt-marked="ok">Feel free to contribute your expertise. All these elements are open-source.</span>
</a>
</div>
</div>
<div x-show="navigationMenu == 'learn-more'" class="flex items-stretch justify-center w-full p-6" style="display: none;">
<div class="w-72">
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Tailwind CSS</span>
<span class="block font-light leading-5 opacity-50" xt-marked="ok">A utility first CSS framework for building amazing websites.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Laravel</span>
<span class="block font-light leading-5 opacity-50" xt-marked="ok">The perfect all-in-one framework for building amazing apps.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Pines UI</span>
<span class="block leading-5 opacity-50" xt-marked="ok">An Alpine JS and Tailwind CSS UI library for awesome people. </span>
</a>
</div>
<div class="w-72">
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">ApineJS</span>
<span class="block font-light leading-5 opacity-50" xt-marked="ok">A framework without the complex setup or heavy dependencies.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Livewire</span>
<span class="block leading-5 opacity-50" xt-marked="ok">A seamless integration of server-side and client-side interactions.</span>
</a>
<a href="#_" @click="navigationMenuClose()" class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100">
<span class="block mb-1 font-medium text-black" xt-marked="ok">Tails</span>
<span class="block leading-5 opacity-50" xt-marked="ok">The ultimate Tailwind CSS design tool that helps you craft beautiful websites.</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</div>
<div x-show="!preview" class="relative inset-0 w-full h-auto border border-gray-100 rounded-md shadow-sm cursor-text " style="display: none;">
<pre class="hljs"><code class="w-full overflow-scroll text-sm rounded-md relaitve html hljs xml" xt-marked="ok"><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">x-data</span>=<span class="hljs-string" xt-marked="ok">"{
contextMenuOpen: false,
contextMenuToggle: function(event) {
this.contextMenuOpen = true;
event.preventDefault();
this.$refs.contextmenu.classList.add('opacity-0');
let that = this;
$nextTick(function(){
that.calculateContextMenuPosition(event);
that.calculateSubMenuPosition(event);
that.$refs.contextmenu.classList.remove('opacity-0');
});
},
calculateContextMenuPosition (clickEvent) {
if(window.innerHeight < clickEvent.clientY + this.$refs.contextmenu.offsetHeight){
this.$refs.contextmenu.style.top = (window.innerHeight - this.$refs.contextmenu.offsetHeight) + 'px';
} else {
this.$refs.contextmenu.style.top = clickEvent.clientY + 'px';
}
if(window.innerWidth < clickEvent.clientX + this.$refs.contextmenu.offsetWidth){
this.$refs.contextmenu.style.left = (clickEvent.clientX - this.$refs.contextmenu.offsetWidth) + 'px';
} else {
this.$refs.contextmenu.style.left = clickEvent.clientX + 'px';
}
},
calculateSubMenuPosition (clickEvent) {
let submenus = document.querySelectorAll('[data-submenu]');
let contextMenuWidth = this.$refs.contextmenu.offsetWidth;
for(let i = 0; i < submenus.length; i++){
if(window.innerWidth < (clickEvent.clientX + contextMenuWidth + submenus[i].offsetWidth)){
submenus[i].classList.add('left-0', '-translate-x-full');
submenus[i].classList.remove('right-0', 'translate-x-full');
} else {
submenus[i].classList.remove('left-0', '-translate-x-full');
submenus[i].classList.add('right-0', 'translate-x-full');
}
if(window.innerHeight < (submenus[i].previousElementSibling.getBoundingClientRect().top + submenus[i].offsetHeight)){
let heightDifference = (window.innerHeight - submenus[i].previousElementSibling.getBoundingClientRect().top) - submenus[i].offsetHeight;
submenus[i].style.top = heightDifference + 'px';
} else {
submenus[i].style.top = '';
}
}
}
}"</span>
<span class="hljs-attr" xt-marked="ok">x-init</span>=<span class="hljs-string" xt-marked="ok">"
$watch('contextMenuOpen', function(value){
if(value === true){ document.body.classList.add('overflow-hidden') }
else { document.body.classList.remove('overflow-hidden') }
});
window.addEventListener('resize', function(event) { contextMenuOpen = false; });
"</span>
@<span class="hljs-attr" xt-marked="ok">contextmenu</span>=<span class="hljs-string" xt-marked="ok">"contextMenuToggle(event)"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative z-50 flex h-[150px] w-[300px] text-sm items-center justify-center rounded-md border border-neutral-300 border-dashed text-neutral-800"</span>"></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"cursor-default text-neutral-400"</span>></span>Right click here<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">template</span> <span class="hljs-attr" xt-marked="ok">x-teleport</span>=<span class="hljs-string" xt-marked="ok">"body"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">x-show</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen"</span> @<span class="hljs-attr" xt-marked="ok">click.away</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">x-ref</span>=<span class="hljs-string" xt-marked="ok">"contextmenu"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"z-50 min-w-[8rem] text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm fixed p-1 shadow-md w-64"</span> <span class="hljs-attr" xt-marked="ok">x-cloak</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"2"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>New Folder<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"h-px my-1 -mx-1 bg-neutral-200"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Get Info<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px stroke-current left-2"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">g</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"none"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M20.2507 8.25V5.75C20.2507 4.64543 19.3553 3.75 18.2507 3.75H5.74902C4.64445 3.75 3.74902 4.64543 3.74902 5.75V8.25"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M12 20.25L12 3.75"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M8.75 20.25L15.25 20.25"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">g</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Rename<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px stroke-current left-2"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">g</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"none"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M3.75 20.25V5.75C3.75 4.09315 5.09315 2.75 6.75 2.75H12.9225C13.453 2.75 13.9617 2.96075 14.3368 3.33588L19.6643 8.66423C20.0393 9.0393 20.25 9.54796 20.25 10.0783V17.25C20.25 18.9069 18.9069 20.25 17.25 20.25H14.75"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M13.75 2.92993V7.24993C13.75 8.3545 14.6454 9.24993 15.75 9.24993H20.07"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M9.75 5H10.25M9.75 8H10.25M9.75 11H10.25M9.75 14H10.25M7.75 3.5L8.25 3.5M7.75 6.5H8.25M7.75 9.5H8.25M7.75 12.5H8.25M7.75 15.5H8.25"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M7.2627 21.25H10.75C11.0931 21.25 11.3343 20.9124 11.223 20.5879L10.655 18.9305C10.413 18.2244 9.74895 17.75 9.00244 17.75C8.2532 17.75 7.58738 18.2278 7.34748 18.9376L6.78902 20.5899C6.67946 20.914 6.92054 21.25 7.2627 21.25Z"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">g</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Compress "Untitled.pdf"<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Duplicate<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Quick Look<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"h-px my-1 -mx-1 bg-neutral-200"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px stroke-current left-2"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">g</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"none"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M7.75 7.757V6.75a3 3 0 0 1 3-3h6.5a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3h-.992"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M3.75 10.75a3 3 0 0 1 3-3h6.5a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3h-6.5a3 3 0 0 1-3-3v-6.5z"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">path</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">g</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Copy<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative group"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"flex cursor-default select-none items-center rounded px-2 hover:bg-blue-600 hover:text-white py-1.5 outline-none pl-8"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Share<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">width</span>=<span class="hljs-string" xt-marked="ok">"24"</span> <span class="hljs-attr" xt-marked="ok">height</span>=<span class="hljs-string" xt-marked="ok">"24"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"2"</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-4 h-4 ml-auto"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">polyline</span> <span class="hljs-attr" xt-marked="ok">points</span>=<span class="hljs-string" xt-marked="ok">"9 18 15 12 9 6"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">polyline</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">data-submenu</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute top-0 right-0 invisible mr-1 duration-200 ease-out translate-x-full opacity-0 group-hover:mr-0 group-hover:visible group-hover:opacity-100"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md animate-in slide-in-from-left-1 w-48"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative pl-8 flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Upload File<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative pl-8 flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Email File<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"h-px my-1 -mx-1 bg-neutral-200"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-blue-600 hover:text-white outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"</span> /></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M6 6h.008v.008H6V6z"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Tags<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"flex items-center h-full pl-3 mt-px space-x-2"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-red-400 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-orange-400 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-yellow-400 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-green-400 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-blue-400 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-purple-400 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"w-2.5 h-2.5 bg-gray-300 rounded-full"</span>></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">div</span> @<span class="hljs-attr" xt-marked="ok">click</span>=<span class="hljs-string" xt-marked="ok">"contextMenuOpen=false"</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"relative flex cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-red-600 hover:text-white text-red-600 outline-none pl-8 data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">svg</span> <span class="hljs-attr" xt-marked="ok">class</span>=<span class="hljs-string" xt-marked="ok">"absolute w-4 h-4 -mt-px left-2"</span> <span class="hljs-attr" xt-marked="ok">xmlns</span>=<span class="hljs-string" xt-marked="ok">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr" xt-marked="ok">fill</span>=<span class="hljs-string" xt-marked="ok">"none"</span> <span class="hljs-attr" xt-marked="ok">viewBox</span>=<span class="hljs-string" xt-marked="ok">"0 0 24 24"</span> <span class="hljs-attr" xt-marked="ok">stroke-width</span>=<span class="hljs-string" xt-marked="ok">"1.5"</span> <span class="hljs-attr" xt-marked="ok">stroke</span>=<span class="hljs-string" xt-marked="ok">"currentColor"</span>></span><span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">path</span> <span class="hljs-attr" xt-marked="ok">stroke-linecap</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">stroke-linejoin</span>=<span class="hljs-string" xt-marked="ok">"round"</span> <span class="hljs-attr" xt-marked="ok">d</span>=<span class="hljs-string" xt-marked="ok">"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"</span> /></span><span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">svg</span>></span>
<span class="hljs-tag" xt-marked="ok"><<span class="hljs-name" xt-marked="ok">span</span>></span>Move To Trash<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">span</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">template</span>></span>
<span class="hljs-tag" xt-marked="ok"></<span class="hljs-name" xt-marked="ok">div</span>></span></code></pre>
</div>
</div>
<div class="w-full min-h-[250px] overflow-scroll rounded-md w-full sm:p-10 p-4 box-border flex items-center justify-center">
<div x-data="{
commandItems: {
suggestions : [
{
title: 'Calendar',
value: 'calendar',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><rect width=\'18\' height=\'18\' x=\'3\' y=\'4\' rx=\'2\' ry=\'2\'></rect><line x1=\'16\' x2=\'16\' y1=\'2\' y2=\'6\'></line><line x1=\'8\' x2=\'8\' y1=\'2\' y2=\'6\'></line><line x1=\'3\' x2=\'21\' y1=\'10\' y2=\'10\'></line></svg>',
default: true,
},
{
title: 'Search Emoji',
value: 'emoji',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><path d=\'M8 14s1.5 2 4 2 4-2 4-2\'></path><line x1=\'9\' x2=\'9.01\' y1=\'9\' y2=\'9\'></line><line x1=\'15\' x2=\'15.01\' y1=\'9\' y2=\'9\'></line></svg>',
default: true,
},
{
title: 'Calculator',
value: 'calculator',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><rect width=\'16\' height=\'20\' x=\'4\' y=\'2\' rx=\'2\'></rect><line x1=\'8\' x2=\'16\' y1=\'6\' y2=\'6\'></line><line x1=\'16\' x2=\'16\' y1=\'14\' y2=\'18\'></line><path d=\'M16 10h.01\'></path><path d=\'M12 10h.01\'></path><path d=\'M8 10h.01\'></path><path d=\'M12 14h.01\'></path><path d=\'M8 14h.01\'></path><path d=\'M12 18h.01\'></path><path d=\'M8 18h.01\'></path></svg>',
default: true,
}
],
settings: [
{
title: 'Profile',
value: 'profile',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><path d=\'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\'></path><circle cx=\'12\' cy=\'7\' r=\'4\'></circle></svg>',
right: '⌘P',
default: true,
},
{
title: 'Billing',
value: 'billing',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><rect width=\'20\' height=\'14\' x=\'2\' y=\'5\' rx=\'2\'></rect><line x1=\'2\' x2=\'22\' y1=\'10\' y2=\'10\'></line></svg>',
right: '⌘B',
default: true,
},
{
title: 'Settings',
value: 'settings',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><path d=\'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\'></path><circle cx=\'12\' cy=\'12\' r=\'3\'></circle></svg>',
right: '⌘S',
default: true,
},
{
title: 'Keyboard Settings',
value: 'keyboard-settngs',
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\' class=\'w-4 h-4 mr-2\'><rect width=\'20\' height=\'16\' x=\'2\' y=\'4\' rx=\'2\' ry=\'2\'></rect><path d=\'M6 8h.001\'></path><path d=\'M10 8h.001\'></path><path d=\'M14 8h.001\'></path><path d=\'M18 8h.001\'></path><path d=\'M8 12h.001\'></path><path d=\'M12 12h.001\'></path><path d=\'M16 12h.001\'></path><path d=\'M7 16h10\'></path></svg>',
right: '⌘K',
default: false,
},
]
},
commandItemsFiltered: [],
commandItemActive: null,
commandItemSelected: null,
commandId: $id('command'),
commandSearch: '',
commandSearchIsEmpty() {
return this.commandSearch.length == 0;
},
commandItemIsActive(item) {
return this.commandItemActive && this.commandItemActive.value==item.value;
},
commandItemActiveNext(){
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
if(index < this.commandItemsFiltered.length-1){
this.commandItemActive = this.commandItemsFiltered[index+1];
this.commandScrollToActiveItem();
}
},
commandItemActivePrevious(){
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
if(index > 0){
this.commandItemActive = this.commandItemsFiltered[index-1];
this.commandScrollToActiveItem();
}
},
commandScrollToActiveItem(){
if(this.commandItemActive){
activeElement = document.getElementById(this.commandItemActive.value + '-' + this.commandId)
if(!activeElement) return;
newScrollPos = (activeElement.offsetTop + activeElement.offsetHeight) - this.$refs.commandItemsList.offsetHeight;
if(newScrollPos > 0){
this.$refs.commandItemsList.scrollTop=newScrollPos;
} else {
this.$refs.commandItemsList.scrollTop=0;
}
}
},
commandSearchItems() {
if(!this.commandSearchIsEmpty()){
searchTerm = this.commandSearch.replace(/\*/g, '').toLowerCase();
this.commandItemsFiltered = this.commandItems.filter(item => item.title.toLowerCase().startsWith(searchTerm));
this.commandScrollToActiveItem();
} else {
this.commandItemsFiltered = this.commandItems.filter(item => item.default);
}
this.commandItemActive = this.commandItemsFiltered[0];
},
commandShowCategory(item, index){
if(index == 0) return true;
if(typeof this.commandItems[index-1] === 'undefined') return false;
return item.category != this.commandItems[index-1].category;
},
commandCategoryCapitalize(string){
return string.charAt(0).toUpperCase() + string.slice(1);
},
commandItemsReorganize(){
commandItemsOriginal = this.commandItems;
keys = Object.keys(this.commandItems);
this.commandItems = [];
keys.forEach((key, index) => {
for(i=0; i<commandItemsOriginal[key].length; i++){
commandItemsOriginal[key][i].category = key;
this.commandItems.push( commandItemsOriginal[key][i] );
}
});
}
}" x-init="
commandItemsReorganize();
commandItemsFiltered = commandItems;
commandItemActive=commandItems[0];
$watch('commandSearch', value => commandSearchItems());
$watch('commandItemSelected', function(item){
if(item){
console.log('item:', item);
}
});
" @keydown.down="event.preventDefault(); commandItemActiveNext();" @keydown.up="event.preventDefault(); commandItemActivePrevious()" @keydown.enter="commandItemSelected=commandItemActive;" class="flex min-h-[370px] justify-center w-full max-w-xl items-start">
<div class="flex flex-col w-full h-full overflow-hidden bg-white border rounded-lg shadow-md">
<div class="flex items-center px-3 border-b">
<svg class="w-4 h-4 mr-0 text-neutral-400 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
<input type="text" x-ref="commandInput" x-model="commandSearch" class="flex w-full px-2 py-3 text-sm bg-transparent border-0 rounded-md outline-none focus:outline-none focus:ring-0 focus:border-0 placeholder:text-neutral-400 h-11 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false">
</div>
<div x-ref="commandItemsList" class="max-h-[320px] overflow-y-auto overflow-x-hidden">
<template x-for="(item, index) in commandItemsFiltered" :key="'item-' + index">
<div class="pb-1 space-y-1">
<template x-if="commandShowCategory(item, index)">
<div class="px-1 overflow-hidden text-gray-700">
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)"></div>
</div>
</template>
<template x-if="(item.default && commandSearchIsEmpty()) || !commandSearchIsEmpty()">
<div class="px-1">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<span x-html="item.icon"></span>
<span x-text="item.title"></span>
<template x-if="item.right">
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
</template>
</div>
</div>
</template>
</div>
</template><div class="pb-1 space-y-1">
<template x-if="commandShowCategory(item, index)">
<div class="px-1 overflow-hidden text-gray-700">
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)"></div>
</div>
</template><div class="px-1 overflow-hidden text-gray-700">
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)" xt-marked="ok">Suggestions</div>
</div>
<template x-if="(item.default && commandSearchIsEmpty()) || !commandSearchIsEmpty()">
<div class="px-1">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<span x-html="item.icon"></span>
<span x-text="item.title"></span>
<template x-if="item.right">
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
</template>
</div>
</div>
</template><div class="px-1">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-blue-600 text-white" id="calendar-command-2">
<span x-html="item.icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect><line x1="16" x2="16" y1="2" y2="6"></line><line x1="8" x2="8" y1="2" y2="6"></line><line x1="3" x2="21" y1="10" y2="10"></line></svg></span>
<span x-text="item.title" xt-marked="ok">Calendar</span>
<template x-if="item.right">
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
</template>
</div>
</div>
</div><div class="pb-1 space-y-1">
<template x-if="commandShowCategory(item, index)">
<div class="px-1 overflow-hidden text-gray-700">
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)"></div>
</div>
</template>
<template x-if="(item.default && commandSearchIsEmpty()) || !commandSearchIsEmpty()">
<div class="px-1">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<span x-html="item.icon"></span>
<span x-text="item.title"></span>
<template x-if="item.right">
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
</template>
</div>
</div>
</template><div class="px-1">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50" id="calculator-command-2">
<span x-html="item.icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg></span>
<span x-text="item.title" xt-marked="ok">Calculator</span>
<template x-if="item.right">
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
