35 lines
1,012 B
TypeScript
35 lines
1,012 B
TypeScript
// packages/ui-native/src/components/Led.tsx
|
|
// RN용 Led — 작은 발광 원
|
|
|
|
import { View, type ViewStyle } from 'react-native'
|
|
import { useNativePalette } from '../theme-context'
|
|
|
|
export interface LedProps {
|
|
color?: 'amber' | 'green' | 'red' | 'orange' | 'blue'
|
|
on?: boolean
|
|
size?: number
|
|
}
|
|
|
|
export function Led({ color = 'amber', on = true, size = 8 }: LedProps): React.ReactElement {
|
|
const palette = useNativePalette()
|
|
const colorMap: Record<NonNullable<LedProps['color']>, string> = {
|
|
amber: palette.accent.main,
|
|
green: palette.tag.green,
|
|
red: palette.tag.red,
|
|
orange: palette.tag.orange,
|
|
blue: palette.tag.blue
|
|
}
|
|
const c = colorMap[color]
|
|
const style: ViewStyle = {
|
|
width: size,
|
|
height: size,
|
|
borderRadius: size / 2,
|
|
backgroundColor: on ? c : palette.led.off,
|
|
shadowColor: c,
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: on ? 0.8 : 0,
|
|
shadowRadius: on ? 4 : 0,
|
|
elevation: on ? 2 : 0
|
|
}
|
|
return <View style={style} />
|
|
}
|