<template>
  <div>
    <div class="flow-root">
      <ul>
        <li v-for="timeline in timelineItems" v-bind:key="timeline.label">
          <div class="relative pb-1">
            <span
              class="absolute left-1 top-0.5 -ml-px h-full w-0.5 bg-indigo-600"
              aria-hidden="true"
            ></span>
            <div class="relative ml-3">
              <div class="min-w-0 mb-1.5">
                <div>
                  <p class="text-sm text-gray-400">
                    {{ timeline.label }}
                  </p>
                </div>
                <div><span class="text-sm text-gray-400">12/25</span></div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CSmallTimeline",
  props: {
    timelineItems: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style></style>
