rebreak-monorepo/apps/rebreak-native/components/profile/DigaMissionBanner.tsx

import { View, Text, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../lib/theme';

type Props = {
  onDismiss?: () => void;
  onContribute?: () => void;
};

export function DigaMissionBanner({ onDismiss, onContribute }: Props) {
  return (
    <View
      style={{
        marginHorizontal: 16,
        marginTop: 16,
        backgroundColor: '#fffbeb',
        borderWidth: 1,
        borderColor: '#fde68a',
        borderRadius: 14,
        padding: 16,
      }}
    >
      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 10 }}>
        <View
          style={{
            width: 28,
            height: 28,
            borderRadius: 14,
            backgroundColor: '#fef3c7',
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: 2,
          }}
        >
          <Ionicons name="medkit-outline" size={14} color="#854d0e" />
        </View>
        <View style={{ flex: 1 }}>
          <Text
            style={{
              fontSize: 13,
              color: '#854d0e',
              fontFamily: 'Nunito_700Bold',
            }}
          >
            30 Tage geschützt — danke
          </Text>
          <Text
            style={{
              marginTop: 4,
              fontSize: 12,
              color: '#92400e',
              fontFamily: 'Nunito_400Regular',
              lineHeight: 17,
            }}
          >
            Rebreak strebt die Anerkennung als DiGA an. Mit ein paar anonymen
            Angaben hilfst du, die Wirksamkeit zu belegen — damit Krankenkassen
            die App künftig erstatten können.
          </Text>

          <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
            <Pressable
              onPress={onContribute}
              style={({ pressed }) => ({
                opacity: pressed ? 0.7 : 1,
                paddingHorizontal: 12,
                paddingVertical: 7,
                backgroundColor: '#854d0e',
                borderRadius: 8,
              })}
            >
              <Text
                style={{
                  fontSize: 12,
                  color: '#ffffff',
                  fontFamily: 'Nunito_600SemiBold',
                }}
              >
                Beitragen
              </Text>
            </Pressable>
            <Pressable
              onPress={onDismiss}
              style={({ pressed }) => ({
                opacity: pressed ? 0.7 : 1,
                paddingHorizontal: 12,
                paddingVertical: 7,
                borderRadius: 8,
              })}
            >
              <Text
                style={{
                  fontSize: 12,
                  color: '#92400e',
                  fontFamily: 'Nunito_600SemiBold',
                }}
              >
                Später
              </Text>
            </Pressable>
          </View>
        </View>
        <Pressable
          onPress={onDismiss}
          hitSlop={8}
          style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
        >
          <Ionicons name="close" size={16} color={colors.textMuted} />
        </Pressable>
      </View>
    </View>
  );
}