You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

74 lines
4.3 KiB

<div class="bg-tertiary h-auto w-36 cursor-pointer rounded-md p-3 transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl sm:w-44 md:w-[139px] lg:w-40">
<!-- File Header -->
<div class="flex flex-row flex-nowrap items-center justify-between">
<!--We will add this and style it when we add multi-delete, for now eggplant
<input class="accent-blue-700 rounded-md h-3 w-4 md:h-4 md:w-5 lg:h-4 lg:w-4" type="checkbox" />
-->
<span><%= settingsDatabase.appEmoji ? settingsDatabase.appEmoji : '🍆' %></span>
<div class="relative">
<!-- File Dropdown Button -->
<button class="dropdownFileBtn relative text-color-secondary">
<svg class="relative h-3 w-3 md:h-4 md:w-4 lg:h-4 lg:w-4" 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">
<circle class="relative" cx="12" cy="12" r="1"></circle>
<circle class="relative" cx="12" cy="5" r="1"></circle>
<circle class="relative" cx="12" cy="19" r="1"></circle>
</svg>
</button>
<!-- End File Dropdown Button -->
<!-- File Dropdown -->
<div class="dropdownFile duration-250 bg-tertiary invisible absolute top-6 right-0 z-10 h-auto w-36 translate-y-6 rounded-lg opacity-0 shadow-lg transition ease-linear">
<!-- File Dropdown Menu-->
<div class="grid grid-cols-1 px-3 py-2 space-y-2 shadow-xl">
<button onClick="copyLink('${id}')" data-tooltip-target="${id}-copy" data-tooltip-trigger="click" class="tooltip dropdown-item w-full rounded-md p-2 text-color-primary hover:bg-tertiary-hover">
<i data-lucide="link" class="w-4 h-4 mr-2 inline"></i>
Copy Link
</button>
<div id="${id}-copy" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-color-primary bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip bg-forminput">
Link copied to clipboard!
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button onClick="deleteItem('${id}', '${deleteId}')" data-tooltip-target="${id}-delete" data-tooltip-trigger="click"
class="tooltip dropdown-item w-full rounded-md p-2 text-color-primary hover:bg-tertiary-hover">
<i data-lucide="trash" class="w-4 h-4 mr-2 inline"></i>
Delete
</button>
<div id="${id}-delete" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-color-primary bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip bg-forminput">
Item is being deleted, page will refresh when finished.
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</div>
<!-- End File Dropdown Menu-->
</div>
<!-- File Dropdown -->
</div>
</div>
<!-- End File Header -->
<div class="space-y-3">
<a target="_blank" href='${itemURL}'>
<div class="mt-2 flex flex-wrap items-center justify-center">
<img class="h-20 w-auto rounded-md object-cover object-center md:h-24 lg:h-24"
src='${itemURL}/thumbnail' alt=${originalName} />
</div>
</a>
<div class="has-name-tooltip text-center">
<a target="_blank" href='${itemURL}' class="text-base font-medium text-color-primary hover:text-color-accent md:text-lg lg:text-lg">
<span class='name-tooltip rounded shadow-lg p-2 bg-primary text-color-primary -mt-8'>${originalName}</span>
<p class="truncate">${originalName}</p>
</a>
<div class="text-xs text-color-secondary md:text-sm lg:text-sm">
${timeStamp}
</div>
<div class="text-xs text-color-secondary">
${size}
</div>
</div>
</div>
</div>