explorer-app/components/Project/ProjectActivityLaunch.vue

<script setup lang="ts">
defineProps<{
  network?: string
  date?: string
  launchType?: string
  to?: string
}>()
</script>

<template>
  <div
    flex
    items-start
    gap-18px
  >
    <svg
      width="30"
      height="153"
      viewBox="0 0 30 153"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12.5002 5.01788L12.5012 149.5"
        stroke="white"
        stroke-dasharray="1 4"
      />
      <circle
        cx="13"
        cy="6"
        r="6"
        fill="white"
      />
      <rect
        y="129"
        width="30"
        height="24"
        fill="url(#paint0_linear_558_22)"
      />
      <defs>
        <linearGradient
          id="paint0_linear_558_22"
          x1="15"
          y1="129"
          x2="15"
          y2="150.5"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-opacity="0" />
          <stop offset="1" />
        </linearGradient>
      </defs>
    </svg>
    <div
      flex
      flex-col
      gap-8px
    >
      <div
        flex
        flex-col
      >
        <span
          text-14px
          font-700
        >{{ network }}</span>
        <span
          text-14px
          font-400
        >{{ date }}</span>
      </div>
      <div
        flex
        flex-col
      >
        <span
          text-14px
          font-400
        >{{ 'Launch' }}</span>
        <span
          text-14px
          font-400
          text-app-text-grey
        >{{ launchType }}</span>
      </div>
      <NuxtLink
        underline
        underline-offset-4
        :to="to"
      >
        {{ 'Learn more' }}
      </NuxtLink>
    </div>
  </div>
</template>