71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import { router } from "expo-router";
|
|
import { useRef, useState } from "react";
|
|
import { Image, Text, TouchableOpacity, View } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import Swiper from "react-native-swiper";
|
|
|
|
import { CustomButton } from "@/components/custom-button";
|
|
import { onboarding } from "@/constants";
|
|
import { useT } from "@/lib/i18n";
|
|
|
|
const Welcome = () => {
|
|
const swiperRef = useRef<Swiper>(null);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const isLastSlide = activeIndex === onboarding.length - 1;
|
|
const t = useT();
|
|
|
|
return (
|
|
<SafeAreaView className="flex h-full items-center justify-between bg-white dark:bg-neutral-950">
|
|
<TouchableOpacity
|
|
onPress={() => router.push("/(auth)/sign-up")}
|
|
className="w-full flex justify-end items-end p-5"
|
|
>
|
|
<Text className="text-black dark:text-white text-base font-JakartaBold">
|
|
{t("onboarding.skip")}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<Swiper
|
|
ref={swiperRef}
|
|
loop={false}
|
|
dot={<View className="w-8 h-1 mx-1 bg-[#E2E8F0] dark:bg-neutral-700 rounded-full" />}
|
|
activeDot={<View className="w-8 h-1 mx-1 bg-[#0286FF] rounded-full" />}
|
|
index={activeIndex}
|
|
onIndexChanged={setActiveIndex}
|
|
>
|
|
{onboarding.map((item) => (
|
|
<View key={item.id} className="flex items-center justify-center p-5">
|
|
<Image
|
|
source={item.image}
|
|
alt={`Onboarding Item ${item.id}`}
|
|
className="w-full h-[300px]"
|
|
resizeMode="contain"
|
|
/>
|
|
|
|
<View className="flex flex-row items-center justify-center w-full mt-10">
|
|
<Text className="text-black dark:text-white text-3xl font-bold mx-10 text-center">
|
|
{t(item.titleKey)}
|
|
</Text>
|
|
</View>
|
|
|
|
<Text className="text-base font-JakartaSemiBold text-center text-[#858585] dark:text-neutral-400 mx-10 mt-3">
|
|
{t(item.descKey)}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</Swiper>
|
|
|
|
<CustomButton
|
|
onPress={() =>
|
|
isLastSlide
|
|
? router.push("/(auth)/sign-up")
|
|
: swiperRef.current?.scrollBy(1)
|
|
}
|
|
title={isLastSlide ? t("onboarding.getStarted") : t("onboarding.next")}
|
|
className="w-11/12 mt-10"
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default Welcome; |