Embed

import * as React from "react"

import { cn } from "@/lib/utils"

export interface EmbedProps extends Omit<React.ComponentProps<"div">, "color"> {
  /** Accent colour of the left bar. Any CSS colour; defaults to the brand. */
  color?: string
}

const Embed = React.forwardRef<HTMLDivElement, EmbedProps>(
  ({ className, children, color, style, ...props }, ref) => (
    <div
      ref={ref}
      /*
       * SAFETY: `CSSProperties` has no index signature for custom properties,
       * but React forwards unknown `--*` keys to the style attribute verbatim,
       * so the extra key is written out exactly as spelled here.
       */
      style={
        color
          ? ({ ...style, "--newt-embed-color": color } as React.CSSProperties)
          : style
      }
      className={cn(
        "flex max-w-[var(--newt-embed-max-width)] overflow-hidden rounded-md border-s-4 border-[var(--newt-embed-color,var(--newt-brand))] bg-newt-bg-elevated",
        className
      )}
      {...props}
    >
      <div className="flex min-w-0 flex-1 flex-col gap-2 px-4 py-3">
        {children}
      </div>
    </div>
  )
)
Embed.displayName = "Embed"

const EmbedAuthor = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex min-w-0 items-center gap-2 text-[14px] font-semibold text-newt-text-primary",
      className
    )}
    {...props}
  />
))
EmbedAuthor.displayName = "EmbedAuthor"

const EmbedAuthorIcon = React.forwardRef<
  HTMLImageElement,
  React.ComponentProps<"img">
>(({ className, alt = "", ...props }, ref) => (
  <img
    ref={ref}
    alt={alt}
    aria-hidden={alt === "" ? true : undefined}
    className={cn("h-6 w-6 shrink-0 rounded-full object-cover", className)}
    {...props}
  />
))
EmbedAuthorIcon.displayName = "EmbedAuthorIcon"

const EmbedAuthorName = React.forwardRef<
  HTMLSpanElement,
  React.ComponentProps<"span">
>(({ className, ...props }, ref) => (
  <span ref={ref} className={cn("truncate", className)} {...props} />
))
EmbedAuthorName.displayName = "EmbedAuthorName"

const EmbedEyebrow = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-[12px] font-semibold text-newt-text-secondary",
      className
    )}
    {...props}
  />
))
EmbedEyebrow.displayName = "EmbedEyebrow"

const EmbedTitle = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-[16px] font-semibold text-newt-text-link", className)}
    {...props}
  />
))
EmbedTitle.displayName = "EmbedTitle"

const EmbedDescription = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-[14px] leading-[20px] text-newt-text-secondary",
      className
    )}
    {...props}
  />
))
EmbedDescription.displayName = "EmbedDescription"

const EmbedFields = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "mt-1 grid grid-cols-[repeat(auto-fit,minmax(120px,1fr))] gap-2",
      className
    )}
    {...props}
  />
))
EmbedFields.displayName = "EmbedFields"

const EmbedField = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn(className)} {...props} />
))
EmbedField.displayName = "EmbedField"

const EmbedFieldName = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "mb-0.5 text-[13px] font-semibold text-newt-text-primary",
      className
    )}
    {...props}
  />
))
EmbedFieldName.displayName = "EmbedFieldName"

const EmbedFieldValue = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-[13px] text-newt-text-secondary", className)}
    {...props}
  />
))
EmbedFieldValue.displayName = "EmbedFieldValue"

const EmbedFooter = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "mt-1 flex min-w-0 items-center gap-2 text-[12px] text-newt-text-muted",
      className
    )}
    {...props}
  />
))
EmbedFooter.displayName = "EmbedFooter"

const EmbedFooterIcon = React.forwardRef<
  HTMLImageElement,
  React.ComponentProps<"img">
>(({ className, alt = "", ...props }, ref) => (
  <img
    ref={ref}
    alt={alt}
    aria-hidden={alt === "" ? true : undefined}
    className={cn("h-4 w-4 shrink-0 rounded-full object-cover", className)}
    {...props}
  />
))
EmbedFooterIcon.displayName = "EmbedFooterIcon"

/* Middle dot, the way Discord separates footer text from the timestamp. */
const EmbedFooterSeparator = React.forwardRef<
  HTMLSpanElement,
  React.ComponentProps<"span">
>(({ className, children = "\u2022", ...props }, ref) => (
  <span
    ref={ref}
    aria-hidden="true"
    className={cn("mx-1", className)}
    {...props}
  >
    {children}
  </span>
))
EmbedFooterSeparator.displayName = "EmbedFooterSeparator"

/*
 * A fixed locale, not the visitor's: an embed rendered on the server and
 * hydrated in the browser has to produce the same string in both places.
 */
const embedTimeFormat = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short",
  timeStyle: "short",
})

export interface EmbedTimestampProps extends Omit<
  React.ComponentProps<"time">,
  "dateTime"
> {
  /** The moment to render. Anything `new Date()` accepts. */
  date: Date | number | string
}

const EmbedTimestamp = React.forwardRef<HTMLTimeElement, EmbedTimestampProps>(
  ({ className, date, children, ...props }, ref) => {
    const value = date instanceof Date ? date : new Date(date)
    const valid = !Number.isNaN(value.getTime())
    return (
      <time
        ref={ref}
        dateTime={valid ? value.toISOString() : undefined}
        className={cn(className)}
        {...props}
      >
        {children ?? (valid ? embedTimeFormat.format(value) : "")}
      </time>
    )
  }
)
EmbedTimestamp.displayName = "EmbedTimestamp"

