tfo icon add

add tfo icon

2 files changed, 18 insertions, 6 deletions

diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 0fbd818..d3c0d36 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -55,6 +55,13 @@
             font-size: 0.7em;
         }
 }
+.tfoType {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .row {
   display: flex;
   align-items: center;
diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx
index a52d219..c9fc85e 100644
--- a/src/components/proxies/Proxy.tsx
+++ b/src/components/proxies/Proxy.tsx
@@ -55,8 +55,9 @@ type ProxyProps = {
   now?: boolean;
   proxy: any;
   latency: any;
-    isSelectable?: boolean;
-    udp: boolean;
+  isSelectable?: boolean;
+  udp: boolean;
+  tfo: boolean;
   onClick?: (proxyName: string) => unknown;
 };
 
@@ -70,7 +71,7 @@ function ProxySmallImpl({
 }: ProxyProps) {
   const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type), [
     latency,
-      proxy,
+    proxy,
 
   ]);
   const title = useMemo(() => {
@@ -144,8 +145,7 @@ function ProxyImpl({
   now,
   name,
   proxy,
-    latency,
-  udp,
+  latency,
   isSelectable,
   onClick,
 }: ProxyProps) {
@@ -157,6 +157,10 @@ function ProxyImpl({
         if (!t) return '';
         return 'UDP';
     }
+    function formatTfo (t: boolean) {
+        if (!t) return '';
+        return <img className={s0.tfoType} src="../../assets/tfo.svg" alt="" />;
+    }
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
       if (e.keyCode === keyCodes.Enter) {
@@ -185,7 +189,8 @@ function ProxyImpl({
         <ProxyNameTooltip label={name} aria-label={'proxy name: ' + name}>
           <span>{name}</span>
         </ProxyNameTooltip>
-       <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>{formatUdpType(proxy.udp)}</span>
+              <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>{formatUdpType(proxy.udp)}</span>
+              {formatTfo(proxy.tfo)}
       </div>
       <div className={s0.row}>
               <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>