feat(projects): 添加全局背景组件

Author: Ohh-889

src/components/WaveBg.tsx

@@ -0,0 +1,98 @@
+import { getPaletteColorByNumber } from '@sa/color';
+
+interface Props {
+  /** Theme color */
+  themeColor: string;
+}
+
+const WaveBg = memo(({ themeColor }: Props) => {
+  const lightColor = getPaletteColorByNumber(themeColor, 200);
+  const darkColor = getPaletteColorByNumber(themeColor, 500);
+
+  return (
+    <div className="absolute-lt z-1 size-full overflow-hidden">
+      <div className="absolute -right-300px -top-900px lt-sm:(-right-100px -top-1170px)">
+        <svg
+          height="1337"
+          width="1337"
+        >
+          <defs>
+            <path
+              d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
+              fillRule="evenodd"
+              id="path-1"
+              opacity="1"
+            />
+            <linearGradient
+              id="linearGradient-2"
+              x1="0.79"
+              x2="0.21"
+              y1="0.62"
+              y2="0.86"
+            >
+              <stop
+                offset="0"
+                stopColor={lightColor}
+                stopOpacity="1"
+              />
+              <stop
+                offset="1"
+                stopColor={darkColor}
+                stopOpacity="1"
+              />
+            </linearGradient>
+          </defs>
+          <g opacity="1">
+            <use
+              fill="url(#linearGradient-2)"
+              fillOpacity="1"
+              xlinkHref="#path-1"
+            />
+          </g>
+        </svg>
+      </div>
+      <div className="absolute -bottom-400px -left-200px lt-sm:(-bottom-760px -left-100px)">
+        <svg
+          height="896"
+          width="967.8852157128662"
+        >
+          <defs>
+            <path
+              d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
+              fillRule="evenodd"
+              id="path-2"
+              opacity="1"
+            />
+            <linearGradient
+              id="linearGradient-3"
+              x1="0.5"
+              x2="0.5"
+              y1="0"
+              y2="1"
+            >
+              <stop
+                offset="0"
+                stopColor={lightColor}
+                stopOpacity="1"
+              />
+              <stop
+                offset="1"
+                stopColor={darkColor}
+                stopOpacity="1"
+              />
+            </linearGradient>
+          </defs>
+          <g opacity="1">
+            <use
+              fill="url(#linearGradient-3)"
+              fillOpacity="1"
+              xlinkHref="#path-2"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+});
+
+export default WaveBg;