{`Locations (${displayedLocations.length})`}
- {/* {selection?.kind === 'instance' && ( - - )} */} -Device configuration
-Public key
-Addresses
-Listen port
-VPN Server Configuration
-Public key
-{data.pubkey}
-Allowed IPs
-DNS servers
-Persistent keep alive
-Latest Handshake
-{section.title}
+{row.label}
+{row.value}
+{location.name}
+ {onInfoClick && ( + + )} {location.active && (Online
diff --git a/new-ui/src/shared/components/LocationCard/components/LocationCardHeaderInfo/style.scss b/new-ui/src/shared/components/LocationCard/components/LocationCardHeaderInfo/style.scss index 77d2601e..3bb5f3fb 100644 --- a/new-ui/src/shared/components/LocationCard/components/LocationCardHeaderInfo/style.scss +++ b/new-ui/src/shared/components/LocationCard/components/LocationCardHeaderInfo/style.scss @@ -24,7 +24,18 @@ flex-flow: row nowrap; align-items: center; justify-content: flex-start; - column-gap: var(--spacing-sm); + column-gap: var(--spacing-xs); + } + + .info-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + margin: 0; + border: 0; + background: transparent; + cursor: pointer; } .online-badge { diff --git a/new-ui/src/shared/components/OverviewLocationCard/OverviewLocationCard.tsx b/new-ui/src/shared/components/OverviewLocationCard/OverviewLocationCard.tsx index 32c2a595..5e00ecdb 100644 --- a/new-ui/src/shared/components/OverviewLocationCard/OverviewLocationCard.tsx +++ b/new-ui/src/shared/components/OverviewLocationCard/OverviewLocationCard.tsx @@ -1,6 +1,7 @@ import './style.scss'; import { useMutation } from '@tanstack/react-query'; +import { useNavigate } from '@tanstack/react-router'; import clsx from 'clsx'; import { useMemo } from 'react'; import { ConnectModalView } from '../../../pages/full/OverviewPage/components/ConnectModal/hooks/types'; @@ -24,6 +25,7 @@ interface Props { } export const OverviewLocationCard = ({ location, instance }: Props) => { + const navigate = useNavigate(); const { mutate: updateRouting } = useMutation({ mutationFn: api.updateLocationRouting, meta: { @@ -103,7 +105,19 @@ export const OverviewLocationCard = ({ location, instance }: Props) => { return (@EH>^652`>LZCzP)DL4x!7lCV6Lt0Ig`dkOFd$#~;vewemc1+^(
zXS)ZNvdrj? 7H0slH
ziJs*ZO8CGmEibRDN+5nJhjRK1_4&r)w-)!KZ}4BUtdc I#sPij{;yoj>~3<#sMRCPyk2*~Ue%+!M1Cp)
zXbX2}wG2oHsMB+iv9 rH;#h)}mg{XDgiHn>`Q7hP%>=L=fF!!HOLrACMZv#8b1@-<$KRBG2~5RXrE
z_bxEEMSkez{|46Oy}DXO6P;IV)$5qaN7gT4_9~z&n5R8`)L48dE8|OH{xf>)vV6t!
z#8u>_A1OK2sd>~CI-owkXfs(8bfu4Ij`1-3&dP=&ua(F43IsD;k2}~RfWcz}>jtuh
zK8<;Y$;mYOyV;F!5LCj_-TU>b*sCX%Yv0E}z6JbDz>I;YS> ek8_kr`BIhT9u(p~ta^r34Q702m&Pznq
z&Re|t!_z(!^Bw*Vl4(tBpEh0l_JzEKB>RhhjP#PwI?W$NouerLX!tV$DV6wMg~vJ!
zCpyuEjki0bVg5l=LHifoNX={XyCcvbd`Fuch<
1O5U_Nx84Y7KYR_4!G!dxl
zgy#9?k-lO&v9`gMOmcjMO9y-3OIpF@G@_JLBO=G+m&!F4*Vb{F=Fi1yZ_O|9=0-|1~zfok=I9WP@;B*piWHOHmhsO{k50yhPr3_F~@j?$-?)2G;n|@{@yS
z!M(lZq3e#3S}{Ymau}Am)!S%5
>?=O`zkxo=w!LZ8iT?rirO}
zvXXG{=y79GNj^TM2hKk9C;OP6{9~48rqOju0?L&ZUtpRIafA`Ebmdhz#pmV@h=w6z
z9$)?DnMT{5(S`BkdK4TQT?jjQ%ZSL6lNG0$LABPlBTSD~Ck?b?{Qf)p)Jq{Ej}@y4
zQP5Qi^d$j#Q6&5yn6RS!GiUb;noFj{fq2UBSIZi7k~+l9X;=d7EjDt*>}KyY$0%mc
z5h4NtX#i{`cW~NE=50W>@%rqVv^LilfKQwgfoD=rsrt%R^YA4wYwG=U(OE2Q`P;zU
zB*FOiQImoyB#&U_Ni*N~V>Hj%QPSRwc4)DlH|((Pxi4opr3+!fFJV=6nS7|ywoJ^M
zbNVLLZy0kOeL4Etn^d3J7}@cy5}E;62kL&&ict%ihi#i;WoAr*z2PmyS*J?tEMfhO
zwsxsRcYtE>fY^TR?MNAG-c!y-f^Ooi*n{vDc3?u4W|GwHFNb!=%%y9;d-X;K-6L^V
zEBm)~`+ua5F!*1Q!{Otg;$xUuumuty-Zv
zRMru3=mGT7AJHx^erQ^wwj<$u=|5C^5)M73ywdO#fV^v`vlgM*-<*pr(5}H=_ksw#
z=(_db6)3i}B45ym068squ3m}VmpDM$feR5Ta4PTu_p(GD+e_yO!&dx}u)7NL#Cv&N
zbDftK@qrNKjszbQhDvm)*AB7TQa_%{{I@|1ce4-4p=+4WHAJPlKK}6ST_%=EA_7TF
zt|)j0(`I#VY