diff --git a/src/renderer/components/settings/supporters-view/supporter-item.component.tsx b/src/renderer/components/settings/supporters-view/supporter-item.component.tsx index af49e4cb..ac0902b7 100644 --- a/src/renderer/components/settings/supporters-view/supporter-item.component.tsx +++ b/src/renderer/components/settings/supporters-view/supporter-item.component.tsx @@ -1,19 +1,40 @@ -import { CSSProperties } from "react"; +import React, { CSSProperties } from "react"; import { Supporter } from "shared/models/supporters"; import { motion } from "framer-motion"; import txtBg from "../../../../../assets/images/gifs/txt-bg.gif" +import { IpcService } from "renderer/services/ipc.service"; interface Props { supporter: Supporter, delay?: number } export function SupporterItem({supporter, delay}: Props) { + const ipcService = IpcService.getInstance(); + + const openSupporterLink = () => supporter.link && ipcService.sendLazy("new-window", {args: supporter.link}); + const additionnalStyles: CSSProperties = (() => { - if(supporter.type === "gold"){ return {color: "#ffe270", textShadow: "0px 0px 10px #ffdd59", backgroundImage: `url(${txtBg})`, backgroundSize: "70% 15px", backgroundRepeat: "no-repeat", backgroundPosition: "center"}; } - if(supporter.type === "diamond"){ return {color: "#e574fc", textShadow: "0px 0px 15px #e056fd", backgroundImage: `url(${txtBg})`, backgroundSize: "70% 19px", backgroundRepeat: "no-repeat", backgroundPosition: "center"}; } + const commonStyles: CSSProperties = {backgroundImage: `url(${txtBg})`, backgroundRepeat: "no-repeat", backgroundPosition: "center"} + if(supporter.type === "gold"){ return {color: "#ffe270", textShadow: "0px 0px 10px #ffdd59", backgroundSize: "70% 15px", ...commonStyles}; } + if(supporter.type === "diamond"){ return {color: "#e574fc", textShadow: "0px 0px 15px #e056fd", backgroundSize: "70% 19px", ...commonStyles}; } + if(supporter.type === "sponsor"){ return {color: "#0be881", textShadow: "0px 0px 15px #0be881", backgroundSize: "70% 19px", ...commonStyles}; } return {}; - })() + })(); + + const renderSpan = () => { + return {supporter.username}; + } + + const renderItem = () => { + if(supporter.type !== "sponsor"){ return renderSpan(); } + return ( + + + {renderSpan()} + + ) + } return ( - {supporter.username} + renderItem() ) } diff --git a/src/shared/models/supporters/supporter.interface.ts b/src/shared/models/supporters/supporter.interface.ts index f3ed768a..965b8324 100644 --- a/src/shared/models/supporters/supporter.interface.ts +++ b/src/shared/models/supporters/supporter.interface.ts @@ -4,5 +4,5 @@ export interface Supporter { username: string, type?: SupporterType, link?: string, - image?: string, + img?: string, } \ No newline at end of file diff --git a/src/shared/models/supporters/supporter.model.ts b/src/shared/models/supporters/supporter.model.ts deleted file mode 100644 index e8742c77..00000000 --- a/src/shared/models/supporters/supporter.model.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { SupporterType } from "./supporter.type"; -import { SupporterInterface } from "./supporter.interface"; - -export class SupporterModel{ - constructor(private args: SupporterInterface){} - - public get username(): string{ return this.args.username; } - public get type(): SupporterType{ return this.args.type; } - - public get link(): string{ - if(this.type === "basic"){ return null; } - return this.args.link; - } - - public get image(): string{ - if(this.type !== "sponsor"){ return null; } - return this.args.image; - } -} \ No newline at end of file