Snippet

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { computed, provide } from 'vue'
import { SnippetKey } from './context'

type InputGroupProps = InstanceType<typeof InputGroup>['$props']

interface Props extends /* @vue-ignore */ InputGroupProps {
  code: string
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

provide(SnippetKey, {
  code: computed(() => props.code),
})
</script>

<template>
  <InputGroup
    :class="cn('font-mono', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </InputGroup>
</template>

<script setup lang="ts">
import { InputGroupAddon } from '@repo/shadcn-vue/components/ui/input-group'

type InputGroupAddonProps = InstanceType<typeof InputGroupAddon>['$props']

interface Props extends /* @vue-ignore */ InputGroupAddonProps {}

const props = defineProps<Props>()
</script>

<template>
  <InputGroupAddon v-bind="props">
    <slot />
  </InputGroupAddon>
</template>

<script setup lang="ts">
import { InputGroupText } from '@repo/shadcn-vue/components/ui/input-group'
import { cn } from '@repo/shadcn-vue/lib/utils'

type InputGroupTextProps = InstanceType<typeof InputGroupText>['$props']

interface Props extends /* @vue-ignore */ InputGroupTextProps {}

const props = defineProps<Props>()
</script>

<template>
  <InputGroupText
    :class="cn('pl-2 font-normal text-muted-foreground', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </InputGroupText>
</template>

<script setup lang="ts">
import { InputGroupInput } from '@repo/shadcn-vue/components/ui/input-group'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { useSnippetContext } from './context'

type InputGroupInputProps = InstanceType<typeof InputGroupInput>['$props']

interface Props extends /* @vue-ignore */ Omit<InputGroupInputProps, 'readonly' | 'modelValue' | 'value'> {}

const props = defineProps<Props>()

const { code } = useSnippetContext('SnippetInput')
</script>

<template>
  <InputGroupInput
    :class="cn('text-foreground', props.class)"
    readonly
    :model-value="code"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { InputGroupButton } from '@repo/shadcn-vue/components/ui/input-group'
import { CheckIcon, CopyIcon } from 'lucide-vue-next'
import { computed, onBeforeUnmount, ref } from 'vue'
import { useSnippetContext } from './context'

type InputGroupButtonProps = InstanceType<typeof InputGroupButton>['$props']

interface Props extends /* @vue-ignore */ InputGroupButtonProps {
  timeout?: number
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  timeout: 2000,
})

const emit = defineEmits<{
  (e: 'copy'): void
  (e: 'error', error: Error): void
}>()

const { code } = useSnippetContext('SnippetCopyButton')
const isCopied = ref(false)
const timeoutRef = ref<number>(0)

const Icon = computed(() => (isCopied.value ? CheckIcon : CopyIcon))

async function copyToClipboard() {
  if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
    emit('error', new Error('Clipboard API not available'))
    return
  }

  try {
    if (!isCopied.value) {
      await navigator.clipboard.writeText(code.value)
      isCopied.value = true
      emit('copy')
      timeoutRef.value = window.setTimeout(
        () => (isCopied.value = false),
        props.timeout,
      )
    }
  }
  catch (error) {
    emit('error', error as Error)
  }
}

onBeforeUnmount(() => {
  window.clearTimeout(timeoutRef.value)
})
</script>

<template>
  <InputGroupButton
    aria-label="Copy"
    size="icon-sm"
    title="Copy"
    :class="props.class"
    v-bind="$attrs"
    @click="copyToClipboard"
  >
    <slot>
      <component :is="Icon" class="size-3.5" :size="14" />
    </slot>
  </InputGroupButton>
</template>