Timeline

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

const items: TimelineItem[] = [
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description:
      'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
    icon: RocketIcon,
    value: 'kickoff'
  },
  {
    date: 'Mar 22, 2025',
    title: 'Design Phase',
    description:
      'User research and design workshops. Created wireframes and prototypes for user testing.',
    icon: SignIcon,
    value: 'design'
  },
  {
    date: 'Mar 29, 2025',
    title: 'Development Sprint',
    description:
      'Frontend and backend development. Implemented core features and integrated with APIs.',
    icon: MoreMIcon,
    value: 'development'
  },
  {
    date: 'Apr 5, 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.',
    icon: InfoIcon,
    value: 'deployment'
  }
]

const active = ref(0)

// Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => {
  setInterval(() => {
    active.value = (active.value + 1) % items.length
  }, 2000)
})
</script>

<template>
  <B24Timeline v-model="active" :items="items" class="w-[384px]" />
</template>

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

const items: TimelineItem[] = [
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    icon: RocketIcon,
    value: 'kickoff'
  },
  {
    date: 'Mar 22, 2025',
    title: 'Design Phase',
    icon: SignIcon,
    value: 'design'
  },
  {
    date: 'Mar 29, 2025',
    title: 'Development Sprint',
    icon: MoreMIcon,
    value: 'development'
  },
  {
    date: 'Apr 5, 2025',
    title: 'Testing & Deployment',
    icon: InfoIcon,
    value: 'deployment'
  }
]
</script>

<template>
  <B24Timeline
    :items="items"
    :default-value="2"
    :b24ui="{ item: 'even:flex-row-reverse even:-translate-x-[calc(100%-2rem)] even:text-right' }"
    class="translate-x-[calc(50%-1rem)]"
  />
</template>

<script setup lang="ts">
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import InfoIcon from '@bitrix24/b24icons-vue/button/InfoIcon'

const items = [
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    subtitle: 'Project Initiation',
    description:
      'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
    icon: RocketIcon,
    value: 'kickoff'
  },
  {
    date: 'Mar 22, 2025',
    title: 'Design Phase',
    description:
      'User research and design workshops. Created wireframes and prototypes for user testing.',
    icon: SignIcon,
    value: 'design'
  },
  {
    date: 'Mar 29, 2025',
    title: 'Development Sprint',
    description:
      'Frontend and backend development. Implemented core features and integrated with APIs.',
    icon: MoreMIcon,
    value: 'development',
    slot: 'development' as const,
    developers: [
      {
        src: 'https://github.com/bitrix-tools.png'
      },
      {
        src: 'https://github.com/bitrix24.png'
      }
    ]
  },
  {
    date: 'Apr 5, 2025',
    title: 'Testing & Deployment',
    description: 'QA testing and performance optimization. Deployed the application to production.',
    icon: InfoIcon,
    value: 'deployment'
  }
] satisfies TimelineItem[]
</script>

<template>
  <B24Timeline :items="items" :default-value="2" class="w-[384px]">
    <template #development-title="{ item }">
      <div class="flex items-center gap-1">
        <span>{{ item.title }}</span>

        <B24AvatarGroup size="2xs">
          <B24Avatar
            v-for="(developer, index) of item.developers"
            :key="index"
            v-bind="developer"
          />
        </B24AvatarGroup>
      </div>
    </template>
  </B24Timeline>
</template>

<script lang="ts" setup>
import type { TimelineItem } from '@bitrix24/b24ui-nuxt'
import { useTimeAgo } from '@vueuse/core'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'

const items = [
  {
    username: 'Employee Name',
    date: '2025-05-24T14:58:55Z',
    action: 'opened this',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  },
  {
    username: 'Employee Name',
    date: '2025-05-26T19:30:14+02:00',
    action: 'marked this pull request as ready for review',
    icon: RocketIcon
  },
  {
    username: 'Assistant Name',
    date: '2025-05-27T11:01:20Z',
    action: 'commented on this',
    description:
      "I've made a few changes, let me know what you think! Basically I updated the design, removed unnecessary divs, used Avatar component for the indicator since it supports icon already.",
    avatar: {
      src: '/b24ui/avatar/assistant.png'
    }
  },
  {
    username: 'Employee Name',
    date: '2025-05-27T11:01:20Z',
    action: 'commented on this',
    description: 'Looks great! Good job on cleaning it up.',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  },
  {
    username: 'Assistant Name',
    date: '2025-05-27T11:01:20Z',
    action: 'merged this',
    icon: MoreMIcon
  }
] satisfies TimelineItem[]
</script>

<template>
  <B24Timeline
    :items="items"
    size="xs"
    :b24ui="{
      date: 'float-end ms-1',
      description:
        'px-3 py-2 ring ring-(--ui-color-g-glass-grey-bg-2) mt-2 rounded-md text-(--b24ui-typography-description-color)'
    }"
    class="w-[384px]"
  >
    <template #title="{ item }">
      <span>{{ item.username }}</span>
      <span class="font-normal text-(--b24ui-typography-label-color)">&nbsp;{{ item.action }}</span>
    </template>

    <template #date="{ item }">
      {{ useTimeAgo(new Date(item.date)) }}
    </template>
  </B24Timeline>
</template>