Repository navigation
Expand file tree
/
Copy pathBadge.js
More file actions
57 lines (53 loc) · 1.37 KB
/
Copy pathBadge.js
File metadata and controls
57 lines (53 loc) · 1.37 KB
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
import Link from "./Link";
export default function Badge({
title,
content,
path,
position,
className,
badgeClassName,
children,
display = true,
onClick,
}) {
let css = "";
const cssTopRight = "top-0 right-0 bottom-auto left-auto";
const cssTopLeft = "top-0 left-0 bottom-auto right-auto";
const cssBottomRight = "bottom-0 right-0 top-auto left-auto";
const cssBottomLeft = "bottom-0 left-0 top-auto right-auto";
switch (position) {
case "top-right":
css = cssTopRight;
break;
case "top-left":
css = cssTopLeft;
break;
case "bottom-right":
css = cssBottomRight;
break;
case "bottom-left":
css = cssBottomLeft;
break;
default:
css = cssTopRight;
}
const badge = (
<div
title={title}
className={`absolute inline-block rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-orange-600 text-black rounded-full z-10 ${css} ${badgeClassName}`}
=> (onClick ? onClick() : null)}
>
{content}
</div>
);
let clickable;
if (path) {
clickable = <Link href={path}>{badge}</Link>;
}
return (
<div className={`inline-flex relative ${className ? className : "w-fit"}`}>
{children}
{display && (clickable ? clickable : badge)}
</div>
);
}