41 lines
1.0 KiB
JavaScript
41 lines
1.0 KiB
JavaScript
import { View, Text } from "react-native";
|
|
import React from "react";
|
|
import { useTailwind } from "tailwind-rn";
|
|
|
|
export default function Level({ level }) {
|
|
const tailwind = useTailwind();
|
|
const handleColor = () => {
|
|
switch (true) {
|
|
case level <= 10:
|
|
return "bg-gray-400";
|
|
case level > 10 && level <= 20:
|
|
return "bg-green-400";
|
|
case level > 20 && level <= 30:
|
|
return "bg-blue-400";
|
|
case level > 30 && level <= 40:
|
|
return "bg-fuchsia-400";
|
|
case level > 40 && level <= 50:
|
|
return "bg-yellow-400";
|
|
case level > 50:
|
|
return "bg-orange-400";
|
|
default:
|
|
return "bg-gray-400";
|
|
}
|
|
};
|
|
const color = handleColor();
|
|
return (
|
|
<View
|
|
style={{
|
|
...tailwind(
|
|
"shrink flex-none h-5 px-2 mx-1 rounded-full flex justify-center items-center"
|
|
),
|
|
...tailwind(color),
|
|
}}
|
|
>
|
|
<Text
|
|
style={tailwind("text-sm font-bold text-white")}
|
|
>{`Lv.${level}`}</Text>
|
|
</View>
|
|
);
|
|
}
|