45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { View, Text } from '@tarojs/components'
|
||
|
|
import { ChannelStatusBadge } from './StatusBadge'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
channelId: number
|
||
|
|
status: number
|
||
|
|
voltage?: number
|
||
|
|
current?: number
|
||
|
|
onClick?: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const COLORS: Record<number, string> = {
|
||
|
|
0: '#9ca3af', // idle
|
||
|
|
1: '#16a34a', // charging
|
||
|
|
2: '#dc2626', // fault
|
||
|
|
3: '#d1d5db', // offline
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ChannelCard({ channelId, status, voltage, current, onClick }: Props) {
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderRadius: 12,
|
||
|
|
padding: 16,
|
||
|
|
border: `2px solid ${COLORS[status] || '#e5e7eb'}`,
|
||
|
|
cursor: onClick ? 'pointer' : undefined,
|
||
|
|
}}
|
||
|
|
onClick={onClick}
|
||
|
|
>
|
||
|
|
<View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
|
||
|
|
<Text style={{ fontSize: 24, fontWeight: 600, color: '#111' }}>#{channelId}</Text>
|
||
|
|
<ChannelStatusBadge status={status} />
|
||
|
|
</View>
|
||
|
|
{voltage !== undefined && (
|
||
|
|
<Text style={{ fontSize: 22, color: '#6b7280' }}>{voltage.toFixed(1)}V</Text>
|
||
|
|
)}
|
||
|
|
{current !== undefined && (
|
||
|
|
<Text style={{ fontSize: 22, color: '#6b7280' }}>{current.toFixed(1)}A</Text>
|
||
|
|
)}
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|