Fact list

import clsx from 'clsx'
import type React from 'react'
import { CopyButton } from './copy-button'
import { TextLink } from './text'

export type Fact = {
  key?: string
  label: string
  value?: React.ReactNode
  href?: string
  mono?: boolean
  muted?: boolean
  copy?: boolean | string
  span?: boolean
}

const columnClasses = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 sm:grid-cols-2',
  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
}

export function FactList({
  facts,
  layout = 'grid',
  columns = 3,
  emptyLabel = 'Not set',
  className,
  ...props
}: {
  facts: Fact[]
  layout?: 'grid' | 'rows'
  columns?: 1 | 2 | 3 | 4
  emptyLabel?: string
} & Omit<React.ComponentPropsWithoutRef<'dl'>, 'children'>) {
  let rows = layout === 'rows'

  return (
    <dl
      {...props}
      className={clsx(
        className,
        rows ? 'text-base/6 sm:text-sm/6' : ['grid gap-x-8 gap-y-4', columnClasses[columns]]
      )}
    >
      {facts.map((fact) => {
        let empty = fact.value === undefined || fact.value === null || fact.value === ''
        let copy = fact.copy === true ? (typeof fact.value === 'string' ? fact.value : undefined) : fact.copy || undefined
        let text = empty ? emptyLabel : fact.value
        let plain = empty || typeof fact.value === 'string' || typeof fact.value === 'number'

        let content = fact.href && !empty ? <TextLink href={fact.href}>{text}</TextLink> : text
        let tone =
          empty || fact.muted
            ? 'text-zinc-500 dark:text-zinc-400'
            : clsx('text-zinc-950 dark:text-white', rows && 'font-medium')

        return (
          <div
            key={fact.key ?? fact.label}
            className={clsx(
              'min-w-0',
              rows &&
                'flex items-baseline justify-between gap-4 border-t border-zinc-950/5 py-2.5 first:border-none first:pt-0 last:pb-0 dark:border-white/5',
              !rows && fact.span && (columns === 4 ? 'sm:col-span-2 lg:col-span-4' : columns === 3 ? 'sm:col-span-2 lg:col-span-3' : columns === 2 ? 'sm:col-span-2' : '')
            )}
          >
            <dt
              className={clsx(
                'text-zinc-500 dark:text-zinc-400',
                rows ? 'shrink-0' : 'text-sm/6 sm:text-xs/6'
              )}
            >
              {fact.label}
            </dt>
            {!plain ? (
              <dd className={rows ? 'flex min-w-0 flex-wrap justify-end gap-1' : 'mt-0.5'}>{fact.value}</dd>
            ) : copy && !empty ? (
              <dd
                className={clsx(
                  'flex items-center gap-1',
                  rows ? 'min-w-0' : 'text-base/6 sm:text-sm/6',
                  fact.mono && 'font-mono',
                  tone
                )}
              >
                <span className="truncate">{content}</span>
                <CopyButton text={copy} label={`Copy ${fact.label.toLowerCase()}`} />
              </dd>
            ) : (
              <dd
                className={clsx(
                  'truncate',
                  !rows && 'text-base/6 sm:text-sm/6',
                  fact.mono && !empty && 'font-mono',
                  tone
                )}
              >
                {content}
              </dd>
            )}
          </div>
        )
      })}
    </dl>
  )
}

<script lang="ts">
export type Fact = {
  key?: string
  label: string
  value?: string | number | null
  href?: string
  mono?: boolean
  muted?: boolean
  copy?: boolean | string
  span?: boolean
}
</script>

<script setup lang="ts">
import { computed, useSlots } from 'vue'
import CopyButton from './copy-button.vue'
import TextLink from './text-link.vue'

const props = withDefaults(
  defineProps<{
    facts: Fact[]
    layout?: 'grid' | 'rows'
    columns?: 1 | 2 | 3 | 4
    emptyLabel?: string
  }>(),
  { layout: 'grid', columns: 3, emptyLabel: 'Not set' }
)

const slots = useSlots()

const columnClasses = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 sm:grid-cols-2',
  3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
  4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
}

const spanClasses = {
  1: '',
  2: 'sm:col-span-2',
  3: 'sm:col-span-2 lg:col-span-3',
  4: 'sm:col-span-2 lg:col-span-4',
}

const rows = computed(() => props.layout === 'rows')

function isEmpty(fact: Fact) {
  return fact.value === undefined || fact.value === null || fact.value === ''
}

function copyText(fact: Fact) {
  if (fact.copy === true) return isEmpty(fact) ? undefined : String(fact.value)
  return fact.copy || undefined
}

function slotName(fact: Fact) {
  return fact.key && slots[fact.key] ? fact.key : undefined
}

function safeHref(fact: Fact) {
  return fact.href && /^(https?:|mailto:|tel:|\/|#)/i.test(fact.href) ? fact.href : undefined
}

function tone(fact: Fact) {
  return isEmpty(fact) || fact.muted
    ? 'text-zinc-500 dark:text-zinc-400'
    : ['text-zinc-950 dark:text-white', rows.value && 'font-medium']
}
</script>

<template>
  <dl :class="rows ? 'text-base/6 sm:text-sm/6' : ['grid gap-x-8 gap-y-4', columnClasses[columns]]">
    <div
      v-for="fact in facts"
      :key="fact.key ?? fact.label"
      :class="[
        'min-w-0',
        rows &&
          'flex items-baseline justify-between gap-4 border-t border-zinc-950/5 py-2.5 first:border-none first:pt-0 last:pb-0 dark:border-white/5',
        !rows && fact.span && spanClasses[columns],
      ]"
    >
      <dt :class="['text-zinc-500 dark:text-zinc-400', rows ? 'shrink-0' : 'text-sm/6 sm:text-xs/6']">
        {{ fact.label }}
      </dt>
      <dd v-if="slotName(fact)" :class="rows ? 'flex min-w-0 flex-wrap justify-end gap-1' : 'mt-0.5'">
        <slot :name="slotName(fact)!" :fact="fact" />
      </dd>
      <dd
        v-else-if="copyText(fact) && !isEmpty(fact)"
        :class="['flex items-center gap-1', rows ? 'min-w-0' : 'text-base/6 sm:text-sm/6', fact.mono && 'font-mono', tone(fact)]"
      >
        <span class="truncate">
          <TextLink v-if="safeHref(fact)" :href="safeHref(fact)!">{{ fact.value }}</TextLink>
          <template v-else>{{ fact.value }}</template>
        </span>
        <CopyButton :text="copyText(fact)!" :label="`Copy ${fact.label.toLowerCase()}`" />
      </dd>
      <dd v-else :class="['truncate', !rows && 'text-base/6 sm:text-sm/6', fact.mono && !isEmpty(fact) && 'font-mono', tone(fact)]">
        <template v-if="isEmpty(fact)">{{ emptyLabel }}</template>
        <TextLink v-else-if="safeHref(fact)" :href="safeHref(fact)!">{{ fact.value }}</TextLink>
        <template v-else>{{ fact.value }}</template>
      </dd>
    </div>
  </dl>
</template>