packages/core/src/components/gh-banner/index.tsx
import React, { SVGProps, useEffect } from "react";
import { CSSRules } from "./styles";
const text =
"If you find Refine useful, you can contribute to its growth by giving it a star on GitHub";
export const GitHubBanner = () => {
useEffect(() => {
const styleTag = document.createElement("style");
document.head.appendChild(styleTag);
CSSRules.forEach((rule) =>
styleTag.sheet?.insertRule(rule, styleTag.sheet.cssRules.length),
);
}, []);
return (
<div
className="banner bg-top-announcement"
style={{
width: "100%",
height: "48px",
}}
>
<div
style={{
position: "relative",
display: "flex",
justifyContent: "center",
alignItems: "center",
paddingLeft: "200px",
width: "100%",
maxWidth: "100vw",
height: "100%",
borderBottom: "1px solid #47ebeb26",
}}
>
<div
className="top-announcement-mask"
style={{
position: "absolute",
left: 0,
top: 0,
width: "100%",
height: "100%",
borderBottom: "1px solid #47ebeb26",
}}
>
<div
style={{
position: "relative",
width: "960px",
height: "100%",
display: "flex",
justifyContent: "space-between",
margin: "0 auto",
}}
>
<div
style={{
width: "calc(50% - 300px)",
height: "100%",
position: "relative",
}}
>
<GlowSmall
style={{
animationDelay: "1.5s",
position: "absolute",
top: "2px",
right: "220px",
}}
id={"1"}
/>
<GlowSmall
style={{
animationDelay: "1s",
position: "absolute",
top: "8px",
right: "100px",
transform: "rotate(180deg)",
}}
id={"2"}
/>
<GlowBig
style={{
position: "absolute",
right: "10px",
}}
id={"3"}
/>
</div>
<div
style={{
width: "calc(50% - 300px)",
height: "100%",
position: "relative",
}}
>
<GlowSmall
style={{
animationDelay: "2s",
position: "absolute",
top: "6px",
right: "180px",
transform: "rotate(180deg)",
}}
id={"4"}
/>
<GlowSmall
style={{
animationDelay: "0.5s",
transitionDelay: "1.3s",
position: "absolute",
top: "2px",
right: "40px",
}}
id={"5"}
/>
<GlowBig
style={{
position: "absolute",
right: "-70px",
}}
id={"6"}
/>
</div>
</div>
</div>
<Text text={text} />
</div>
</div>
);
};
const Text = ({ text }: { text: string }) => {
return (
<a
className="gh-link"
href="https://s.refine.dev/github-support"
target="_blank"
rel="noreferrer"
style={{
position: "absolute",
height: "100%",
padding: "0 60px",
display: "flex",
flexWrap: "nowrap",
whiteSpace: "nowrap",
justifyContent: "center",
alignItems: "center",
backgroundImage:
"linear-gradient(90deg, rgba(31, 63, 72, 0.00) 0%, #1F3F48 10%, #1F3F48 90%, rgba(31, 63, 72, 0.00) 100%)",
}}
>
<div
style={{
color: "#fff",
display: "flex",
flexDirection: "row",
gap: "8px",
}}
>
<span
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
}}
>
⭐️
</span>
<span
className="text"
style={{
fontSize: "16px",
lineHeight: "24px",
}}
>
{text}
</span>
<span
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
}}
>
⭐️
</span>
</div>
</a>
);
};
const GlowSmall = ({ style, ...props }: SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={80}
height={40}
fill="none"
style={{
opacity: 1,
animation: "top-announcement-glow 1s ease-in-out infinite alternate",
...style,
}}
>
<circle cx={40} r={40} fill={`url(#${props.id}-a)`} fillOpacity={0.5} />
<defs>
<radialGradient
id={`${props.id}-a`}
cx={0}
cy={0}
r={1}
gradientTransform="matrix(0 40 -40 0 40 0)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#47EBEB" />
<stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);
};
const GlowBig = ({ style, ...props }: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={120}
height={48}
fill="none"
{...props}
style={{
opacity: 1,
animation: "top-announcement-glow 1s ease-in-out infinite alternate",
...style,
}}
>
<circle
cx={60}
cy={24}
r={60}
fill={`url(#${props.id}-a)`}
fillOpacity={0.5}
/>
<defs>
<radialGradient
id={`${props.id}-a`}
cx={0}
cy={0}
r={1}
gradientTransform="matrix(0 60 -60 0 60 24)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#47EBEB" />
<stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
</radialGradient>
</defs>
</svg>
);