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 { Filters } from '../../components/Filters';
|
||||||
import { observer } from 'mobx-react-lite';
|
import { observer } from 'mobx-react-lite';
|
||||||
import ReactCountryFlag from 'react-country-flag';
|
import ReactCountryFlag from 'react-country-flag';
|
||||||
|
import Transition from '../../utils/Transition';
|
||||||
|
|
||||||
const filters = {
|
const filters = {
|
||||||
'View All': 'all',
|
'View All': 'all',
|
||||||
@@ -150,107 +151,113 @@ PersistentKeepalive = 25
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Sidebar */}
|
{/* 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 */}
|
<Transition
|
||||||
<div className="flex justify-center">
|
show={servers?.length > 0 && servers?.[selectedServer]?.state}
|
||||||
<QRCodeSVG
|
enter="transition-transform duration-200 ease-in"
|
||||||
value={qrContent}
|
enterStart="translate-x-full"
|
||||||
size={200}
|
enterEnd="translate-x-"
|
||||||
includeMargin
|
leave="transition-transform duration-200 ease-out"
|
||||||
level="L"
|
leaveStart="translate-x-"
|
||||||
/>
|
leaveEnd="translate-x-full"
|
||||||
</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>
|
||||||
|
|
||||||
{/* Details */}
|
{/* Credit Card */}
|
||||||
<div className="mt-6">
|
<div className="flex justify-center">
|
||||||
<div className="text-sm font-semibold text-slate-800 mb-1">
|
<QRCodeSVG
|
||||||
Details
|
value={qrContent}
|
||||||
</div>
|
size={200}
|
||||||
<ul>
|
includeMargin
|
||||||
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
level="L"
|
||||||
<div className="text-sm">Server address</div>
|
/>
|
||||||
<div className="text-sm font-medium text-slate-800 ml-2">
|
</div>
|
||||||
{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>
|
|
||||||
|
|
||||||
{/* Payment Limits */}
|
{/* Details */}
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<div className="text-sm font-semibold text-slate-800 mb-4">
|
<div className="text-sm font-semibold text-slate-800 mb-1">
|
||||||
Transfer
|
Details
|
||||||
</div>
|
</div>
|
||||||
<div className="pb-4 border-b border-slate-200">
|
<ul>
|
||||||
<div className="flex justify-between text-sm mb-2">
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||||
<div>Spent This Month</div>
|
<div className="text-sm">Server address</div>
|
||||||
<div className="italic">
|
<div className="text-sm font-medium text-slate-800 ml-2">
|
||||||
{servers?.[selectedServer]?.transferSum}{' '}
|
{servers?.[selectedServer]?.endpoint}
|
||||||
<span className="text-slate-400">/</span> 50.00
|
|
||||||
GB
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="relative w-full h-2 bg-slate-300">
|
</li>
|
||||||
<div
|
<li className="flex items-center justify-between py-3 border-b border-slate-200">
|
||||||
className="absolute inset-0 bg-indigo-500"
|
<div className="text-sm">Status</div>
|
||||||
aria-hidden="true"
|
<div className="flex items-center whitespace-nowrap">
|
||||||
style={{
|
{servers?.[selectedServer]?.state ? (
|
||||||
width: `${servers?.[selectedServer]?.trafficUsed}%`,
|
<>
|
||||||
}}
|
<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>
|
</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>
|
</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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</Transition>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ function SidebarLinkGroup({ children, activecondition }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<li
|
<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'
|
activecondition && 'bg-slate-900'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user