SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use icons instead of timestamps in Timeline component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-29 02:33:46 +02:00
parent 936f3e7057
commit 0bf2fb9de2
2 changed files with 40 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/views/CareerPathView.vue
View file

@ -1,11 +1,26 @@
<script setup lang="ts">
import TimelineList from "@/components/TimelineList.vue";
import TimelineItem from "@/components/TimelineItem.vue";
import WhiskeyGlassIcon from "@/assets/icons/WhiskeyGlassIcon.vue";
import TreeIcon from "@/assets/icons/TreeIcon.vue";
import CarIcon from "@/assets/icons/CarIcon.vue";
import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
import TextBlock from "@/components/TextBlock.vue";
</script>
<template>
<TextBlock>
<h1>{{ $route.meta.title }}</h1>
<p>
Viktor's had many different jobs in the past, some of which where very
formative, other's just paid the bills.
</p>
</TextBlock>
<TimelineList>
<TimelineItem datetime="2011-11-11">
<TimelineItem>
<template #icon><WhiskeyGlassIcon /></template>
<template #headline>Bartender</template>
<template #content>
<p>
@ -22,7 +37,8 @@ import TimelineItem from "@/components/TimelineItem.vue";
</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><TreeIcon /></template>
<template #headline>Lumberjack</template>
<template #content>
<p>
@ -32,7 +48,8 @@ import TimelineItem from "@/components/TimelineItem.vue";
</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><CarIcon /></template>
<template #headline>Car Mechanic</template>
<template #content>
<p>
@ -41,13 +58,15 @@ import TimelineItem from "@/components/TimelineItem.vue";
</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><HelmetSafetyIcon /></template>
<template #headline>Construction Worker</template>
<template #content>
<p>Later, he worked as a construction worker.</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><BoxesIcon /></template>
<template #headline>Werehouse Worker</template>
<template #content>
<p>