49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
const { route = "" } = defineProps<{
|
|
iconImageSource: string,
|
|
name: string,
|
|
route?: string,
|
|
}>();
|
|
|
|
const onClickExternalShortcut = () => {
|
|
window.open(route, '_blank')?.focus();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="full-width cursor-pointer rounded-50 link-btn shadow-4"
|
|
@click="onClickExternalShortcut"
|
|
>
|
|
<div class="row items-center q-px-lg q-py-xs rounded-50">
|
|
<span class="col text-uppercase text-bold">
|
|
{{ name }}
|
|
</span>
|
|
|
|
<q-icon
|
|
round
|
|
color="accent"
|
|
size="md"
|
|
:name="iconImageSource"
|
|
class="col-auto"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style
|
|
scoped
|
|
lang="css"
|
|
>
|
|
.link-btn {
|
|
background-color: var(--q-dark);
|
|
border: 2px solid var(--q-accent);
|
|
}
|
|
|
|
.link-btn:hover {
|
|
background-color: var(--q-accent2);
|
|
}
|
|
</style> |