Spaces:
Running
Running
File size: 5,275 Bytes
9cd6ddb |
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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
import { forwardRef, useEffect, useRef, useState } from "react";
import { BadgeType } from "@/types/badge";
import { FONT_FAMILY } from "@/components/font-family/font-family.constants";
import { RATIONAL_BADGE_WIDTH } from "../badge-editor.constants";
import { Icons } from "@/components/svg/icons";
import { IconItem } from "@/types/editor";
import { BADGE_COMPONENTS } from "@/components/svg/badges";
import classNames from "classnames";
import { ShineEffect } from "./shine_effect";
export const Badge = forwardRef(
(
{
badge,
size = "medium",
}: {
badge: BadgeType;
size?: "medium" | "small";
},
ref
) => {
const textRef = useRef<any>(null);
const svgRef = useRef<any>(null);
const badgeContentRef = useRef<any>(null);
const [viewBox, setViewBox] = useState<string>("0 0 24 24");
useEffect(() => {
if (!textRef.current) return;
if (!badgeContentRef.current) return;
const textWidth = textRef.current.getBoundingClientRect().width;
let newBadgeWidth = RATIONAL_BADGE_WIDTH;
if (textWidth > RATIONAL_BADGE_WIDTH) {
newBadgeWidth = Math.ceil(textWidth / 32) * 32;
}
if (
(findShape?.autoResize || badge.type === "circle") &&
newBadgeWidth - textWidth < (badge.type === "circle" ? 6 : 3)
)
newBadgeWidth += 32;
badgeContentRef.current.style.width = `${newBadgeWidth}px`;
}, [
badge.text,
badge.fontFamily,
badge.letterSpacing,
badge.fontWeight,
badge.type,
badge?.icon?.component,
badge?.icon?.enabled,
badge?.icon?.position,
]);
const fontFamily = FONT_FAMILY?.find((f) => f.label === badge?.fontFamily);
const defaultStyle = {
letterSpacing: badge?.letterSpacing,
fontWeight: badge?.fontWeight,
};
const findIcon = Icons?.find(
(i: IconItem) => badge?.icon?.component === i.name
);
const findShape = BADGE_COMPONENTS?.find(
(b: any) => b.name === badge?.type
);
useEffect(() => {
return setViewBox(
svgRef?.current?.getAttribute("viewBox") ?? "0 0 200 200"
);
}, [badge?.icon]);
const IconComponent = findIcon?.component as any;
const ShapeComponent = findShape?.component as any;
return (
<div
id={size === "medium" ? "discotools-selected-badge" : ""}
ref={ref as any}
className="max-w-max flex items-center h-[32px] justify-center relative"
>
{findShape?.component && (
<ShapeComponent.left color={badge?.stringColor ?? badge?.colour} />
)}
{badge?.shinyEffect && (
<>
<ShineEffect className="absolute left-[6px] -bottom-[0px] z-1" />
<ShineEffect className="absolute right-[6px] -top-[0px] z-1" />
</>
)}
<div
className="whitespace-nowrap text-white font-bold flex text-[18px] h-[28px] items-center justify-center text-center transition-all duration-200 relative"
ref={badgeContentRef}
style={{
background: badge?.stringColor ?? badge?.colour,
borderRadius: badge.type !== "circle" ? 0 : badge?.radius ?? 0,
}}
>
<div
ref={textRef as any}
className="flex items-center justify-center gap-2"
>
{badge?.icon?.enabled &&
badge?.icon?.position?.includes("left") &&
findIcon?.component &&
badge?.icon?.component && (
<svg
width={16}
height={16}
fill={badge?.icon?.colour}
viewBox={viewBox}
style={{ minWidth: 16, minHeight: 16 }}
>
<IconComponent ref={svgRef as any} />
</svg>
)}
{badge?.text?.value && (
<p
className={`!bg-clip-text text-transparent ${fontFamily?.value}`}
style={
badge?.text?.gradient?.enabled
? {
backgroundImage:
badge?.text?.stringColor ?? badge?.text?.colour,
...defaultStyle,
}
: {
backgroundColor:
badge?.text?.stringColor ?? badge?.text?.colour,
...defaultStyle,
}
}
>
{badge?.text?.value}
</p>
)}
{badge?.icon?.enabled &&
badge?.icon?.position?.includes("right") &&
findIcon?.component &&
badge?.icon?.component && (
<svg
width={16}
height={16}
fill={badge?.icon?.colour}
viewBox={viewBox}
style={{ minWidth: 16, minHeight: 16 }}
>
<IconComponent ref={svgRef as any} />
</svg>
)}
</div>
</div>
{findShape?.component && (
<ShapeComponent.right color={badge?.stringColor ?? badge?.colour} />
)}
</div>
);
}
);
|