feat(food): add new info screen and remove food card (#176)

Author: Robert27

src/components/Cards/BaseCard.tsx

@@ -31,24 +31,21 @@ const BaseCard: React.FC<BaseCardProps> = ({
 	const { hideDashboardEntry, resetOrder } = useContext(DashboardContext)
 	const { userKind = USER_GUEST } = useContext(UserKindContext)
 
-	const foodKeys = ['mensa', 'mensaNeuburg', 'canisius', 'reimanns']
-	const dynamicTitle = foodKeys.includes(title) ? 'food' : title
-
 	const cardContent = (
 		<View style={styles.card}>
 			<View style={styles.titleView}>
 				<PlatformIcon
 					ios={{
-						name: cardIcons[dynamicTitle as keyof typeof cardIcons]?.ios,
+						name: cardIcons[title as keyof typeof cardIcons]?.ios,
 						size: 18
 					}}
 					android={{
-						name: cardIcons[dynamicTitle as keyof typeof cardIcons]?.android,
+						name: cardIcons[title as keyof typeof cardIcons]?.android,
 						size: 24,
 						variant: 'outlined'
 					}}
 					web={{
-						name: cardIcons[dynamicTitle as keyof typeof cardIcons]?.web,
+						name: cardIcons[title as keyof typeof cardIcons]?.web,
 						size: 24
 					}}
 				/>

src/components/Cards/FoodCard.tsx

@@ -1,13 +1,11 @@
 import BaseCard from './BaseCard'
 import CalendarCard from './CalendarCard'
 import EventsCard from './EventsCard'
-import FoodCard from './FoodCard'
 import LinkCard from './LinkCard'
 import LoginCard from './LoginCard'
 import TimetableCard from './TimetableCard'
 
 export {
-	FoodCard,
 	EventsCard,
 	CalendarCard,
 	BaseCard,

src/components/Cards/index.ts

@@ -0,0 +1,67 @@
+import type React from 'react'
+import { Text, View } from 'react-native'
+import { useStyles } from 'react-native-unistyles'
+
+interface CurvedTextProps {
+	text: string
+	radius: number
+	size: number
+	startAngle?: number
+}
+
+/**
+ * Component for creating curved text along a circular path
+ */
+export const CurvedText = ({
+	text,
+	radius,
+	size,
+	startAngle = 90
+}: CurvedTextProps): React.JSX.Element => {
+	const characters = text.split('')
+	const anglePerChar = 5
+	const startAngleRad = (startAngle * Math.PI) / 180
+	const { theme } = useStyles()
+
+	return (
+		<View
+			style={{ width: radius * 2, height: radius * 2, position: 'absolute' }}
+		>
+			{characters.map((char, index) => {
+				const angle =
+					startAngleRad -
+					((characters.length - 1) / 2 - index) *
+						((anglePerChar * Math.PI) / 180)
+
+				return (
+					<View
+						key={index}
+						style={{
+							position: 'absolute',
+							left: radius + radius * Math.cos(angle) - size / 2 + 1.5,
+							top: radius + radius * Math.sin(angle) - size / 2,
+							width: size,
+							height: size,
+							transform: [{ rotate: `${angle + Math.PI / 2}rad` }],
+							alignItems: 'center',
+							justifyContent: 'center'
+						}}
+					>
+						<Text
+							style={{
+								fontSize: size * 0.7,
+								color: theme.colors.text,
+								fontWeight: '300',
+								opacity: 0.6
+							}}
+						>
+							{char}
+						</Text>
+					</View>
+				)
+			})}
+		</View>
+	)
+}
+
+export default CurvedText