support sponsor supporter

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 <motion.span className="text-2xl font-bold px-3 pb-1" style={additionnalStyles} initial={{y: "100%", opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: delay}}>{supporter.username}</motion.span>;
+    }
+
+    const renderItem = () => {
+        if(supporter.type !== "sponsor"){ return renderSpan(); }
+        return (
+            <motion.div className={`flex flex-col justify-center items-center mx-4 ${supporter.link && "cursor-pointer"}`} onClick={openSupporterLink} initial={{y: "100%", opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: delay}}>
+                <img className="max-w-xs max-h-52 mb-2" src={supporter.img}/>
+                {renderSpan()}
+            </motion.div>
+        )
+    }
 
     return (
-        <motion.span className="text-2xl font-bold px-3 pb-1" style={additionnalStyles} initial={{y: "100%", opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: delay}}>{supporter.username}</motion.span>
+        renderItem()
     )
 }

src/shared/models/supporters/supporter.interface.ts

@@ -4,5 +4,5 @@ export interface Supporter {
     username: string,
     type?: SupporterType,
     link?: string,
-    image?: string,
+    img?: string,
 }

src/shared/models/supporters/supporter.model.ts

@@ -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;
-    }
-}