andrewwallacespeckle
45d7d4d02b
* Tutorials Page * Add tutorials page * Update Page.vue * Changes from PR * Updates from call * Remove page added in error * Update Page.vue * Remove shallowref * Update mixpanel name
41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<template>
|
|
<NuxtLink :to="tutorialItem.url" target="_blank" @click="trackClick">
|
|
<div
|
|
class="bg-foundation border border-outline-3 rounded-xl flex flex-col overflow-hidden hover:border-outline-5 transition"
|
|
>
|
|
<NuxtImg
|
|
:src="tutorialItem.image"
|
|
:alt="tutorialItem.title"
|
|
class="aspect-video w-full object-cover"
|
|
width="400"
|
|
height="225"
|
|
/>
|
|
<div class="p-5">
|
|
<h3 class="text-body-2xs text-foreground truncate">
|
|
{{ tutorialItem.title }}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { TutorialItem } from '~/lib/dashboard/helpers/types'
|
|
import { useMixpanel } from '~~/lib/core/composables/mp'
|
|
|
|
const mixpanel = useMixpanel()
|
|
|
|
const props = defineProps<{
|
|
tutorialItem: TutorialItem
|
|
source: 'tutorials' | 'dashboard'
|
|
}>()
|
|
|
|
const trackClick = () => {
|
|
mixpanel.track('Tutorial clicked', {
|
|
title: props.tutorialItem.title,
|
|
url: props.tutorialItem.url,
|
|
source: props.source
|
|
})
|
|
}
|
|
</script>
|