jrshikoku/components/TrainMenu/UsefulBox.tsx
harukin-expo-dev-env ad98372df8 ファイルの分離
2024-09-09 10:41:18 +00:00

33 lines
872 B
TypeScript

import React, { FC } from "react";
import { Text, TouchableOpacity } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
type Props = {
icon: keyof typeof MaterialCommunityIcons.glyphMap;
backgroundColor: string;
flex: number;
onPressButton: () => void;
children: string;
};
export const UsefulBox: FC<Props> = (props) => {
const { icon, backgroundColor, flex, onPressButton, children } = props;
return (
<TouchableOpacity
style={{
flex: flex,
backgroundColor: backgroundColor,
padding: 5,
alignItems: "center",
margin: 2,
}}
onPress={onPressButton}
>
<MaterialCommunityIcons name={icon} color="white" size={50} />
<Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
{children}
</Text>
</TouchableOpacity>
);
};