forked from vercel/next.js
/
boundary.tsx
82 lines (80 loc) · 2.24 KB
/
boundary.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import clsx from 'clsx'
import React from 'react'
const Label = ({
children,
animateRerendering,
color,
}: {
children: React.ReactNode
animateRerendering?: boolean
color?: 'default' | 'pink' | 'blue' | 'violet' | 'cyan' | 'orange'
}) => {
return (
<div
className={clsx('rounded-full px-1.5 shadow-[0_0_1px_3px_black]', {
'bg-gray-800 text-gray-300': color === 'default',
'bg-vercel-pink text-white': color === 'pink',
'bg-vercel-blue text-white': color === 'blue',
'bg-vercel-cyan text-white': color === 'cyan',
'bg-vercel-violet text-violet-100': color === 'violet',
'bg-vercel-orange text-white': color === 'orange',
'animate-[highlight_1s_ease-in-out_1]': animateRerendering,
})}
>
{children}
</div>
)
}
export const Boundary = ({
children,
labels = ['children'],
size = 'default',
color = 'default',
animateRerendering = true,
}: {
children: React.ReactNode
labels?: string[]
size?: 'small' | 'default'
color?: 'default' | 'pink' | 'blue' | 'violet' | 'cyan' | 'orange'
animateRerendering?: boolean
}) => {
return (
<div
className={clsx('relative rounded-lg border border-dashed', {
'p-3 lg:p-5': size === 'small',
'p-4 lg:p-9': size === 'default',
'border-gray-700': color === 'default',
'border-vercel-pink': color === 'pink',
'border-vercel-blue': color === 'blue',
'border-vercel-cyan': color === 'cyan',
'border-vercel-violet': color === 'violet',
'border-vercel-orange': color === 'orange',
'animate-[rerender_1s_ease-in-out_1] text-vercel-pink':
animateRerendering,
})}
>
<div
className={clsx(
'absolute -top-2.5 flex gap-x-1 text-[9px] uppercase leading-4 tracking-widest',
{
'left-3 lg:left-5': size === 'small',
'left-4 lg:left-9': size === 'default',
}
)}
>
{labels.map((label) => {
return (
<Label
key={label}
color={color}
animateRerendering={animateRerendering}
>
{label}
</Label>
)
})}
</div>
{children}
</div>
)
}