diff --git a/src/OGCard.tsx b/src/OGCard.tsx index 78f87a9..b2ca22a 100644 --- a/src/OGCard.tsx +++ b/src/OGCard.tsx @@ -1,7 +1,7 @@ import { Rating } from './rating' import { preset, type Theme } from './theme' import { GitRollLogo } from './logo' -import { DarkEmeraldDecoration, KawaiiCatDecoration, RetroThemeDecoration } from './decorations' +import { WatchdogGradientDecoration, DarkEmeraldDecoration, KawaiiCatDecoration, RetroThemeDecoration } from './decorations' export interface OGCardProps { @@ -39,7 +39,7 @@ export function OGCard({ width: '100%', height: '100%', backgroundColor: theme.backgroundColor, - backgroundImage: theme === preset.darkEmerald ? theme.backgroundColor : '', + backgroundImage: theme === preset.darkEmerald || theme === preset.WatchdogGradient ? theme.backgroundColor : '', color: theme.textColor, borderRadius: '10px', }} @@ -153,7 +153,7 @@ export function OGCard({ position: 'relative' }} > - {theme === preset.darkEmerald && ()} + {theme === preset.darkEmerald && () || theme === preset.WatchdogGradient && ()}
) } + +export function WatchdogGradientDecoration({ color, rating }: WatchdogGradientDecorationProps) { + let endColor='' + switch(rating) { + case 'S': + endColor = '#1e1b4b' + break + case 'A': + endColor = '#052e16' + break + case 'B': + endColor = '#1a2e05' + break + case 'C': + endColor = '#431407' + break + case 'D': + endColor = '#450a0a' + break + default: + endColor = '#030712' + break + } + return ( + + + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/theme.ts b/src/theme.ts index cdafed4..e2f5e51 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -336,6 +336,34 @@ const dracula = { avatarPlaceholderColor: '#6272A4', logoColor: '#F8F8F2', } + +const WatchdogGradient = { + backgroundColor: 'linear-gradient(to top left, #520806, #021D4A, #520806)', + textColor: '#ffffffff', + textColorSecondary: '#A9FEF7', + badgeColors: { + [Rating.S]: '#a78bfa', + [Rating.A]: '#4ade80', + [Rating.B]: '#a3e635', + [Rating.C]: '#fb923c', + [Rating.D]: '#f87171', + [Rating.E]: '#6b7280', + }, + badgeTextColors: { + [Rating.S]: '#021029ff', + [Rating.A]: '#021029ff', + [Rating.B]: '#021029ff', + [Rating.C]: '#021029ff', + [Rating.D]: '#021029ff', + [Rating.E]: '#FF0000', + }, + barBackground: '#F4F4F5', + barForeground: '#EB8C30', + borderColor: '#E4E2E2', + avatarPlaceholderColor: '#FE428E', + logoColor: '#EB8C30', +} + export const preset: Record = { light, dark, @@ -348,5 +376,6 @@ export const preset: Record = { kawaiiCat, retro, darkEmerald, - dracula + dracula, + WatchdogGradient }