From 151e77296fbc80b36649c89604adde071f6139a3 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 10 Oct 2022 15:57:14 +1100
Subject: Add BaseLine.vue

---
 src/components/BaseLine.vue | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/BaseLine.vue

(limited to 'src/components/BaseLine.vue')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
new file mode 100644
index 0000000..f0008f9
--- /dev/null
+++ b/src/components/BaseLine.vue
@@ -0,0 +1,38 @@
+<template>
+<div class="bg-stone-900 text-stone-50 flex" :class="{'flex-col': vert}">
+	<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
+		<div :style="labelStyles">{{p.label}}</div>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, PropType} from 'vue';
+
+// Props
+const props = defineProps({
+	vert: {type: Boolean, required: true},
+	timelineData: {type: Object as PropType<number[][]>, required: true},
+});
+
+// Time periods to represent
+const periods = ref([
+	{label: 'One', len: 1},
+	{label: 'Two', len: 2},
+	{label: 'Three', len: 1},
+]);
+
+// Styles
+function periodStyles(period){
+	return {
+		outline: '1px solid gray',
+		flexGrow: period.len,
+	};
+}
+const labelStyles = computed(() => ({
+	transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none',
+	whiteSpace: 'nowrap',
+	width: props.vert ? '40px' : 'auto',
+	padding: props.vert ? '0' : '4px',
+}));
+</script>
-- 
cgit v1.2.3