From 6a27346ee0a5ba29331a42692d61494b806d42ea Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 4 Sep 2021 16:35:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=85=B3?=
 =?UTF-8?q?=E4=BA=8E=E9=A1=B5=E5=B9=B6=E5=A2=9E=E5=8A=A0=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?logo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/modals/SettingsView/About.tsx  | 58 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/web/src/components/modals/SettingsView/About.tsx b/web/src/components/modals/SettingsView/About.tsx
index 27397fb4..901a8b64 100644
--- a/web/src/components/modals/SettingsView/About.tsx
+++ b/web/src/components/modals/SettingsView/About.tsx
@@ -2,14 +2,34 @@ import { Typography } from 'antd';
 import React from 'react';
 import { version } from 'tailchat-shared';
 import logoUrl from '@assets/images/logo.svg';
+import { Icon } from '@iconify/react';
 
-const { Paragraph, Text } = Typography;
+const { Paragraph, Text, Link } = Typography;
+
+const LogoLink: React.FC<{
+  src: string;
+  icon: React.ReactNode | string;
+}> = React.memo((props) => {
+  const { src, icon } = props;
+
+  return (
+    <a
+      className="p-2.5 hover:bg-black hover:bg-opacity-20 rounded"
+      href={src}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {typeof icon === 'string' ? <Icon icon={icon} /> : icon}
+    </a>
+  );
+});
+LogoLink.displayName = 'LogoLink';
 
 export const SettingsAbout: React.FC = React.memo(() => {
   return (
     <div className="select-text">
       <img
-        className="float-right select-none"
+        className="float-right select-none bg-black rounded-2xl bg-opacity-40 p-2"
         width={128}
         height={128}
         src={logoUrl}
@@ -32,6 +52,40 @@ export const SettingsAbout: React.FC = React.memo(() => {
       </Paragraph>
 
       <Paragraph>当前版本: {version}</Paragraph>
+
+      <div className="text-8xl flex flex-wrap space-x-4 bg-black p-4 rounded-md bg-opacity-20">
+        <LogoLink
+          src="https://github.com/msgbyte/tailchat"
+          icon="logos:github-octocat"
+        />
+        <LogoLink
+          src="https://en.wikipedia.org/wiki/Open_source"
+          icon="logos:opensource"
+        />
+        <LogoLink src="https://www.docker.com/" icon="logos:docker-icon" />
+        <LogoLink
+          src="https://ministar.moonrailgun.com/"
+          icon={
+            <img
+              className="w-24 h-24"
+              src="https://ministar.moonrailgun.com/img/logo.svg"
+            />
+          }
+        />
+        <LogoLink src="https://zh-hans.reactjs.org/" icon="logos:react" />
+        <LogoLink src="https://redux.js.org/" icon="logos:redux" />
+        <LogoLink
+          src="https://www.typescriptlang.org/"
+          icon="logos:typescript-icon"
+        />
+      </div>
+
+      <Paragraph className="mt-4">
+        开源地址:{' '}
+        <Link href="https://github.com/msgbyte/tailchat" target="_blank">
+          https://github.com/msgbyte/tailchat
+        </Link>
+      </Paragraph>
     </div>
   );
 });