export {
  Embed,
  EmbedAuthor,
  EmbedAuthorIcon,
  EmbedAuthorName,
  EmbedEyebrow,
  EmbedTitle,
  EmbedDescription,
  EmbedFields,
  EmbedField,
  EmbedFieldName,
  EmbedFieldValue,
  EmbedFooter,
  EmbedFooterIcon,
  EmbedFooterSeparator,
  EmbedTimestamp,
}

<script setup lang="ts">
import type { CSSProperties, HTMLAttributes } from "vue"
import { computed } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
  /** Accent colour of the left bar. Any CSS colour; defaults to the brand. */
  color?: string
}>()

/*
 * SAFETY: `CSSProperties` has no index signature for custom properties, but
 * Vue writes unknown `--*` keys to the style attribute verbatim, so the extra
 * key lands exactly as spelled here.
 */
const style = computed<CSSProperties | undefined>(() =>
  props.color
    ? ({ "--newt-embed-color": props.color } as CSSProperties)
    : undefined
)
</script>

<template>
  <div
    :style="style"
    :class="
      cn(
        'flex max-w-[var(--newt-embed-max-width)] overflow-hidden rounded-md border-s-4 border-[var(--newt-embed-color,var(--newt-brand))] bg-newt-bg-elevated',
        props.class
      )
    "
  >
    <div class="flex min-w-0 flex-1 flex-col gap-2 px-4 py-3">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="
      cn(
        'flex min-w-0 items-center gap-2 text-[14px] font-semibold text-newt-text-primary',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{ class?: HTMLAttributes["class"]; src: string; alt?: string }>(),
  { alt: "" }
)
</script>

<template>
  <img
    :src="props.src"
    :alt="props.alt"
    :aria-hidden="props.alt === '' ? true : undefined"
    :class="cn('h-6 w-6 shrink-0 rounded-full object-cover', props.class)"
  />
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <span :class="cn('truncate', props.class)"><slot /></span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="
      cn('text-[12px] font-semibold text-newt-text-secondary', props.class)
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="cn('text-[16px] font-semibold text-newt-text-link', props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="
      cn('text-[14px] leading-[20px] text-newt-text-secondary', props.class)
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="
      cn(
        'mt-1 grid grid-cols-[repeat(auto-fit,minmax(120px,1fr))] gap-2',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div :class="cn('', props.class)">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="
      cn('mb-0.5 text-[13px] font-semibold text-newt-text-primary', props.class)
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div :class="cn('text-[13px] text-newt-text-secondary', props.class)">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <div
    :class="
      cn(
        'mt-1 flex min-w-0 items-center gap-2 text-[12px] text-newt-text-muted',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = withDefaults(
  defineProps<{ class?: HTMLAttributes["class"]; src: string; alt?: string }>(),
  { alt: "" }
)
</script>

<template>
  <img
    :src="props.src"
    :alt="props.alt"
    :aria-hidden="props.alt === '' ? true : undefined"
    :class="cn('h-4 w-4 shrink-0 rounded-full object-cover', props.class)"
  />
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<!-- Middle dot, the way Discord separates footer text from the timestamp. -->
<template>
  <span aria-hidden="true" :class="cn('mx-1', props.class)">
    <slot>&bull;</slot>
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { computed } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{
  class?: HTMLAttributes["class"]
  /** The moment to render. Anything `new Date()` accepts. */
  date: Date | number | string
}>()

/*
 * A fixed locale, not the visitor's: an embed rendered on the server and
 * hydrated in the browser has to produce the same string in both places.
 */
const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short",
  timeStyle: "short",
})

const value = computed(() =>
  props.date instanceof Date ? props.date : new Date(props.date)
)
const valid = computed(() => !Number.isNaN(value.value.getTime()))
</script>

<template>
  <time
    :datetime="valid ? value.toISOString() : undefined"
    :class="cn(props.class)"
  >
    <slot>{{ valid ? formatter.format(value) : "" }}</slot>
  </time>
</template>

export { default as Embed } from "./Embed.vue"
export { default as EmbedAuthor } from "./EmbedAuthor.vue"
export { default as EmbedAuthorIcon } from "./EmbedAuthorIcon.vue"
export { default as EmbedAuthorName } from "./EmbedAuthorName.vue"
export { default as EmbedEyebrow } from "./EmbedEyebrow.vue"
export { default as EmbedTitle } from "./EmbedTitle.vue"
export { default as EmbedDescription } from "./EmbedDescription.vue"
export { default as EmbedFields } from "./EmbedFields.vue"
export { default as EmbedField } from "./EmbedField.vue"
export { default as EmbedFieldName } from "./EmbedFieldName.vue"
export { default as EmbedFieldValue } from "./EmbedFieldValue.vue"
export { default as EmbedFooter } from "./EmbedFooter.vue"
export { default as EmbedFooterIcon } from "./EmbedFooterIcon.vue"
export { default as EmbedFooterSeparator } from "./EmbedFooterSeparator.vue"
export { default as EmbedTimestamp } from "./EmbedTimestamp.vue"