harukin-expo-dev-env
f210ca4d77
- Implemented StationListLoadingState component for loading messages. - Created MenuLED component to display LED information with loading animations. - Developed MenuMap component for interactive map features, including user location markers and station markers. - Introduced LEDFrame component for consistent styling of LED displays. - Enhanced LED_vision component to support embedded rendering and content readiness. - Added menuStationSelectors for managing nearby and favorite station groups. - Updated Menu component to integrate new loading states and map functionalities. - Added tests for menuStationSelectors to ensure correct grouping and selection logic.
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Text, View } from "react-native";
|
|
import LottieView from "lottie-react-native";
|
|
import { useThemeColors } from "@/lib/theme";
|
|
import { useResponsive } from "@/lib/responsive";
|
|
|
|
type StationListLoadingStateProps = {
|
|
width: number;
|
|
message: string;
|
|
};
|
|
|
|
export const StationListLoadingState: FC<StationListLoadingStateProps> = ({
|
|
width,
|
|
message,
|
|
}) => {
|
|
const { colors, fixed } = useThemeColors();
|
|
const { fontScale } = useResponsive();
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
width: width * 0.8,
|
|
height: ((width * 0.8) / 20) * 9,
|
|
borderColor: fixed.primary,
|
|
borderWidth: 1,
|
|
backgroundColor: colors.background,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<LottieView
|
|
autoPlay
|
|
loop
|
|
style={{ width: 56, height: 56 }}
|
|
source={require("@/assets/51690-loading-diamonds.json")}
|
|
/>
|
|
<Text
|
|
style={{
|
|
marginTop: 8,
|
|
color: colors.textSecondary,
|
|
fontSize: fontScale(14),
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{message}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|