46 lines
2.3 KiB
Vue
46 lines
2.3 KiB
Vue
<template>
|
|
<div class="rounded-xl border border-gray-300 hover:border-primary hover:shadow-lg text-card-foreground bg-surface">
|
|
<div class="flex flex-col space-y-1.5 p-6">
|
|
<h3 class="text-lg font-semibold leading-none tracking-tight">Referral Link</h3>
|
|
</div>
|
|
<div class="p-6 pt-0 space-y-4">
|
|
<p class="text-sm text-gray-600 font-medium">Share your referral link and earn commissions from
|
|
referred users!</p>
|
|
<div class="flex gap-2">
|
|
<InputText class="w-full" readonly type="text" :value="url" @click="copyToClipboard" />
|
|
<button class="btn btn-primary" @click="copyToClipboard" :disabled="isCopied">
|
|
<svg v-if="!isCopied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true">
|
|
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
|
|
</svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true">
|
|
<path d="M22 11.02V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<path d="M22 4L12 14.01l-3-3"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import { ref } from 'vue';
|
|
const auth = useAuthStore()
|
|
const isCopied = ref(false)
|
|
const url = location.origin + '/ref/' + auth.user?.username
|
|
const copyToClipboard = ($event: MouseEvent) => {
|
|
// ($event.target as HTMLInputElement)?.select
|
|
if ($event.target instanceof HTMLInputElement) {
|
|
$event.target.select()
|
|
}
|
|
navigator.clipboard.writeText(url)
|
|
isCopied.value = true
|
|
setTimeout(() => {
|
|
isCopied.value = false
|
|
}, 3000)
|
|
}
|
|
</script> |