add cursor pointer, add server detail animation
This commit is contained in:
kandrusyak
@@ -8,6 +8,7 @@ import VPNServeIcon from '../../images/vpn_server_icon.png';
|
||||
import { Filters } from '../../components/Filters';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import ReactCountryFlag from 'react-country-flag';
|
||||
import Transition from '../../utils/Transition';
|
||||
|
||||
const filters = {
|
||||
'View All': 'all',
|
||||
@@ -150,107 +151,113 @@ PersistentKeepalive = 25
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
{servers?.length > 0 && servers?.[selectedServer]?.state && (
|
||||
<div>
|
||||
<div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[390px] lg:h-[calc(100vh-64px)]">
|
||||
<div className="py-8 px-4 lg:px-8 h-full">
|
||||
<div className="max-w-sm mx-auto lg:max-w-none flex flex-col justify-between h-full">
|
||||
<div>
|
||||
<div className="text-slate-800 font-semibold text-center mb-6">
|
||||
{servers?.[selectedServer]?.country} -{' '}
|
||||
{servers?.[selectedServer]?.region}
|
||||
</div>
|
||||
|
||||
{/* Credit Card */}
|
||||
<div className="flex justify-center">
|
||||
<QRCodeSVG
|
||||
value={qrContent}
|
||||
size={200}
|
||||
includeMargin
|
||||
level="L"
|
||||
/>
|
||||
</div>
|
||||
<Transition
|
||||
show={servers?.length > 0 && servers?.[selectedServer]?.state}
|
||||
enter="transition-transform duration-200 ease-in"
|
||||
enterStart="translate-x-full"
|
||||
enterEnd="translate-x-"
|
||||
leave="transition-transform duration-200 ease-out"
|
||||
leaveStart="translate-x-"
|
||||
leaveEnd="translate-x-full"
|
||||
>
|
||||
<div className="lg:sticky lg:top-16 bg-slate-50 lg:overflow-x-hidden lg:overflow-y-auto no-scrollbar lg:shrink-0 border-t lg:border-t-0 lg:border-l border-slate-200 lg:w-[390px] lg:h-[calc(100vh-64px)]">
|
||||
<div className="py-8 px-4 lg:px-8 h-full">
|
||||
<div className="max-w-sm mx-auto lg:max-w-none flex flex-col justify-between h-full">
|
||||
<div>
|
||||
<div className="text-slate-800 font-semibold text-center mb-6">
|
||||
{servers?.[selectedServer]?.country} -{' '}
|
||||
{servers?.[selectedServer]?.region}
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="mt-6">
|
||||
<div className="text-sm font-semibold text-slate-800 mb-1">
|
||||
Details
|
||||
</div>
|
||||
<ul>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Server address</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">
|
||||
{servers?.[selectedServer]?.endpoint}
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Status</div>
|
||||
<div className="flex items-center whitespace-nowrap">
|
||||
{servers?.[selectedServer]?.state ? (
|
||||
<>
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
|
||||
<div className="text-sm font-medium text-slate-800">
|
||||
Active
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-2 h-2 rounded-full mr-2 bg-amber-500" />
|
||||
<div className="text-sm font-medium text-slate-800">
|
||||
Offline
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Credit Card */}
|
||||
<div className="flex justify-center">
|
||||
<QRCodeSVG
|
||||
value={qrContent}
|
||||
size={200}
|
||||
includeMargin
|
||||
level="L"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Payment Limits */}
|
||||
<div className="mt-6">
|
||||
<div className="text-sm font-semibold text-slate-800 mb-4">
|
||||
Transfer
|
||||
</div>
|
||||
<div className="pb-4 border-b border-slate-200">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<div>Spent This Month</div>
|
||||
<div className="italic">
|
||||
{servers?.[selectedServer]?.transferSum}{' '}
|
||||
<span className="text-slate-400">/</span> 50.00
|
||||
GB
|
||||
</div>
|
||||
{/* Details */}
|
||||
<div className="mt-6">
|
||||
<div className="text-sm font-semibold text-slate-800 mb-1">
|
||||
Details
|
||||
</div>
|
||||
<ul>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Server address</div>
|
||||
<div className="text-sm font-medium text-slate-800 ml-2">
|
||||
{servers?.[selectedServer]?.endpoint}
|
||||
</div>
|
||||
<div className="relative w-full h-2 bg-slate-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-indigo-500"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: `${servers?.[selectedServer]?.trafficUsed}%`,
|
||||
}}
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||
<div className="text-sm">Status</div>
|
||||
<div className="flex items-center whitespace-nowrap">
|
||||
{servers?.[selectedServer]?.state ? (
|
||||
<>
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 mr-2" />
|
||||
<div className="text-sm font-medium text-slate-800">
|
||||
Active
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-2 h-2 rounded-full mr-2 bg-amber-500" />
|
||||
<div className="text-sm font-medium text-slate-800">
|
||||
Offline
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Payment Limits */}
|
||||
<div className="mt-6">
|
||||
<div className="text-sm font-semibold text-slate-800 mb-4">
|
||||
Transfer
|
||||
</div>
|
||||
<div className="pb-4 border-b border-slate-200">
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<div>Spent This Month</div>
|
||||
<div className="italic">
|
||||
{servers?.[selectedServer]?.transferSum}{' '}
|
||||
<span className="text-slate-400">/</span> 50.00 GB
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full h-2 bg-slate-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-indigo-500"
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: `${servers?.[selectedServer]?.trafficUsed}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600"
|
||||
onClick={downloadTxtFile}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
|
||||
</svg>
|
||||
<span className="ml-2">Download</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600"
|
||||
onClick={downloadTxtFile}
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4 fill-current text-slate-400 shrink-0 rotate-180"
|
||||
viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M8 4c-.3 0-.5.1-.7.3L1.6 10 3 11.4l4-4V16h2V7.4l4 4 1.4-1.4-5.7-5.7C8.5 4.1 8.3 4 8 4ZM1 2h14V0H1v2Z" />
|
||||
</svg>
|
||||
<span className="ml-2">Download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Transition>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ function SidebarLinkGroup({ children, activecondition }) {
|
||||
|
||||
return (
|
||||
<li
|
||||
className={`px-3 py-2 rounded-sm mb-0.5 last:mb-0 ${
|
||||
className={`px-3 py-2 rounded-sm mb-0.5 cursor-pointer last:mb-0 ${
|
||||
activecondition && 'bg-slate-900'
|
||||
}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user