Glimpse

import { Glimpse, GlimpseContent, GlimpseDescription, GlimpseImage, GlimpseTitle, GlimpseTrigger } from '@hanzo/ui'

export function Default() {
  return (
    <Glimpse>
      <GlimpseTrigger asChild>
        <Anchor href="https://www.hanzo.ai" target="_blank" rel="noopener noreferrer">
          hanzo.ai
        </Anchor>
      </GlimpseTrigger>
      <GlimpseContent>
        <GlimpseImage
          src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&h=360&fit=crop"
          alt="Hanzo AI"
        />
        <GlimpseTitle>Hanzo AI</GlimpseTitle>
        <GlimpseDescription>
          Frontier AI models, agent infrastructure, and the compute to run them.
        </GlimpseDescription>
      </GlimpseContent>
    </Glimpse>
  )
}

export function TextOnly() {
  return (
    <Glimpse>
      <GlimpseTrigger asChild>
        <Anchor href="https://lux.network" target="_blank" rel="noopener noreferrer">
          lux.network
        </Anchor>
      </GlimpseTrigger>
      <GlimpseContent>
        <GlimpseTitle>Lux Network</GlimpseTitle>
        <GlimpseDescription>
          A post-quantum, multi-consensus blockchain built for cross-chain interoperability.
        </GlimpseDescription>
      </GlimpseContent>
    </Glimpse>
  )
}

export function BrokenImage() {
  return (
    <Glimpse>
      <GlimpseTrigger asChild>
        <Anchor href="https://example.com" target="_blank" rel="noopener noreferrer">
          example.com
        </Anchor>
      </GlimpseTrigger>
      <GlimpseContent>
        <GlimpseImage src="https://example.com/does-not-exist.png" alt="" />
        <GlimpseTitle>Example Domain</GlimpseTitle>
        <GlimpseDescription>Reserved for use in illustrative examples.</GlimpseDescription>
      </GlimpseContent>
    </Glimpse>
  )
}

export function Placement() {
  return (
    <XStack gap="$6">
      <Glimpse openDelay={0}>
        <GlimpseTrigger asChild>
          <Anchor href="https://zoo.ngo" target="_blank" rel="noopener noreferrer">
            zoo.ngo
          </Anchor>
        </GlimpseTrigger>
        <GlimpseContent side="top">
          <GlimpseTitle>Zoo Labs Foundation</GlimpseTitle>
          <GlimpseDescription>
            Open, community-governed AI and science research.
          </GlimpseDescription>
        </GlimpseContent>
      </Glimpse>
    </XStack>
  )
}

Types

export type GlimpseProps = Omit<
  ComponentProps<typeof GuiPopover>,
  'hoverable' | 'placement' | 'offset'
> & {
  openDelay?: number
  closeDelay?: number
}

export type GlimpseTriggerProps = ComponentProps<typeof GuiPopover.Trigger>

export type GlimpseContentProps = ComponentProps<typeof GuiPopover.Content> & {
  side?: Side
  align?: Align
  sideOffset?: number
}

export type GlimpseImageProps = Omit<ImageProps, 'width' | 'height'> & {
  /** Width divided by height of the preview frame. 16:9 by default. */
  ratio?: number
}

export type GlimpseTitleProps = ComponentProps<typeof SizableText>

export type GlimpseDescriptionProps = ComponentProps<typeof SizableText>

Exports