chore: create artifact example component with actions

Author: zhouLion

packages/elements/src/artifact/index.tsx renamed to packages/elements/src/artifact/index.ts

@@ -7,13 +7,4 @@ export { default as ArtifactDescription } from './ArtifactDescription.vue'
 export { default as ArtifactHeader } from './ArtifactHeader.vue'
 export { default as ArtifactTitle } from './ArtifactTitle.vue'
 
-export type {
-  ArtifactActionProps,
-  ArtifactActionsProps,
-  ArtifactCloseProps,
-  ArtifactContentProps,
-  ArtifactDescriptionProps,
-  ArtifactHeaderProps,
-  ArtifactProps,
-  ArtifactTitleProps,
-} from './props'
+export * from './props'

packages/elements/src/artifact/props.ts

@@ -2,13 +2,15 @@ import type Button from '@repo/shadcn-vue/components/ui/button/Button.vue'
 import type { LucideIcon } from 'lucide-vue-next'
 import type { HTMLAttributes } from 'vue'
 
+type ButtonProps = InstanceType<typeof Button>['$props']
+
 export type ArtifactProps = HTMLAttributes
 export type ArtifactHeaderProps = HTMLAttributes
-export type ArtifactCloseProps = InstanceType<typeof Button>
+export type ArtifactCloseProps = ButtonProps
 export type ArtifactTitleProps = HTMLAttributes
 export type ArtifactDescriptionProps = HTMLAttributes
 export type ArtifactActionsProps = HTMLAttributes
-export type ArtifactActionProps = InstanceType<typeof Button> & {
+export type ArtifactActionProps = ButtonProps & {
   tooltip?: string
   label?: string
   icon?: LucideIcon

packages/examples/src/artifact.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactContent,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle,
+} from '@repo/elements/artifact'
+import { CodeBlock } from '@repo/elements/code-block'
+import { Copy, Download, Play, RefreshCw, Share } from 'lucide-vue-next'
+
+const code = `# Dijkstra's Algorithm implementation
+import heapq
+
+def dijkstra(graph, start):
+    distances = {node: float('inf') for node in graph}
+    distances[start] = 0
+    heap = [(0, start)]
+    visited = set()
+    
+    while heap:
+        current_distance, current_node = heapq.heappop(heap)
+        if current_node in visited:
+            continue
+        visited.add(current_node)
+        
+        for neighbor, weight in graph[current_node].items():
+            distance = current_distance + weight
+            if distance < distances[neighbor]:
+                distances[neighbor] = distance
+                heapq.heappush(heap, (distance, neighbor))
+    
+    return distances
+
+# Example graph
+ graph = {
+    'A': {'B': 1, 'C': 4},
+    'B': {'A': 1, 'C': 2, 'D': 5},
+    'C': {'A': 4, 'B': 2, 'D': 1},
+    'D': {'B': 5, 'C': 1}
+}
+
+print(dijkstra(graph, 'A'))`
+
+function handleRun() {
+  // eslint-disable-next-line no-console
+  console.log('Run')
+}
+
+function handleCopy() {
+  // eslint-disable-next-line no-console
+  console.log('Copy')
+}
+
+function handleRegenerate() {
+  // eslint-disable-next-line no-console
+  console.log('Regenerate')
+}
+
+function handleDownload() {
+  // eslint-disable-next-line no-console
+  console.log('Download')
+}
+
+function handleShare() {
+  // eslint-disable-next-line no-console
+  console.log('Share')
+}
+</script>
+
+<template>
+  <Artifact>
+    <ArtifactHeader>
+      <div>
+        <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
+        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
+      </div>
+      <div class="flex items-center gap-2">
+        <ArtifactActions>
+          <ArtifactAction
+            :icon="Play"
+            label="Run"
+            tooltip="Run code"
+            @click="handleRun"
+          />
+          <ArtifactAction
+            :icon="Copy"
+            label="Copy"
+            tooltip="Copy to clipboard"
+            @click="handleCopy"
+          />
+          <ArtifactAction
+            :icon="RefreshCw"
+            label="Regenerate"
+            tooltip="Regenerate content"
+            @click="handleRegenerate"
+          />
+          <ArtifactAction
+            :icon="Download"
+            label="Download"
+            tooltip="Download file"
+            @click="handleDownload"
+          />
+          <ArtifactAction
+            :icon="Share"
+            label="Share"
+            tooltip="Share artifact"
+            @click="handleShare"
+          />
+        </ArtifactActions>
+      </div>
+    </ArtifactHeader>
+    <ArtifactContent class="p-0">
+      <CodeBlock
+        class="border-none"
+        :code="code"
+        language="python"
+        show-line-numbers
+      />
+    </ArtifactContent>
+  </Artifact>
+</template>

packages/examples/src/index.ts

@@ -1,5 +1,6 @@
 export { default as ActionsHover } from './actions-hover.vue'
 export { default as Actions } from './actions.vue'
+export { default as Artifact } from './artifact.vue'
 export { default as Branch } from './branch.vue'
 export { default as ChainOfThought } from './chain-of-thought.vue'
 export { default as Checkpoint } from './checkpoint.vue'