andrewwallacespeckle
c2a95b484f
* New Text Styles. Initial FE2 changes * More fe2 styling classes * Minor update * Minor update * Fix build * More updates for discussion * More styling updates * Minor updates to inputs * More text updates * More font class swapping * Revert dui3 changes * Confirmed Lineheights * Add story files for new text styles * Minor copy changes * Minor typo * andrew/web-1371-misalignment-in-account-dropdown * andrew/web-1374-settings-text-styles-are-not-right * andrew/web-1375-nav-texts-should-be-14px * andrew/web-1376-decrease-size-of-versions-header * andrew/web-1377-version-card-title * semibold>medium * Measure mode * Changes from PR * Tweaked nav menu * Revert prose change. Add prose-sm --------- Co-authored-by: Mike Tasset <mike.tasset@gmail.com>
33 lines
922 B
Vue
33 lines
922 B
Vue
<template>
|
|
<div class="shadow rounded-md p-1 flex flex-col justify-center cursor-pointer">
|
|
<div class="h-20 w-full">
|
|
<PreviewImage :preview-url="version.previewUrl" />
|
|
</div>
|
|
<div
|
|
v-tippy="createdAt.full"
|
|
class="bg-foundation-focus inline-block rounded-md px-2 text-body-2xs font-medium truncate text-center py-1"
|
|
>
|
|
<span>
|
|
{{ createdAt.relative }}
|
|
</span>
|
|
<br />
|
|
{{ isNewest ? 'New' : 'Old' }} version
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { ViewerModelVersionCardItemFragment } from '~~/lib/common/generated/gql/graphql'
|
|
|
|
const props = defineProps<{
|
|
version: ViewerModelVersionCardItemFragment
|
|
isNewest: boolean
|
|
}>()
|
|
|
|
const createdAt = computed(() => {
|
|
return {
|
|
full: formattedFullDate(props.version.createdAt),
|
|
relative: formattedRelativeDate(props.version.createdAt, { capitalize: true })
|
|
}
|
|
})
|
|
</script>
|