feat: hero stat

src/components/AllStatsOverview/components/HeroStat/components/Glow.tsx

@@ -1,7 +1,11 @@
-export interface GlowProps {
+import { ComponentProps } from 'react';
+
+export interface GlowProps extends ComponentProps<'div'> {
   color: string;
   direction?: 'default' | 'reverse';
   rotation?: number;
+  startOpacity?: number;
+  endOpacity?: number;
 }
 
 const width = 16;
@@ -10,9 +14,17 @@ export function Glow({
   color,
   direction = 'default',
   rotation = 0,
+  style,
+  startOpacity = 0,
+  endOpacity = 1,
+  ...props
 }: GlowProps) {
-  const color1 = color;
-  const color2 = `${color}00`;
+  const color1 = `${color}${Math.round(endOpacity * 255)
+    .toString(16)
+    .padStart(2, '0')}`;
+  const color2 = `${color}${Math.round(startOpacity * 255)
+    .toString(16)
+    .padStart(2, '0')}`;
   const background = `linear-gradient(${
     direction === 'default' ? 0 : 180
   }deg, ${color1} 0%, ${color2} 100%)`;
@@ -24,7 +36,9 @@ export function Glow({
         alignItems: direction === 'default' ? 'flex-end' : 'flex-start',
         justifyContent: 'center',
         transform: `rotate(${rotation}deg)`,
+        ...style,
       }}
+      {...props}
     >
       <div style={{ height: 54, width, background }} />
       <div style={{ height: 72, width, background }} />

src/components/AllStatsOverview/components/HeroStat/constants.ts

@@ -1,9 +0,0 @@
-import { amber, brown, purple, sandDark, slate } from '@radix-ui/colors';
-
-export const LEAGUE_COLORS = [
-  purple.purple9,
-  sandDark.sand11,
-  amber.amber10,
-  slate.slate9,
-  brown.brown9,
-];

src/components/DeltaCaret.tsx

@@ -5,8 +5,11 @@ interface DeltaCaretProps {
 export function DeltaCaret({ delta }: DeltaCaretProps) {
   return (
     <img
-      width={16}
-      height={16}
+      style={{
+        width: 16,
+        height: 16,
+        objectFit: 'contain',
+      }}
       src={
         delta > 0
           ? 'https://i.imgur.com/gjI4a5f.png'