|
1 | | -"use client"; |
| 1 | +'use client'; |
2 | 2 |
|
3 | | -import { Button } from "@/components/ui/button"; |
| 3 | +import { Button } from '@/components/ui/button'; |
4 | 4 | import { |
5 | | - Tooltip, |
6 | | - TooltipContent, |
7 | | - TooltipProvider, |
8 | | - TooltipTrigger, |
9 | | -} from "@/components/ui/tooltip"; |
10 | | -import { cn } from "@/lib/utils"; |
11 | | -import { type LucideIcon, XIcon } from "lucide-react"; |
12 | | -import type { ComponentProps, HTMLAttributes } from "react"; |
| 5 | + Tooltip, |
| 6 | + TooltipContent, |
| 7 | + TooltipProvider, |
| 8 | + TooltipTrigger, |
| 9 | +} from '@/components/ui/tooltip'; |
| 10 | +import { cn } from '@/lib/utils'; |
| 11 | +import { type LucideIcon, XIcon } from 'lucide-react'; |
| 12 | +import type { ComponentProps, HTMLAttributes } from 'react'; |
13 | 13 |
|
14 | 14 | export type ArtifactProps = HTMLAttributes<HTMLDivElement>; |
15 | 15 |
|
16 | 16 | export const Artifact = ({ className, ...props }: ArtifactProps) => ( |
17 | | - <div |
18 | | - className={cn( |
19 | | - "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm", |
20 | | - className |
21 | | - )} |
22 | | - {...props} |
23 | | - /> |
| 17 | + <div |
| 18 | + className={cn( |
| 19 | + 'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm', |
| 20 | + className |
| 21 | + )} |
| 22 | + {...props} |
| 23 | + /> |
24 | 24 | ); |
25 | 25 |
|
26 | 26 | export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>; |
27 | 27 |
|
28 | 28 | export const ArtifactHeader = ({ |
29 | | - className, |
30 | | - ...props |
| 29 | + className, |
| 30 | + ...props |
31 | 31 | }: ArtifactHeaderProps) => ( |
32 | | - <div |
33 | | - className={cn( |
34 | | - "flex items-center justify-between border-b bg-muted/50 px-4 py-3", |
35 | | - className |
36 | | - )} |
37 | | - {...props} |
38 | | - /> |
| 32 | + <div |
| 33 | + className={cn( |
| 34 | + 'flex items-center justify-between border-b bg-muted/50 px-4 py-3', |
| 35 | + className |
| 36 | + )} |
| 37 | + {...props} |
| 38 | + /> |
39 | 39 | ); |
40 | 40 |
|
41 | 41 | export type ArtifactCloseProps = ComponentProps<typeof Button>; |
42 | 42 |
|
43 | 43 | export const ArtifactClose = ({ |
44 | | - className, |
45 | | - children, |
46 | | - size = "sm", |
47 | | - variant = "ghost", |
48 | | - ...props |
| 44 | + className, |
| 45 | + children, |
| 46 | + size = 'sm', |
| 47 | + variant = 'ghost', |
| 48 | + ...props |
49 | 49 | }: ArtifactCloseProps) => ( |
50 | | - <Button |
51 | | - className={cn( |
52 | | - "size-8 p-0 text-muted-foreground hover:text-foreground", |
53 | | - className |
54 | | - )} |
55 | | - size={size} |
56 | | - type="button" |
57 | | - variant={variant} |
58 | | - {...props} |
59 | | - > |
60 | | - {children ?? <XIcon className="size-4" />} |
61 | | - <span className="sr-only">Close</span> |
62 | | - </Button> |
| 50 | + <Button |
| 51 | + className={cn( |
| 52 | + 'size-8 p-0 text-muted-foreground hover:text-foreground', |
| 53 | + className |
| 54 | + )} |
| 55 | + size={size} |
| 56 | + type="button" |
| 57 | + variant={variant} |
| 58 | + {...props} |
| 59 | + > |
| 60 | + {children ?? <XIcon className="size-4" />} |
| 61 | + <span className="sr-only">Close</span> |
| 62 | + </Button> |
63 | 63 | ); |
64 | 64 |
|
65 | 65 | export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>; |
66 | 66 |
|
67 | 67 | export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => ( |
68 | | - <p |
69 | | - className={cn("font-medium text-foreground text-sm", className)} |
70 | | - {...props} |
71 | | - /> |
| 68 | + <p |
| 69 | + className={cn('font-medium text-foreground text-sm', className)} |
| 70 | + {...props} |
| 71 | + /> |
72 | 72 | ); |
73 | 73 |
|
74 | 74 | export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>; |
75 | 75 |
|
76 | 76 | export const ArtifactDescription = ({ |
77 | | - className, |
78 | | - ...props |
| 77 | + className, |
| 78 | + ...props |
79 | 79 | }: ArtifactDescriptionProps) => ( |
80 | | - <p className={cn("text-muted-foreground text-sm", className)} {...props} /> |
| 80 | + <p className={cn('text-muted-foreground text-sm', className)} {...props} /> |
81 | 81 | ); |
82 | 82 |
|
83 | 83 | export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>; |
84 | 84 |
|
85 | 85 | export const ArtifactActions = ({ |
86 | | - className, |
87 | | - ...props |
| 86 | + className, |
| 87 | + ...props |
88 | 88 | }: ArtifactActionsProps) => ( |
89 | | - <div className={cn("flex items-center gap-1", className)} {...props} /> |
| 89 | + <div className={cn('flex items-center gap-1', className)} {...props} /> |
90 | 90 | ); |
91 | 91 |
|
92 | 92 | export type ArtifactActionProps = ComponentProps<typeof Button> & { |
93 | | - tooltip?: string; |
94 | | - label?: string; |
95 | | - icon?: LucideIcon; |
| 93 | + tooltip?: string; |
| 94 | + label?: string; |
| 95 | + icon?: LucideIcon; |
96 | 96 | }; |
97 | 97 |
|
98 | 98 | export const ArtifactAction = ({ |
99 | | - tooltip, |
100 | | - label, |
101 | | - icon: Icon, |
102 | | - children, |
103 | | - className, |
104 | | - size = "sm", |
105 | | - variant = "ghost", |
106 | | - ...props |
| 99 | + tooltip, |
| 100 | + label, |
| 101 | + icon: Icon, |
| 102 | + children, |
| 103 | + className, |
| 104 | + size = 'sm', |
| 105 | + variant = 'ghost', |
| 106 | + ...props |
107 | 107 | }: ArtifactActionProps) => { |
108 | | - const button = ( |
109 | | - <Button |
110 | | - className={cn( |
111 | | - "size-8 p-0 text-muted-foreground hover:text-foreground", |
112 | | - className |
113 | | - )} |
114 | | - size={size} |
115 | | - type="button" |
116 | | - variant={variant} |
117 | | - {...props} |
118 | | - > |
119 | | - {Icon ? <Icon className="size-4" /> : children} |
120 | | - <span className="sr-only">{label || tooltip}</span> |
121 | | - </Button> |
122 | | - ); |
123 | | - |
124 | | - if (tooltip) { |
125 | | - return ( |
126 | | - <TooltipProvider> |
127 | | - <Tooltip> |
128 | | - <TooltipTrigger asChild>{button}</TooltipTrigger> |
129 | | - <TooltipContent> |
130 | | - <p>{tooltip}</p> |
131 | | - </TooltipContent> |
132 | | - </Tooltip> |
133 | | - </TooltipProvider> |
134 | | - ); |
135 | | - } |
136 | | - |
137 | | - return button; |
| 108 | + const button = ( |
| 109 | + <Button |
| 110 | + className={cn( |
| 111 | + 'size-8 p-0 text-muted-foreground hover:text-foreground', |
| 112 | + className |
| 113 | + )} |
| 114 | + size={size} |
| 115 | + type="button" |
| 116 | + variant={variant} |
| 117 | + {...props} |
| 118 | + > |
| 119 | + {Icon ? <Icon className="size-4" /> : children} |
| 120 | + <span className="sr-only">{label || tooltip}</span> |
| 121 | + </Button> |
| 122 | + ); |
| 123 | + |
| 124 | + if (tooltip) { |
| 125 | + return ( |
| 126 | + <TooltipProvider> |
| 127 | + <Tooltip> |
| 128 | + <TooltipTrigger asChild>{button}</TooltipTrigger> |
| 129 | + <TooltipContent> |
| 130 | + <p>{tooltip}</p> |
| 131 | + </TooltipContent> |
| 132 | + </Tooltip> |
| 133 | + </TooltipProvider> |
| 134 | + ); |
| 135 | + } |
| 136 | + |
| 137 | + return button; |
138 | 138 | }; |
139 | 139 |
|
140 | 140 | export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>; |
141 | 141 |
|
142 | 142 | export const ArtifactContent = ({ |
143 | | - className, |
144 | | - ...props |
| 143 | + className, |
| 144 | + ...props |
145 | 145 | }: ArtifactContentProps) => ( |
146 | | - <div className={cn("flex-1 overflow-auto p-4", className)} {...props} /> |
| 146 | + <div className={cn('flex-1 overflow-auto p-4', className)} {...props} /> |
147 | 147 | ); |
0 commit comments