forked from DA0-DA0/dao-dao-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
NoContent.tsx
126 lines (117 loc) · 3.41 KB
/
NoContent.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import clsx from 'clsx'
import { ComponentType, forwardRef } from 'react'
import { Button } from './buttons'
import { ButtonLink } from './buttons/ButtonLink'
import { LinkWrapper } from './LinkWrapper'
export interface NoContentProps {
Icon: ComponentType<{ className: string }>
body: string
href?: string
onClick?: () => void
actionNudge?: string
buttonLabel?: string
className?: string
small?: boolean
error?: boolean
noBorder?: boolean
shallow?: boolean
}
// This component displays a dashed outline and centers its content in a way
// that draws attention to it. If an `href` is passed, clicking on this card
// will navigate to the link. If `onClick` is passed, clicking on this card will
// execute the function. The `body` text is displayed all the time, whereas
// `actionNudge` displays below `body` only in the event that an action is
// present (i.e. one of `href` or `onClick` is set). `buttonLabel` specifies the
// label of the button that displays below the text, which displays only when an
// action is present and triggers that action just like clicking on the whole
// card. The button ensures the user knows an action can be performed, but the
// whole card remains clickable to improve UX. It is often used when there is no
// content to prompt the user to perform an action, such as when there are no
// following DAOs.
export const NoContent = forwardRef<HTMLDivElement, NoContentProps>(
function NoContent(
{
Icon,
body,
href,
onClick,
actionNudge,
buttonLabel,
className,
small,
error,
noBorder,
shallow,
},
ref
) {
const hasAction = !!href || !!onClick
const containerClassName = clsx(
'flex flex-col items-center rounded-md',
!noBorder && 'border-2 border-dashed border-border-primary',
small ? 'gap-3 py-6 px-4' : 'gap-5 py-10 px-6',
hasAction &&
'cursor-pointer transition-all hover:border-solid hover:border-border-interactive-hover',
className
)
const content = (
<>
<Icon
className={clsx(
error ? 'text-icon-interactive-error' : 'text-icon-tertiary',
small ? '!h-8 !w-8' : '!h-14 !w-14'
)}
/>
<p
className={clsx(
'secondary-text text-center',
error ? 'text-text-interactive-error' : 'text-text-tertiary'
)}
>
{body}
{!!actionNudge && hasAction && (
<>
<br />
{actionNudge}
</>
)}
</p>
{!!buttonLabel &&
hasAction &&
(href ? (
<ButtonLink href={href} variant="secondary">
{buttonLabel}
</ButtonLink>
) : (
<Button
onClick={
onClick &&
((e) => {
// Don't trigger click on container.
e.stopPropagation()
onClick()
})
}
variant="secondary"
>
{buttonLabel}
</Button>
))}
</>
)
return href ? (
<LinkWrapper
className={containerClassName}
href={href}
ref={ref}
shallow={shallow}
>
{content}
</LinkWrapper>
) : (
<div className={containerClassName} onClick={onClick} ref={ref}>
{content}
</div>
)
}
)