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.
90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Text, TouchableOpacity, View } from "react-native";
|
|
import Ionicons from "react-native-vector-icons/Ionicons";
|
|
import { useThemeColors } from "@/lib/theme";
|
|
import { useResponsive } from "@/lib/responsive";
|
|
|
|
type FavoriteEmptyStateProps = {
|
|
width: number;
|
|
onOpenSearch: () => void;
|
|
};
|
|
|
|
export const FavoriteEmptyState: FC<FavoriteEmptyStateProps> = ({
|
|
width,
|
|
onOpenSearch,
|
|
}) => {
|
|
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,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingHorizontal: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="star-outline" size={28} color={fixed.primary} />
|
|
<Text
|
|
style={{
|
|
marginTop: 2,
|
|
color: colors.textAccent,
|
|
fontSize: fontScale(16),
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
お気に入り駅がありません
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
marginTop: 2,
|
|
color: colors.textSecondary,
|
|
fontSize: fontScale(11),
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
検索で駅名標を表示し、☆をタップして追加できます。
|
|
</Text>
|
|
<TouchableOpacity
|
|
accessibilityRole="button"
|
|
accessibilityLabel="駅を検索してお気に入りに追加"
|
|
onPress={onOpenSearch}
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginTop: 6,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 5,
|
|
borderRadius: 18,
|
|
backgroundColor: fixed.primary,
|
|
}}
|
|
>
|
|
<Ionicons name="search" size={16} color={fixed.textOnPrimary} />
|
|
<Text
|
|
style={{
|
|
marginLeft: 5,
|
|
color: fixed.textOnPrimary,
|
|
fontSize: fontScale(13),
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
駅を検索して追加
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|