Merge pull request #91 from doras-to/staging

Staging added doras icons to buttons
dorasto · Dec 27, 2023 · 8de8c64 · 8de8c64
2 parents d268af0 + 4a584cb
commit 8de8c64
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/components/linkspage/LinksButton.tsx b/src/components/linkspage/LinksButton.tsx
@@ -1,6 +1,7 @@
 import type { Links } from "@/server_types";
 import React from "react";
-
+import * as tabler from "@tabler/icons-react";
+import DorasIcons from "@/lib/DorasIcons";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "../ui/button";
 interface Props {
@@ -20,6 +21,23 @@ function ClickButton(id: any, link: any) {
 }
 
 const LinksButton: React.FC<Props> = ({ id, text, href, bgColor, textColor, Icon, link, verifiedData, className, style }) => {
+    if (Icon.startsWith("Icon")) {
+        //@ts-ignore
+        Icon = (<div className={"absolute left-4 top-1/2 transform -translate-y-1/2"}>{React.createElement(tabler[link.icon], { size: 20 })}</div>)
+    } else if (Icon.startsWith("Doras")) {
+        let icon_item = DorasIcons.find(i => i.value == link.icon);
+        if (icon_item) {
+            //@ts-ignore
+            let img: string;
+            if (style.color == "white") {
+                img = icon_item.light
+            } else {
+                img = icon_item.dark
+            }
+            //@ts-ignore
+            Icon = (<img src={img} className={"absolute left-4 top-1/2 transform -translate-y-1/2"} style={{ width: 20, height: 20 }} />)
+        }
+    }
     const colorClasses = {
         bgColor: `bg-${bgColor}`,
         textColor: `text-${textColor} dark:text-${textColor}`
@@ -35,7 +53,8 @@ const LinksButton: React.FC<Props> = ({ id, text, href, bgColor, textColor, Icon
         return (
             <a className="w-full" href={href} target="_blank" onClick={() => ClickButton(id, link)}>
                 <button className={`w-full px-1 py-3 text-xl ${className} relative`} style={style}>
-                    <i className={"absolute left-4 top-1/2 transform -translate-y-1/2 " + Icon}></i>
+                    {/* <i className={"absolute left-4 top-1/2 transform -translate-y-1/2 " + Icon}></i> */}
+                    {Icon}
                     <span className={`block w-full text-center px-6 ${colorClasses.textColor} font-bold`}>{text}</span>
                 </button>
             </a>
@@ -63,7 +82,8 @@ const LinksButtonDialog: React.FC<PropsDialog> = ({ id, title, className, Icon,
         <Dialog>
             <DialogTrigger asChild>
                 <button className={`w-full px-1 py-3 text-xl ${className} relative`} style={style}>
-                    <i className={"absolute left-4 top-1/2 transform -translate-y-1/2 " + Icon}></i>
+                    {/* <i className={"absolute left-4 top-1/2 transform -translate-y-1/2 " + Icon}></i> */}
+                    {Icon}
                     <span className={`block w-full text-center px-6 ${colorClasses.textColor} font-bold`}>{text}</span>
                 </button>
             </DialogTrigger>

diff --git a/src/lib/DorasIcons.tsx b/src/lib/DorasIcons.tsx
@@ -0,0 +1,6 @@
+const DorasIcons = [{
+    value: "DorasIcon",
+    dark: "https://cdn.doras.to/doras/icons/dark/doras.webp",
+    light: "https://cdn.doras.to/doras/icons/light/doras.webp"
+}];
+export default DorasIcons;