219 lines
9.1 KiB
TypeScript
219 lines
9.1 KiB
TypeScript
import * as React from "react";
|
|
import { Image, View, ScrollView } from "react-native";
|
|
import { Button } from "~/components/ui/button";
|
|
import { Progress } from "~/components/ui/progress";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Label } from "~/components/ui/label";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
|
import { Text } from "~/components/ui/text";
|
|
import {
|
|
ArrowLeftIcon,
|
|
CircleDollarSign,
|
|
LucideEye,
|
|
} from "lucide-react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default function CrowdFund() {
|
|
const [value, setValue] = React.useState("overview");
|
|
const { t } = useTranslation();
|
|
return (
|
|
<SafeAreaView className="flex my-10 space-y-10 overflow-y-scroll">
|
|
<ScrollView className="space-y-2">
|
|
<View className="flex items-left px-5 space-y-3 w-full">
|
|
<Image
|
|
source={{
|
|
uri: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
|
|
}}
|
|
alt=""
|
|
className="w-full h-[200px] object-cover rounded"
|
|
/>
|
|
</View>
|
|
|
|
<View className="flex-1 justify-center px-5 mt-3">
|
|
<Tabs
|
|
value={value}
|
|
onValueChange={setValue}
|
|
className="w-full max-w-[400px] mx-auto flex-col gap-1.5"
|
|
>
|
|
<TabsList className="flex-row w-full">
|
|
<TabsTrigger value="overview" className="flex-1">
|
|
<Text className="font-dmsans">
|
|
{t("crowdfunding.tabsOverview")}
|
|
</Text>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="campagin" className="flex-1">
|
|
<Text className="font-dmsans">
|
|
{t("crowdfunding.tabsCampaign")}
|
|
</Text>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="faq" className="flex-1">
|
|
<Text className="font-dmsans">{t("crowdfunding.tabsFaq")}</Text>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="overview">
|
|
<View className="space-y-3 mt-3">
|
|
<Text className="text-xl font-dmsans text-primary">
|
|
{t("crowdfunding.title")}
|
|
</Text>
|
|
<Text className="text-sm font-dmsans-light">
|
|
{t("crowdfunding.description")}
|
|
</Text>
|
|
<View className="py-5">
|
|
<Progress value={87} className="w-full " />
|
|
</View>
|
|
|
|
<View className="flex flex-row space-x-3">
|
|
<View className="flex space-y-1">
|
|
<Text className="text-base font-dmsans-bold text-secondary">
|
|
{t("crowdfunding.pledgedAmount")}
|
|
</Text>
|
|
<Text className="text-sm font-dmsans-light text-primary">
|
|
{t("crowdfunding.pledgedOf", { target: "1,000,000" })}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex space-y-1">
|
|
<Text className="text-base font-dmsans-bold text-secondary">
|
|
1,000
|
|
</Text>
|
|
<Text className="text-sm font-dmsans-light text-primary">
|
|
{t("crowdfunding.backersCountLabel")}
|
|
</Text>
|
|
</View>
|
|
<View className="flex space-y-1">
|
|
<Text className="text-base font-dmsans-bold text-secondary">
|
|
32
|
|
</Text>
|
|
<Text className="text-sm font-dmsans-light text-primary">
|
|
{t("crowdfunding.daysToGoLabel")}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</TabsContent>
|
|
<TabsContent value="campagin">
|
|
<View className="space-y-3 mt-3">
|
|
<View className="space-y-3">
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.emailLabel")}
|
|
</Label>
|
|
|
|
<Input
|
|
aria-aria-labelledby="name"
|
|
className="font-dmsans"
|
|
placeholder={t("crowdfunding.emailPlaceholder")}
|
|
/>
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.otpLabel")}
|
|
</Label>
|
|
<Input
|
|
aria-aria-labelledby="name"
|
|
className="font-dmsans"
|
|
placeholder={t("crowdfunding.otpPlaceholder")}
|
|
/>
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.passwordLabel")}
|
|
</Label>
|
|
<View className="flex flex-row justify-between items-center space-x-3">
|
|
<Input
|
|
placeholder={t("crowdfunding.passwordPlaceholder")}
|
|
/>
|
|
<Button className="bg-white border border-gray-300 rounded-md">
|
|
<LucideEye className="" />
|
|
</Button>
|
|
</View>
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.confirmPasswordLabel")}
|
|
</Label>
|
|
<View className="flex flex-row justify-between items-center space-x-3">
|
|
<Input
|
|
placeholder={t("crowdfunding.confirmPasswordPlaceholder")}
|
|
/>
|
|
<Button className="bg-white border border-gray-300 rounded-md">
|
|
<LucideEye className="" />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
<Button className="bg-primary mt-5">
|
|
<Text className="font-dmsans">
|
|
{t("crowdfunding.resetButton")}
|
|
</Text>
|
|
</Button>
|
|
<Button className="bg-white border border-gray-800 border-dashed rounded-md">
|
|
<Text className="font-dmsans text-secondary">
|
|
{t("crowdfunding.resendButton")}
|
|
</Text>
|
|
</Button>
|
|
</View>
|
|
</TabsContent>
|
|
<TabsContent value="faq">
|
|
<View className="space-y-3 mt-3">
|
|
<View className="space-y-3">
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.emailLabel")}
|
|
</Label>
|
|
|
|
<Input
|
|
aria-aria-labelledby="name"
|
|
className="font-dmsans"
|
|
placeholder={t("crowdfunding.emailPlaceholder")}
|
|
/>
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.otpLabel")}
|
|
</Label>
|
|
<Input
|
|
aria-aria-labelledby="name"
|
|
className="font-dmsans"
|
|
placeholder={t("crowdfunding.otpPlaceholder")}
|
|
/>
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.passwordLabel")}
|
|
</Label>
|
|
<View className="flex flex-row justify-between items-center space-x-3">
|
|
<Input
|
|
placeholder={t("crowdfunding.passwordPlaceholder")}
|
|
/>
|
|
<Button className="bg-white border border-gray-300 rounded-md">
|
|
<LucideEye className="" />
|
|
</Button>
|
|
</View>
|
|
<Label className=" text-base font-dmsans-medium">
|
|
{t("crowdfunding.confirmPasswordLabel")}
|
|
</Label>
|
|
<View className="flex flex-row justify-between items-center space-x-3">
|
|
<Input
|
|
placeholder={t("crowdfunding.confirmPasswordPlaceholder")}
|
|
/>
|
|
<Button className="bg-white border border-gray-300 rounded-md">
|
|
<LucideEye className="" />
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
<Button className="bg-primary mt-5">
|
|
<Text className="font-dmsans">
|
|
{t("crowdfunding.resetButton")}
|
|
</Text>
|
|
</Button>
|
|
<Button className="bg-white border border-gray-800 border-dashed rounded-md">
|
|
<Text className="font-dmsans text-secondary">
|
|
{t("crowdfunding.resendButton")}
|
|
</Text>
|
|
</Button>
|
|
</View>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|