61 lines
2.5 KiB
TypeScript
61 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { Zap, Bluetooth } from 'lucide-react';
|
|
import { DeviceStatus } from '../types';
|
|
|
|
interface HardwareStatusProps {
|
|
status: DeviceStatus;
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
const HardwareStatus: React.FC<HardwareStatusProps> = ({ status, onClick, className = '' }) => {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`flex items-center justify-end transition-all duration-500 shrink-0 ${className}`}
|
|
>
|
|
<div className={`
|
|
relative flex items-center h-7 pl-3 pr-3 rounded-full
|
|
bg-[#1A1625]/80 backdrop-blur-md border border-white/10 shadow-sm
|
|
active:scale-95 transition-all duration-300 group hover:border-[#A855F7]/30
|
|
`}>
|
|
|
|
{/* Connection Status Icon */}
|
|
<div className="relative flex items-center justify-center w-3 h-3 mr-2">
|
|
{status.connected ? (
|
|
<>
|
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#10B981] opacity-20"></span>
|
|
<Bluetooth size={12} className="text-[#10B981] relative z-10" />
|
|
</>
|
|
) : (
|
|
<div className="w-1.5 h-1.5 rounded-full bg-gray-600"></div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="w-[1px] h-2.5 bg-white/10 mr-2"></div>
|
|
|
|
{/* Battery Status */}
|
|
{status.connected ? (
|
|
<div className="flex items-center gap-1">
|
|
<span className={`text-[10px] font-mono font-bold tracking-wide tabular-nums ${status.battery < 20 ? 'text-[#F43F5E]' : 'text-[#E2E8F0]'}`}>
|
|
{Math.floor(status.battery)}%
|
|
</span>
|
|
<Zap
|
|
size={9}
|
|
className={`${status.battery < 20 ? 'text-[#F43F5E]' : 'text-[#A855F7]'} ${status.battery < 20 ? 'animate-pulse' : ''}`}
|
|
fill={status.battery < 20 ? "currentColor" : "currentColor"}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<span className="text-[9px] text-gray-500 font-medium tracking-wide">未连接</span>
|
|
)}
|
|
|
|
{/* Subtle Inner Glow */}
|
|
<div className="absolute inset-0 rounded-full border border-white/5 pointer-events-none group-hover:border-[#A855F7]/20 transition-colors"></div>
|
|
</div>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default HardwareStatus; |