explorer-app/components/Project/ProjectSecurityAudit.vue

<script setup lang="ts">
defineProps<{
  auditName: string
  auditUrl?: string
  date?: string
}>()
</script>

<template>
  <div
    flex
    justify-between
    lg:grid
    lg:grid-cols-2
    rounded-full
    py-12px
    px-16px
    bg-app-bg-audits-card
  >
    <div
      grid
      grid-cols-3
      w-full
    >
      <h2
        text="14px lg:16px"
        leading-20px
        font-700
        col-span="3 lg:2"
      >
        {{ auditName }}
      </h2>
      <h2
        text-14px
        leading-20px
        hidden
        lg:block
      >
        Overview of smart contracts
      </h2>
    </div>
    <div
      flex
      items-center
      justify-end
      gap="16px lg:80px"
      whitespace-nowrap
    >
      <h2
        text-14px
        leading-20px
      >
        {{ date ? formatDate(date) : 'N/A' }}
      </h2>
      <NuxtLink
        flex
        items-center
        gap-4px
        :to="auditUrl"
        external
        target="_blank"
        text-14px
        text-app-text-grey
        leading-20px
        hover:underline
      ><p
        hidden
        lg:block
      >
        More info
      </p> <UnoIcon
        i-ic-twotone-open-in-new
        text-22px
      /></NuxtLink>
    </div>
  </div>
</template>