95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
import {
|
||
View,
|
||
Text,
|
||
ScrollView,
|
||
TouchableOpacity,
|
||
Linking,
|
||
ActivityIndicator,
|
||
} from 'react-native'
|
||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||
import { trpc } from '@/lib/trpc'
|
||
|
||
export default function StelleDetailScreen() {
|
||
const { id } = useLocalSearchParams<{ id: string }>()
|
||
const router = useRouter()
|
||
const { data: stelle, isLoading } = trpc.stellen.byId.useQuery({ id })
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<SafeAreaView className="flex-1 bg-white items-center justify-center">
|
||
<ActivityIndicator size="large" color="#E63946" />
|
||
</SafeAreaView>
|
||
)
|
||
}
|
||
|
||
if (!stelle) return null
|
||
|
||
const betreffVorlage = `Bewerbung als Auszubildender bei ${stelle.member.betrieb}`
|
||
const bewerbungsUrl = `mailto:${stelle.kontaktEmail}?subject=${encodeURIComponent(betreffVorlage)}`
|
||
|
||
return (
|
||
<SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
|
||
<View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-100">
|
||
<TouchableOpacity onPress={() => router.back()} className="mr-3">
|
||
<Text className="text-brand-500 text-base">← Zurück</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<ScrollView>
|
||
{/* Header */}
|
||
<View className="bg-white px-4 py-6 border-b border-gray-100">
|
||
<View className="bg-brand-50 rounded-xl w-16 h-16 items-center justify-center mb-4">
|
||
<Text className="text-3xl">🎓</Text>
|
||
</View>
|
||
<Text className="text-2xl font-bold text-gray-900">{stelle.member.betrieb}</Text>
|
||
<Text className="text-gray-500 mt-1">{stelle.member.ort}</Text>
|
||
<Text className="text-gray-500">{stelle.org.name}</Text>
|
||
</View>
|
||
|
||
{/* Details */}
|
||
<View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
|
||
<DetailRow label="Sparte" value={stelle.sparte} />
|
||
<DetailRow label="Anzahl Stellen" value={String(stelle.stellenAnz)} />
|
||
{stelle.lehrjahr && <DetailRow label="Lehrjahr" value={stelle.lehrjahr} />}
|
||
{stelle.verguetung && <DetailRow label="Vergütung" value={stelle.verguetung} />}
|
||
</View>
|
||
|
||
{stelle.beschreibung && (
|
||
<View className="bg-white mx-4 mt-4 rounded-2xl p-4 border border-gray-100">
|
||
<Text className="font-semibold text-gray-900 mb-2">Über die Stelle</Text>
|
||
<Text className="text-gray-600 leading-6">{stelle.beschreibung}</Text>
|
||
</View>
|
||
)}
|
||
|
||
{/* CTA */}
|
||
<View className="mx-4 mt-6">
|
||
<TouchableOpacity
|
||
onPress={() => Linking.openURL(bewerbungsUrl)}
|
||
className="bg-brand-500 rounded-2xl py-4 flex-row items-center justify-center gap-2"
|
||
>
|
||
<Text className="text-white text-xl">✉️</Text>
|
||
<Text className="text-white font-semibold text-base">Jetzt bewerben</Text>
|
||
</TouchableOpacity>
|
||
{stelle.kontaktName && (
|
||
<Text className="text-center text-sm text-gray-400 mt-3">
|
||
Ansprechperson: {stelle.kontaktName}
|
||
</Text>
|
||
)}
|
||
</View>
|
||
|
||
<View className="h-8" />
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
)
|
||
}
|
||
|
||
function DetailRow({ label, value }: { label: string; value: string }) {
|
||
return (
|
||
<View className="flex-row items-center px-4 py-3 border-b border-gray-50 last:border-0">
|
||
<Text className="text-sm text-gray-500 w-32">{label}</Text>
|
||
<Text className="text-sm text-gray-900 font-medium flex-1">{value}</Text>
|
||
</View>
|
||
)
|
||
}
|