diff --git a/packages/app/constants/userLinksDecorators.js b/packages/app/constants/userLinksDecorators.js new file mode 100644 index 00000000..4704c766 --- /dev/null +++ b/packages/app/constants/userLinksDecorators.js @@ -0,0 +1,55 @@ +export default { + "github": { + icon: "SiGithub", + label: "GitHub", + hrefResolve: "https://github.com/" + }, + "twitter": { + icon: "SiTwitter", + label: "Twitter", + hrefResolve: "https://twitter.com/" + }, + "instagram": { + icon: "SiInstagram", + label: "Instagram", + hrefResolve: "https://instagram.com/" + }, + "facebook": { + icon: "SiFacebook", + label: "Facebook", + hrefResolve: "https://facebook.com/" + }, + "youtube": { + icon: "SiYoutube", + label: "YouTube", + hrefResolve: "https://youtube.com/channel/" + }, + "twitch": { + icon: "SiTwitch", + label: "Twitch", + hrefResolve: "https://twitch.tv/" + }, + "linkedin": { + icon: "SiLinkedin", + label: "LinkedIn", + hrefResolve: "https://linkedin.com/in/" + }, + "reddit": { + icon: "SiReddit", + label: "Reddit", + hrefResolve: "https://reddit.com/u/" + }, + "vrchat": { + icon: "VrChat", + label: "VRChat", + hrefResolve: "https://vrchat.com/home/user/" + }, + "discord": { + icon: "SiDiscord", + label: "Discord", + }, + "custom": { + icon: "MdLink", + label: "Custom", + } +} \ No newline at end of file diff --git a/packages/app/src/components/UserCard/index.jsx b/packages/app/src/components/UserCard/index.jsx index a499aec6..4081d35a 100755 --- a/packages/app/src/components/UserCard/index.jsx +++ b/packages/app/src/components/UserCard/index.jsx @@ -1,11 +1,68 @@ import React from "react" import * as antd from "antd" -import { Icons } from "components/Icons" +import { Icons, createIconRender } from "components/Icons" import { Image, UserBadges } from "components" +import linksDecorators from "schemas/userLinksDecorators" + import "./index.less" +function processValue(value, decorator) { + if (decorator.hrefResolve) { + if (!String(value).includes(decorator.hrefResolve)) { + return `${decorator.hrefResolve}${value}` + } + } + + return value +} + +const UserLink = (props) => { + let { index, link } = props + + link.key = link.key.toLowerCase() + + const decorator = linksDecorators[link.key] ?? {} + + link.value = processValue(link.value, decorator) + + const hasHref = String(link.value).includes("://") + + const handleOnClick = () => { + if (!hasHref) { + return false + } + + window.open(link.value, "_blank") + } + + const renderName = () => { + if (decorator.hrefResolve) { + return decorator.label ?? link.value + } + + return link.value + } + + return
+ { + renderName() + } +
+