62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
import { View, Text } from "react-native";
|
||
import React from "react";
|
||
import { useTailwind } from "tailwind-rn";
|
||
|
||
/*
|
||
参数格式：
|
||
{
|
||
type:"sm"|"lg", 大小
|
||
status:"online"|"offline"|"chatting", 状态
|
||
position:"absolute"|"relative", 位置（其实就是tailwind属性）
|
||
}
|
||
*/
|
||
|
||
export default function UserStatus({ type, status, position }) {
|
||
const tailwind = useTailwind();
|
||
const handleColor = () => {
|
||
if (status === "online") {
|
||
return { color: "#a3e635", text: "在线" };
|
||
} else if (status === "offline") {
|
||
return { color: "#facc15", text: "活跃" };
|
||
} else {
|
||
return { color: "#dc2626", text: "在聊" };
|
||
}
|
||
};
|
||
const statusPill = handleColor();
|
||
return (
|
||
<>
|
||
{type === "lg" ? (
|
||
<View
|
||
style={{
|
||
backgroundColor: "rgba(0,0,0,0.7)",
|
||
...tailwind(
|
||
"flex-row justify-between items-center rounded-xl px-2 py-1 z-20"
|
||
),
|
||
...tailwind(position),
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: statusPill.color,
|
||
...tailwind("w-2 h-2 rounded-full"),
|
||
}}
|
||
></View>
|
||
<Text style={tailwind("text-white ml-1")}>{statusPill.text}</Text>
|
||
</View>
|
||
) : (
|
||
<View
|
||
style={{
|
||
backgroundColor: statusPill.color,
|
||
...tailwind(
|
||
"flex-row justify-between items-center rounded-xl px-2 py-0.5 z-20"
|
||
),
|
||
...tailwind(position),
|
||
}}
|
||
>
|
||
<Text style={tailwind("text-white text-xs")}>{statusPill.text}</Text>
|
||
</View>
|
||
)}
|
||
</>
|
||
);
|
||
}
|