Artifact

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

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

const classes = computed(() => cn(
  'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
  props.class,
))
</script>

<template>
  <div
    :class="classes"
    v-bind="$attrs"
  >
    <slot />
  </div>
</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<{
  class?: HTMLAttributes['class']
}>()
const classes = computed(() => cn('flex items-center gap-1', props.class))
</script>

<template>
  <div
    :class="classes"
    v-bind="$attrs"
  >
    <slot />
  </div>
</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<{
  class?: HTMLAttributes['class']
}>()

const classes = computed(() => cn('flex-1 overflow-auto p-4', props.class))
</script>

<template>
  <div
    :class="classes"
    v-bind="$attrs"
  >
    <slot />
  </div>
</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<{
  class?: HTMLAttributes['class']
}>()

const classes = computed(() => cn('text-muted-foreground text-sm', props.class))
</script>

<template>
  <p
    :class="classes"
    v-bind="$attrs"
  >
    <slot />
  </p>
</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<{
  class?: HTMLAttributes['class']
}>()

const classes = computed(() => cn(
  'flex items-center justify-between border-b bg-muted/50 px-4 py-3',
  props.class,
))
</script>

<template>
  <div
    :class="classes"
    v-bind="$attrs"
  >
    <slot />
  </div>
</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<{
  class?: HTMLAttributes['class']
}>()

const classes = computed(() => cn('font-medium text-foreground text-sm', props.class))
</script>

<template>
  <p
    v-bind="$attrs"
    :class="classes"
  >
    <slot />
  </p>
</template>

export { default as Artifact } from './Artifact.vue'
export { default as ArtifactAction } from './ArtifactAction.vue'
export { default as ArtifactActions } from './ArtifactActions.vue'
export { default as ArtifactClose } from './ArtifactClose.vue'
export { default as ArtifactContent } from './ArtifactContent.vue'
export { default as ArtifactDescription } from './ArtifactDescription.vue'
export { default as ArtifactHeader } from './ArtifactHeader.vue'
export { default as ArtifactTitle } from './ArtifactTitle.vue'