Commit

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <Collapsible
    :class="cn('rounded-lg border bg-background', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </Collapsible>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <CollapsibleTrigger
    as-child
    v-bind="$attrs"
  >
    <div
      :class="
        cn(
          'group flex cursor-pointer items-center justify-between gap-4 p-3 text-left transition-colors hover:opacity-80',
          props.class,
        )
      "
    >
      <slot />
    </div>
  </CollapsibleTrigger>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div :class="cn('flex items-center', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Avatar, AvatarFallback } from '@repo/shadcn-vue/components/ui/avatar'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <Avatar :class="cn('size-8', props.class)" v-bind="$attrs">
    <AvatarFallback class="text-xs">
      {{ props.initials }}
    </AvatarFallback>
  </Avatar>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div :class="cn('flex flex-1 flex-col', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <span :class="cn('font-medium text-sm', props.class)" v-bind="$attrs">
    <slot />
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div
    :class="
      cn(
        'flex items-center gap-2 text-muted-foreground text-xs',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { GitCommitIcon } from 'lucide-vue-next'

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

<template>
  <span :class="cn('font-mono text-xs', props.class)" v-bind="$attrs">
    <GitCommitIcon class="mr-1 inline-block size-3" />
    <slot />
  </span>
</template>

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

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

<template>
  <span :class="props.class" v-bind="$attrs">
    <slot>•</slot>
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { computed } from 'vue'

const props = defineProps<{
  date: Date
  class?: HTMLAttributes['class']
}>()

const formatted = computed(() => {
  return new Intl.RelativeTimeFormat('en', {
    numeric: 'auto',
  }).format(
    Math.round((props.date.getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
    'day',
  )
})
</script>

<template>
  <time
    :class="cn('text-xs', props.class)"
    :datetime="props.date.toISOString()"
    v-bind="$attrs"
  >
    <slot>{{ formatted }}</slot>
  </time>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div
    :class="cn('flex items-center gap-1', props.class)"
    role="group"
    v-bind="$attrs"
    @click.stop
    @keydown.enter.stop
    @keydown.space.stop
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Button } from '@repo/shadcn-vue/components/ui/button'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { CheckIcon, CopyIcon } from 'lucide-vue-next'
import { computed, onBeforeUnmount, ref } from 'vue'

const props = withDefaults(
  defineProps<{
    hash: string
    timeout?: number
    class?: HTMLAttributes['class']
  }>(),
  {
    timeout: 2000,
  },
)

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

const isCopied = ref(false)
let resetTimer: ReturnType<typeof setTimeout> | undefined

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

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

  try {
    await navigator.clipboard.writeText(props.hash)
    isCopied.value = true
    emit('copy')

    if (resetTimer) {
      clearTimeout(resetTimer)
    }

    resetTimer = setTimeout(() => {
      isCopied.value = false
    }, props.timeout)
  }
  catch (error) {
    emit('error', error instanceof Error ? error : new Error('Copy failed'))
  }
}

onBeforeUnmount(() => {
  if (resetTimer) {
    clearTimeout(resetTimer)
  }
})
</script>

<template>
  <Button
    :class="cn('size-7 shrink-0', props.class)"
    size="icon"
    variant="ghost"
    v-bind="$attrs"
    @click="copyToClipboard"
  >
    <slot>
      <component :is="icon" :size="14" />
    </slot>
  </Button>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <CollapsibleContent
    :class="cn('border-t p-3', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </CollapsibleContent>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div :class="cn('space-y-1', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div
    :class="
      cn(
        'flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div
    :class="cn('flex min-w-0 items-center gap-2', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  status: 'added' | 'modified' | 'deleted' | 'renamed'
  class?: HTMLAttributes['class']
}>()

const fileStatusStyles = {
  added: 'text-green-600 dark:text-green-400',
  modified: 'text-yellow-600 dark:text-yellow-400',
  deleted: 'text-red-600 dark:text-red-400',
  renamed: 'text-blue-600 dark:text-blue-400',
}

const fileStatusLabels = {
  added: 'A',
  modified: 'M',
  deleted: 'D',
  renamed: 'R',
}
</script>

<template>
  <span
    :class="
      cn(
        'font-medium font-mono text-xs',
        fileStatusStyles[props.status],
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot>{{ fileStatusLabels[props.status] }}</slot>
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { FileIcon } from 'lucide-vue-next'

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

<template>
  <FileIcon
    :class="cn('size-3.5 shrink-0 text-muted-foreground', props.class)"
    v-bind="$attrs"
  />
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

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

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

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

<template>
  <div
    :class="
      cn(
        'flex shrink-0 items-center gap-1 font-mono text-xs',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { PlusIcon } from 'lucide-vue-next'

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

<template>
  <span
    v-if="props.count > 0"
    :class="cn('text-green-600 dark:text-green-400', props.class)"
    v-bind="$attrs"
  >
    <slot>
      <PlusIcon class="inline-block size-3" />
      {{ props.count }}
    </slot>
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { MinusIcon } from 'lucide-vue-next'

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

<template>
  <span
    v-if="props.count > 0"
    :class="cn('text-red-600 dark:text-red-400', props.class)"
    v-bind="$attrs"
  >
    <slot>
      <MinusIcon class="inline-block size-3" />
      {{ props.count }}
    </slot>
  </span>
</template>

export { default as Commit } from './Commit.vue'
export { default as CommitActions } from './CommitActions.vue'
export { default as CommitAuthor } from './CommitAuthor.vue'
export { default as CommitAuthorAvatar } from './CommitAuthorAvatar.vue'
export { default as CommitContent } from './CommitContent.vue'
export { default as CommitCopyButton } from './CommitCopyButton.vue'
export { default as CommitFile } from './CommitFile.vue'
export { default as CommitFileAdditions } from './CommitFileAdditions.vue'
export { default as CommitFileChanges } from './CommitFileChanges.vue'
export { default as CommitFileDeletions } from './CommitFileDeletions.vue'
export { default as CommitFileIcon } from './CommitFileIcon.vue'
export { default as CommitFileInfo } from './CommitFileInfo.vue'
export { default as CommitFilePath } from './CommitFilePath.vue'
export { default as CommitFiles } from './CommitFiles.vue'
export { default as CommitFileStatus } from './CommitFileStatus.vue'
export { default as CommitHash } from './CommitHash.vue'
export { default as CommitHeader } from './CommitHeader.vue'
export { default as CommitInfo } from './CommitInfo.vue'
export { default as CommitMessage } from './CommitMessage.vue'
export { default as CommitMetadata } from './CommitMetadata.vue'
export { default as CommitSeparator } from './CommitSeparator.vue'
export { default as CommitTimestamp } from './CommitTimestamp.vue'