https://cybershoke.net/assets/OnlineFriendsModal-B7ab677Y.js

1import{j as e}from"./vendor-react-BGN68_Lp.js";import{x,I as c,g,b as t,N as f,a7 as h}from"./index-uear5Vpj.js";import{a as m,u}from"./vendor-redux-D8sX5Eqv.js";import{g as s}from"./vendor-styled-pkIKgjgv.js";import{u as v}from"./vendor-i18n-BWleq_Sd.js";import"./vendor-socket-DSYo_sTV.js";import"./vendor-router-CYD8mbvC.js";const j=s.div`
2    position: relative;
3    display: flex;
4    width: min(508px, 95vw);
5    max-height: calc(100vh - 32px);
6    flex-direction: column;
7    gap: 24px;
8    padding: 40px;
9    border-radius: 18px;
10    background: #171c2a;
11    font-family: 'Roboto';
12
13    @media (max-width: 600px) {
14        padding: 28px 20px 20px;
15    }
16`,b=s.div`
17    display: flex;
18    flex-direction: column;
19    gap: 8px;
20    padding-right: 24px;
21
22    h2 {
23        color: #fff;
24        font-size: 24px;
25        font-weight: 800;
26        text-transform: none;
27    }
28
29    p {
30        color: #b1bfd7;
31        font-size: 14px;
32        line-height: 20px;
33    }
34`,y=s.ul`
35    display: flex;
36    flex-direction: column;
37    gap: 4px;
38    max-height: 327px;
39    overflow-y: auto;
40    padding-right: 5px;
41
42    @media (max-width: 600px) {
43        max-height: 260px;
44    }
45`,r=s.li`
46    display: flex;
47    height: 51px;
48    flex-shrink: 0;
49    background: #21283b;
50    border-radius: 8px;
51    cursor: pointer;
52    transition: background 0.2s ease;
53
54    &:hover {
55        background: #252d42;
56    }
57`,w=s(f)`
58    display: flex;
59    align-items: center;
60    flex-grow: 1;
61    overflow: hidden;
62`,k=s.div`
63    width: 26px;
64    height: 26px;
65    margin-left: 12px;
66    margin-right: 15px;
67    flex-shrink: 0;
68
69    img {
70        width: 26px;
71        height: 26px;
72        border-radius: 50%;
73        display: block;
74    }
75`,_=s.span`
76    font-weight: 700;
77    font-size: 14px;
78    color: #9296ac;
79    overflow: hidden;
80    text-overflow: ellipsis;
81    white-space: nowrap;
82
83    ${r}:hover & {
84        color: #bfd5ff;
85    }
86`,M=s.div`
87    padding-right: 14px;
88    margin-left: 10px;
89    display: flex;
90    align-items: center;
91    flex-shrink: 0;
92`,N=s.div`
93    font-weight: 400;
94    font-size: 12px;
95    color: #8191a7;
96    text-align: right;
97    display: flex;
98    align-items: center;
99    justify-content: flex-end;
100
101    ${r}:hover & {
102        display: none;
103    }
104`,S=s.span`
105    margin-left: 8px;
106    padding: 3px 7px 2px;
107    background: rgba(96, 128, 255, 0.16);
108    border-radius: 6px;
109    font-family: 'Roboto Condensed';
110    font-weight: bold;
111    font-size: 11px;
112    letter-spacing: 0.03em;
113    text-transform: uppercase;
114    color: #637cdd;
115`,z=s(h)`
116    display: none;
117
118    ${r}:hover & {
119        display: flex;
120    }
121`,F=()=>{const{t:o}=v(),n=m(),a=u(i=>i.modals.data.ONLINE_FRIENDS_MODAL.friends),l=()=>n(t(null)),d=i=>{l(),i.server_ip&&n(t("SERVER_MODAL",{ip:i.server_ip.split(":")[0],port:i.server_ip.split(":")[1],source:"online friends modal"}))};return e.jsxs(j,{id:"online-friends-modal",children:[e.jsx(x,{}),e.jsxs(b,{children:[e.jsx("h2",{children:o("FriendsOnMode")}),e.jsx("p",{children:o("OnlineFriendsListDescription")})]}),e.jsx(y,{className:"grey-scroll",children:a.map((i,p)=>e.jsxs(r,{children:[e.jsxs(w,{to:`/profile/${i.user_steamid}`,children:[e.jsx(k,{children:e.jsx("img",{loading:"lazy",src:i.avatar?i.avatar:c(`/storage/images/avatars/${i.steamid64}.jpg`),alt:""})}),e.jsx(_,{children:i.user_name})]}),e.jsxs(M,{children:[e.jsxs(N,{children:[i.server_name,i.server_category.includes("LITE")&&e.jsx(S,{children:"lite"})]}),e.jsxs(z,{onClick:()=>d(i),children:[o("Join3"),e.jsx("img",{loading:"lazy",src:g("/img/icons/connect.svg"),alt:""})]})]})]},p))})]})};export{F as default};