remove redundant class and add copied tooltip/open in new tab

resources/views/components/newtab.blade.php

@@ -0,0 +1,12 @@
+<svg class="w-6 h-6 fill-primary"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg">
+    <g stroke-width="0"></g>
+    <g stroke-linecap="round"
+        stroke-linejoin="round"></g>
+    <g>
+        <path fill-rule="evenodd"
+            d="M5,2 L7,2 C7.55228475,2 8,2.44771525 8,3 C8,3.51283584 7.61395981,3.93550716 7.11662113,3.99327227 L7,4 L5,4 C4.48716416,4 4.06449284,4.38604019 4.00672773,4.88337887 L4,5 L4,19 C4,19.5128358 4.38604019,19.9355072 4.88337887,19.9932723 L5,20 L19,20 C19.5128358,20 19.9355072,19.6139598 19.9932723,19.1166211 L20,19 L20,17 C20,16.4477153 20.4477153,16 21,16 C21.5128358,16 21.9355072,16.3860402 21.9932723,16.8833789 L22,17 L22,19 C22,20.5976809 20.75108,21.9036609 19.1762728,21.9949073 L19,22 L5,22 C3.40231912,22 2.09633912,20.75108 2.00509269,19.1762728 L2,19 L2,5 C2,3.40231912 3.24891996,2.09633912 4.82372721,2.00509269 L5,2 L7,2 L5,2 Z M21,2 L21.081,2.003 L21.2007258,2.02024007 L21.2007258,2.02024007 L21.3121425,2.04973809 L21.3121425,2.04973809 L21.4232215,2.09367336 L21.5207088,2.14599545 L21.5207088,2.14599545 L21.6167501,2.21278596 L21.7071068,2.29289322 L21.7071068,2.29289322 L21.8036654,2.40469339 L21.8036654,2.40469339 L21.8753288,2.5159379 L21.9063462,2.57690085 L21.9063462,2.57690085 L21.9401141,2.65834962 L21.9401141,2.65834962 L21.9641549,2.73400703 L21.9641549,2.73400703 L21.9930928,2.8819045 L21.9930928,2.8819045 L22,3 L22,3 L22,9 C22,9.55228475 21.5522847,10 21,10 C20.4477153,10 20,9.55228475 20,9 L20,5.414 L13.7071068,11.7071068 C13.3466228,12.0675907 12.7793918,12.0953203 12.3871006,11.7902954 L12.2928932,11.7071068 C11.9324093,11.3466228 11.9046797,10.7793918 12.2097046,10.3871006 L12.2928932,10.2928932 L18.584,4 L15,4 C14.4477153,4 14,3.55228475 14,3 C14,2.44771525 14.4477153,2 15,2 L21,2 Z">
+        </path>
+    </g>
+</svg>

resources/views/components/tooltip.blade.php

@@ -0,0 +1,11 @@
+<div {{ $attributes }}
+    class="px-2 py-1 rounded text-xs cursor-default z-50 absolute -top-8 left-1/2 bg-primary text-white"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="opacity-0 scale-90"
+    x-transition:enter-end="opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-300"
+    x-transition:leave-start="opacity-100 scale-100"
+    x-transition:leave-end="opacity-0 scale-90"
+    x-cloak>
+    Copied
+</div>

resources/views/homepage.blade.php

@@ -109,7 +109,7 @@
 					</p>
 
 					<select
-						class="w-full py-4 text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
+						class="w-full text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
 						name="expiry"
 						id="upload-expiry"
 						x-model="currentBundle"

resources/views/partials/button.blade.php

@@ -3,7 +3,7 @@
 @endif
 
 <button
-    class="inline-flex items-center w-full py-1 rounded bg-primary hover:bg-primary-light text-center text-white text-base text-center"
+    class="inline-flex items-center w-full py-1 rounded bg-primary hover:bg-primary-light text-white text-base text-center"
     x-on:click="{{ $action }}()"
 >
     <p class="w-10/12 {{ $way == 'left' ? 'order-last' : '' }}">{{ $text }}</p>

resources/views/upload.blade.php

@@ -22,6 +22,10 @@
 			completed: false,
 			step: 0,
 			maxFiles: maxFiles,
+			copynotify: {
+				preview: false,
+				direct_download: false,
+			},
 			modal: {
 				show: false,
 				text: 'test'
@@ -340,12 +344,33 @@
 			},
 
 			selectCopy: function(el) {
-				el.select();
-
 				if (navigator.clipboard) {
 					navigator.clipboard.writeText(el.value)
 					.then(() => {
-						//alert("Copied to clipboard");
+						// check if the element is preview or direct download
+						if (el.id == 'copy-preview') {
+							// check if its already set to true
+							if (this.copynotify.preview == false) {
+								this.copynotify.preview = true
+								// timeout in 2s
+								setTimeout(() => {
+									// if still true, set it to false
+									if (this.copynotify.preview == true) {
+										this.copynotify.preview = false
+									}
+								}, 2000)
+							}
+						}
+						else if (el.id == 'copy-direct-download') {
+							if (this.copynotify.direct_download == false) {
+								this.copynotify.direct_download = true
+								setTimeout(() => {
+									if (this.copynotify.direct_download == true) {
+										this.copynotify.direct_download = false
+									}
+								}, 2000)
+							}
+						}
 					});
 				}
 			},
@@ -629,28 +654,36 @@
 
 				{{-- STEP 3 --}}
 				<template x-if="step == 3">
-					<div class="" x-show="step == 3">
+					<div  x-show="step == 3">
 						<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
 							@lang('app.download-links')
 						</h2>
 
 						{{-- Preview link --}}
-						<div class="flex flex-wrap items-center">
+						<div class="flex flex-wrap items-center relative">
 							<div class="w-1/3 text-right px-2">
 								@lang('app.preview-link')
 							</div>
-							<div class="w-2/3 shadow">
+							<x-tooltip x-show="copynotify.preview" x-on:click.away="copynotify.preview = false" />
-								<input x-model="bundle.preview_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+							<div class="w-2/3 shadow flex items-center">
+								<input id="copy-preview" x-model="bundle.preview_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+								<a class="p-1" title="Open in a new Tab" :href="bundle.preview_link" target="_blank">
+									<x-newtab />
+								</a>
 							</div>
 						</div>
 
 						{{-- Direct download link --}}
-						<div class="flex flex-wrap items-center mt-5">
+						<div class="flex flex-wrap items-center mt-5 relative">
 							<div class="w-1/3 text-right px-2">
 								@lang('app.direct-link')
 							</div>
-							<div class="w-2/3 shadow">
+							<x-tooltip x-show="copynotify.direct_download" x-on:click.away="copynotify.direct_download = false" />
-								<input x-model="bundle.download_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+							<div class="w-2/3 flex items-center shadow">
+								<input id="copy-direct-download" x-model="bundle.download_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
+								<a class="p-1" title="Open in a new Tab" :href="bundle.download_link" target="_blank">
+									<x-newtab />
+								</a>
 							</div>
 						</div>