feat: completed link

src/components/AllStatsOverview/components/WN8Display/components/Glow.tsx

@@ -1,31 +1,28 @@
-import { Percentile } from '../../../../../constants/percentiles';
-import { PERCENTILE_COLORS } from '../../../../PercentileIndicator';
-
-export enum GlowSide {
-  Top,
-  Bottom,
-}
-
 export interface GlowProps {
-  percentile: Percentile;
-  side: GlowSide;
+  color: string;
+  direction?: 'default' | 'reverse';
+  rotation?: number;
 }
 
-export function Glow({ percentile, side }: GlowProps) {
-  const color = PERCENTILE_COLORS[percentile];
+export function Glow({
+  color,
+  direction = 'default',
+  rotation = 0,
+}: GlowProps) {
   const color1 = color;
   const color2 = `${color}00`;
 
   const background = `linear-gradient(${
-    side === GlowSide.Top ? 0 : 180
+    direction === 'default' ? 0 : 180
   }deg, ${color1} 0%, ${color2} 100%)`;
 
   return (
     <div
       style={{
         display: 'flex',
-        alignItems: side === GlowSide.Top ? 'flex-end' : 'flex-start',
+        alignItems: direction === 'default' ? 'flex-end' : 'flex-start',
         justifyContent: 'center',
+        transform: `rotate(${rotation}deg)`,
       }}
     >
       <div style={{ height: 54, width: 16, background }} />

src/components/AllStatsOverview/components/WN8Display/index.tsx

@@ -2,7 +2,7 @@ import { Percentile } from '../../../../constants/percentiles';
 import getWN8Percentile from '../../../../core/blitz/getWN8Percentile';
 import { theme } from '../../../../stitches.config';
 import { PERCENTILE_COLORS } from '../../../PercentileIndicator';
-import { Glow, GlowSide } from './components/Glow';
+import { Glow } from './components/Glow';
 
 export interface WN8DisplayProps {
   WN8?: number;
@@ -37,7 +37,7 @@ export function WN8Display({ WN8 }: WN8DisplayProps) {
         gap: -16,
       }}
     >
-      <Glow percentile={percentile} side={GlowSide.Top} />
+      <Glow color={PERCENTILE_COLORS[percentile]} />
 
       <div
         style={{
@@ -71,7 +71,7 @@ export function WN8Display({ WN8 }: WN8DisplayProps) {
         </span>
       </div>
 
-      <Glow percentile={percentile} side={GlowSide.Bottom} />
+      <Glow color={PERCENTILE_COLORS[percentile]} direction="reverse" />
     </div>
   );
 }