62 lines
1.6 KiB
React
62 lines
1.6 KiB
React
|
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>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|