69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import AndroidLogo from '@/assets/icons/svg/android.svg';
|
|
import AppleLogo from '@/assets/icons/svg/apple.svg';
|
|
import MemoIP from '@/assets/icons/svg/memo-ip.svg';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Linking, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface PCDownloadProps {
|
|
IOS_APP_STORE_URL: string,
|
|
ANDROID_APK_URL: string
|
|
}
|
|
const PCDownload = (props: PCDownloadProps) => {
|
|
const { IOS_APP_STORE_URL, ANDROID_APK_URL } = props
|
|
|
|
const handleIOSDownload = () => {
|
|
Linking.openURL(IOS_APP_STORE_URL);
|
|
};
|
|
|
|
const handleAndroidDownload = () => {
|
|
Linking.openURL(ANDROID_APK_URL);
|
|
};
|
|
|
|
const { t } = useTranslation();
|
|
return (
|
|
<LinearGradient
|
|
colors={['#FFB645', '#E2793F']}
|
|
className="flex-1 items-center justify-center p-6"
|
|
>
|
|
<View className="absolute top-0 left-0 w-full h-full">
|
|
<MemoIP width="100%" height="100%" style={{ opacity: 0.1 }} />
|
|
</View>
|
|
<View className="items-center mb-12">
|
|
<Text className="text-white text-5xl font-extrabold tracking-tight">
|
|
MemoWake
|
|
</Text>
|
|
<Text className="text-white/90 text-lg mt-4 text-center max-w-xs">
|
|
{t('desc', { ns: 'download' })}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="w-full max-w-xs">
|
|
<TouchableOpacity
|
|
className="bg-white/90 rounded-xl px-6 py-4 flex-row items-center justify-center shadow-lg mb-5"
|
|
onPress={handleIOSDownload}
|
|
activeOpacity={0.8}
|
|
>
|
|
<AppleLogo width={24} height={24} fill="black" />
|
|
<Text className="text-black font-bold text-lg ml-3">
|
|
{t('ios', { ns: 'download' })}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
className="bg-black/80 rounded-xl px-6 py-4 flex-row items-center justify-center shadow-lg"
|
|
onPress={handleAndroidDownload}
|
|
activeOpacity={0.8}
|
|
>
|
|
<AndroidLogo width={24} height={24} fill="#3DDC84" />
|
|
<Text className="text-white font-bold text-lg ml-3">
|
|
{t('android', { ns: 'download' })}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
|
|
|
|
export default PCDownload |