93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { CircleAlert, Mail, Volume2 } from 'lucide-react'
|
|
import avatar from '@/assets/system/avatar.webp'
|
|
import logo from '@/assets/system/logo.webp'
|
|
import wifi from '@/assets/system/wifi.webp'
|
|
import { SmartImage } from '@/components/smart-image.tsx'
|
|
|
|
export function DesktopHeader() {
|
|
return (
|
|
<header className="sticky top-0 z-30 border-b border-white/8 bg-slate-950/70 backdrop-blur-xl">
|
|
<div className="h-[70px] w-full flex items-center px-[12px]">
|
|
<div className="h-full flex px-[10px] justify-center items-center border-r border-[rgba(128,223,231,0.65)]">
|
|
<SmartImage
|
|
src={logo}
|
|
alt="logo"
|
|
priority
|
|
className="w-[320px] h-[40px]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-[120px] flex justify-center items-center gap-[10px] h-full border-r border-[rgba(128,223,231,0.65)]">
|
|
<SmartImage
|
|
src={wifi}
|
|
alt="wifi"
|
|
priority
|
|
className="w-[28px] h-[20px]"
|
|
/>
|
|
<div className={'text-[#74FF69] text-[20px]'}>
|
|
24 <span className={'text-[16px]'}>ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-[150px] flex flex-col justify-center items-center gap-[5px] h-full border-r border-[rgba(128,223,231,0.65)]">
|
|
<div>System Time</div>
|
|
<div>20:05:12 GMT+08</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex items-center justify-around gap-[10px] h-full px-[10px] text-[#D5FBFF]">
|
|
<div className={'flex items-center gap-[5px] common-neon-inset'}>
|
|
<CircleAlert color={'#57B8BF'} size={16} />
|
|
<div>Rules & Ddds</div>
|
|
</div>
|
|
|
|
<div className={'flex items-center gap-[5px] common-neon-inset'}>
|
|
<Mail color={'#57B8BF'} size={16} />
|
|
<div>Pesan</div>
|
|
</div>
|
|
|
|
<div className={'flex items-center gap-[5px] common-neon-inset'}>
|
|
<Volume2 color={'#57B8BF'} size={16} />
|
|
<div>BGM</div>
|
|
</div>
|
|
|
|
<div className={'flex items-center gap-[5px] common-neon-inset'}>
|
|
<CircleAlert color={'#57B8BF'} size={16} />
|
|
<div>ID</div>
|
|
</div>
|
|
|
|
<div className={'relative flex items-center justify-center'}>
|
|
<SmartImage
|
|
src={avatar}
|
|
alt="avatar"
|
|
priority
|
|
className="absolute left-[20px] top-0 z-20 w-[50px] h-[50px]"
|
|
/>
|
|
<div
|
|
className={
|
|
'common-neon-inset !py-[20px] flex justify-end items-center w-[160px] h-[36px]'
|
|
}
|
|
>
|
|
Biomond Balance
|
|
</div>
|
|
</div>
|
|
<div className={'relative flex items-center justify-center'}>
|
|
<SmartImage
|
|
src={avatar}
|
|
alt="avatar"
|
|
priority
|
|
className="absolute left-[20px] top-0 z-20 w-[50px] h-[50px]"
|
|
/>
|
|
<div
|
|
className={
|
|
'common-neon-inset !py-[20px] flex items-center justify-end box-border w-[160px] h-[36px]'
|
|
}
|
|
>
|
|
Biomond Balance
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|