Spaces:
Running
Running
import { motion } from "framer-motion"; | |
import { forwardRef } from "react"; | |
export const Star = forwardRef((props: any, ref) => { | |
const { shape } = props; | |
const GradientType = | |
shape?.gradient?.type === "radialGradient" | |
? "radialGradient" | |
: "linearGradient"; | |
return ( | |
<svg | |
ref={ref as any} | |
width={props?.width ?? 303} | |
height={props?.height ?? 303} | |
viewBox="0 0 297 283" | |
fill="none" | |
id={props?.id ?? undefined} | |
xmlns="http://www.w3.org/2000/svg" | |
> | |
<defs> | |
{shape?.image?.enabled && shape?.image?.urls?.length > 0 && ( | |
<pattern | |
id={`shape-gradient-${shape?.component ?? "null"}`} | |
x="0" | |
y="0" | |
patternUnits="userSpaceOnUse" | |
width={303} | |
height={303} | |
> | |
<image | |
href={shape?.image?.urls[0]} | |
width="100%" | |
height="100%" | |
preserveAspectRatio="xMidYMid slice" | |
/> | |
</pattern> | |
)} | |
<GradientType | |
id={`shape-gradient-${shape?.component ?? "null"}`} | |
gradientTransform={`rotate(${shape?.gradient?.angle ?? "90"})`} | |
> | |
{shape?.gradient?.enabled ? ( | |
<> | |
{shape?.gradient?.colours?.map((color: any, c: number) => ( | |
<stop | |
key={c} | |
offset={`${color.left}%`} | |
stopColor={color.value} | |
/> | |
))} | |
</> | |
) : ( | |
<stop offset="0%" stopColor={shape?.colour ?? "#fff"} /> | |
)} | |
</GradientType> | |
</defs> | |
<defs> | |
<mask id={`mask-${shape?.component ?? "null"}`} fill="black"> | |
<rect width="100%" height="100%" fill="white" /> | |
<g | |
style={{ | |
transformOrigin: "center", | |
}} | |
opacity={100} | |
> | |
{shape?.transparency && props?.children && props.children} | |
</g> | |
</mask> | |
</defs> | |
<g fill={`url(#${`shape-gradient-${shape?.component ?? "null"}`})`}> | |
<g mask={`url(#${`mask-${shape?.component ?? "null"}`})`}> | |
<motion.path | |
d="M288.391 125.564l-55.882 48.256a16.033 16.033 0 00-5.239 17.135l17.463 70.286c.91 3.388.768 6.974-.407 10.279a17.272 17.272 0 01-6.173 8.224 17.235 17.235 0 01-19.614.38l-62.867-37.766a15.845 15.845 0 00-17.463 0l-62.867 37.766c-13.97 6.994-29.687-3.497-26.195-18.883l17.463-70.286c1.746-6.994 0-13.987-5.239-17.135L5.49 125.564a18.24 18.24 0 01-4.536-18.86 18.222 18.222 0 015.741-8.298 18.183 18.183 0 019.272-3.964l73.345-5.245c6.985-1.748 12.224-5.245 13.971-10.14l31.433-68.538a17.027 17.027 0 016.265-7.647 16.992 16.992 0 0118.905 0 17.031 17.031 0 016.264 7.647l27.94 67.139a15.25 15.25 0 005.335 7.45 15.216 15.216 0 008.636 3.04l73.344 6.644c15.368 1.399 22.353 20.282 6.986 30.772z" | |
animate={{ | |
scaleX: | |
shape?.border?.width > 0 ? 1 - shape?.border?.width / 350 : 1, | |
scaleY: | |
shape?.border?.width > 0 ? 1 - shape?.border?.width / 350 : 1, | |
rotate: shape?.position?.angle ?? 0, | |
}} | |
stroke={shape?.border?.colour} | |
strokeLinejoin="round" | |
strokeWidth={shape?.border?.width} | |
onClick={props?.onClick ? props.onClick : () => {}} | |
/> | |
</g> | |
</g> | |
{!shape?.transparency && props?.children && props.children} | |
</svg> | |
); | |
}); | |