andrewwallacespeckle
8ca5c99aa1
* Initial Sidebar Implementation * Updates to sidebar * Use NuxtLinks in FE2 not UI-Components * Move sidebar to component * Active State * Responsive menu * Update sidebar links * Add Projects Page. Improve routing * Small fixes * Responsive fixes * TopBar refactor * Topbar improvements * User Menu Updates * Responsive/Topbar improvements * Various minor changes * Update sidebar icon * Revert dui3 change * Potential fix for login issue * Fix login issue. Improve empty state for projects * Add Project & Workspace Invites to notification * Revert "Add Project & Workspace Invites to notification" This reverts commit ac33dd0cb1fc47cd5c6e2925ee2a6bbea328d94f. * Updates to Project Invite Notifications * Add scroll to Sidebar component * Dashboard Card targets * Changes to logo * Small responsive fixes * Remove unused alias * Minor tidy ups * Updates from CR * Dashboard Header * Add padding to non-collapsible headings * Add Project empty state
42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<template>
|
|
<NuxtLink :to="tutorial.url" target="_blank">
|
|
<div
|
|
class="bg-foundation border border-outline-3 rounded-xl flex flex-col overflow-hidden hover:border-outline-5 transition"
|
|
>
|
|
<div
|
|
:style="{ backgroundImage: `url(${tutorial.featureImage})` }"
|
|
class="bg-foundation-page bg-cover bg-center w-full h-32"
|
|
/>
|
|
<div class="p-5 pb-4">
|
|
<h3 v-if="tutorial.title" class="text-body-2xs text-foreground truncate">
|
|
{{ tutorial.title }}
|
|
</h3>
|
|
<p class="text-body-3xs text-foreground-2 mt-2">
|
|
<span v-tippy="updatedAt.full">
|
|
{{ updatedAt.relative }}
|
|
</span>
|
|
<template v-if="tutorial.readingTime">
|
|
<span class="pl-1 pr-2">•</span>
|
|
{{ tutorial.readingTime }}m read
|
|
</template>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { TutorialItem } from '~~/lib/dashboard/helpers/types'
|
|
|
|
const props = defineProps<{
|
|
tutorial: TutorialItem
|
|
}>()
|
|
|
|
const updatedAt = computed(() => {
|
|
return {
|
|
full: formattedFullDate(props.tutorial.publishedAt),
|
|
relative: formattedRelativeDate(props.tutorial.publishedAt, { capitalize: true })
|
|
}
|
|
})
|
|
</script>
|