306 lines
7.7 KiB
JavaScript
306 lines
7.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
Image,
|
|
} from "react-native";
|
|
import Icon from "react-native-vector-icons/Ionicons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
const users = [
|
|
{ name: "Diana Fitri Nur Aini", coins: 5000, rank: 1, color: "#A30000" },
|
|
{ name: "Revan Ilyas Fatoni", coins: 4800, rank: 2, color: "#FFD700" },
|
|
{ name: "Alena Syahwa", coins: 4350, rank: 3, color: "#228B22" },
|
|
{ name: "Dina Dwi Anisa", coins: 0, rank: "-", color: "#aaa" },
|
|
];
|
|
|
|
const misimingguan = () => {
|
|
const navigation = useNavigation();
|
|
const [completedDays, setCompletedDays] = useState([]);
|
|
const [totalCoins, setTotalCoins] = useState(0);
|
|
|
|
// Function to mark a day as completed
|
|
const handleDayClick = (day, points) => {
|
|
if (!completedDays.includes(day)) {
|
|
setCompletedDays([...completedDays, day]);
|
|
setTotalCoins(totalCoins + points);
|
|
}
|
|
};
|
|
|
|
// Check if the day is completed once
|
|
const isCompleted = (day) => completedDays.includes(day);
|
|
|
|
return (
|
|
<ScrollView contentContainerStyle={styles.container}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Home")}
|
|
style={styles.backButton}
|
|
>
|
|
<Icon name="arrow-back" size={24} color="#000" />
|
|
</TouchableOpacity>
|
|
<View style={styles.headerTitle}>
|
|
<Text style={styles.titleText}>DAPATKAN KOIN</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Subtitle */}
|
|
<Text style={styles.subTitle}>
|
|
Dapatkan Koin <Text style={{ color: "red" }}>LEBIH BANYAK</Text>
|
|
</Text>
|
|
<Text style={styles.koinText}>
|
|
Koin Terkumpul{" "}
|
|
<Text style={{ fontWeight: "bold" }}>{totalCoins} / 2600</Text>
|
|
</Text>
|
|
|
|
{/* Daily Check-in */}
|
|
<Text style={styles.dailyCheckinLabel}>KUNJUNGI TIAP HARI</Text>
|
|
<View style={styles.checkinRow}>
|
|
{[
|
|
{ day: "Hari-1", point: 10 },
|
|
{ day: "Hari-2", point: 15 },
|
|
{ day: "Hari-3", point: 20 },
|
|
{ day: "Hari-4", point: 25 },
|
|
{ day: "Hari-5", point: 30 },
|
|
{ day: "Hari-6", point: 35 },
|
|
{ day: "Hari-7", point: 50 },
|
|
].map((item, index) => (
|
|
<TouchableOpacity
|
|
key={index}
|
|
style={styles.checkinItem}
|
|
onPress={() => handleDayClick(item.day, item.point)}
|
|
disabled={isCompleted(item.day)}
|
|
>
|
|
<View
|
|
style={[
|
|
styles.flameIcon,
|
|
isCompleted(item.day) && styles.completedItem,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.pointText,
|
|
isCompleted(item.day) && styles.completedPointText,
|
|
]}
|
|
>
|
|
{item.point}
|
|
</Text>
|
|
<Icon
|
|
name="flame"
|
|
size={20}
|
|
color={isCompleted(item.day) ? "gray" : "red"}
|
|
/>
|
|
</View>
|
|
<Text style={styles.dayText}>{item.day}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* Missions as buttons */}
|
|
<View style={styles.missionContainer}>
|
|
<MissionButton
|
|
point="1000"
|
|
label="KONTRIBUSI PENGADUAN SAMPAH"
|
|
icon="person"
|
|
/>
|
|
<MissionButton point="800" label="DONASI" icon="cash" />
|
|
<MissionButton point="750" label="PENGADUAN SAMPAH" icon="trash" />
|
|
</View>
|
|
|
|
{/* Top 3 Users */}
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>TOP 3 KOIN TERBANYAK</Text>
|
|
{users.map((user, index) => (
|
|
<View key={index} style={styles.userCard}>
|
|
<Icon name="person-circle" size={40} color="#ccc" />
|
|
<View style={styles.userInfo}>
|
|
<Text style={styles.name}>{user.name}</Text>
|
|
<View style={styles.coinRow}>
|
|
<Icon name="cash-outline" size={16} color="#FFC107" />
|
|
<Text style={styles.coinText}>{user.coins}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.rankBox}>
|
|
<Text style={styles.rankNumber}>{user.rank}</Text>
|
|
<Icon name="ribbon" size={20} color={user.color} />
|
|
</View>
|
|
</View>
|
|
))}
|
|
<Text style={styles.footerText}>
|
|
"Ayo kumpulkan lebih banyak koin dengan berkontribusi aktif!{"\n"}
|
|
Semakin banyak kamu membantu, semakin besar dampaknya{"\n"}
|
|
untuk lingkungan kita!"
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const MissionButton = ({ point, label, icon }) => (
|
|
<TouchableOpacity style={styles.missionButton}>
|
|
<Text style={styles.koinBox}>{point}</Text>
|
|
<Icon name={icon} size={32} color="#333" />
|
|
<Text style={styles.missionText}>{label}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
padding: 16,
|
|
backgroundColor: "#fff",
|
|
marginTop: 40,
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
},
|
|
headerTitle: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginLeft: 12,
|
|
},
|
|
titleText: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
marginLeft: 6,
|
|
},
|
|
subTitle: {
|
|
fontSize: 16,
|
|
marginVertical: 6,
|
|
},
|
|
koinText: {
|
|
textAlign: "right",
|
|
fontSize: 16,
|
|
color: "#555",
|
|
},
|
|
dailyCheckinLabel: {
|
|
textAlign: "center",
|
|
marginVertical: 15,
|
|
fontWeight: "bold",
|
|
color: "#000",
|
|
},
|
|
checkinRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
marginBottom: 28,
|
|
},
|
|
checkinItem: {
|
|
alignItems: "center",
|
|
width: 50,
|
|
},
|
|
flameIcon: {
|
|
alignItems: "center",
|
|
backgroundColor: "#fff0f0",
|
|
borderRadius: 10,
|
|
padding: 9,
|
|
borderWidth: 1,
|
|
},
|
|
completedItem: {
|
|
opacity: 0.5, // Lower opacity for completed item
|
|
},
|
|
pointText: {
|
|
fontWeight: "bold",
|
|
color: "#2D572C",
|
|
fontSize: 12,
|
|
},
|
|
completedPointText: {
|
|
color: "gray", // Change point color to gray when completed
|
|
},
|
|
dayText: {
|
|
fontSize: 10,
|
|
color: "#444",
|
|
marginTop: 4,
|
|
},
|
|
missionContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
marginBottom: 10,
|
|
flexWrap: "wrap",
|
|
},
|
|
missionButton: {
|
|
width: "30%",
|
|
backgroundColor: "#fFF",
|
|
borderRadius: 12,
|
|
padding: 12,
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
justifyContent: "center",
|
|
borderWidth: 1,
|
|
},
|
|
koinBox: {
|
|
backgroundColor: "#ffeb3b",
|
|
justifyContent: "space-evenly",
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 2,
|
|
borderRadius: 10,
|
|
fontWeight: "bold",
|
|
marginBottom: 6,
|
|
borderWidth: 0.5,
|
|
},
|
|
missionText: {
|
|
textAlign: "center",
|
|
fontSize: 11,
|
|
marginTop: 6,
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
fontWeight: "bold",
|
|
fontSize: 18,
|
|
color: "#2D572C",
|
|
marginBottom: 10,
|
|
borderBottomWidth: 1,
|
|
borderTopWidth: 1,
|
|
paddingVertical: 8,
|
|
borderColor: "#ccc",
|
|
},
|
|
userCard: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: "#ddd",
|
|
borderRadius: 12,
|
|
padding: 10,
|
|
marginBottom: 12,
|
|
},
|
|
userInfo: {
|
|
flex: 1,
|
|
marginLeft: 12,
|
|
},
|
|
name: {
|
|
fontWeight: "bold",
|
|
fontSize: 14,
|
|
},
|
|
coinRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 4,
|
|
},
|
|
coinText: {
|
|
marginLeft: 4,
|
|
fontSize: 13,
|
|
color: "#555",
|
|
},
|
|
rankBox: {
|
|
alignItems: "center",
|
|
},
|
|
rankNumber: {
|
|
fontWeight: "bold",
|
|
fontSize: 14,
|
|
marginBottom: 2,
|
|
},
|
|
footerText: {
|
|
marginTop: 10,
|
|
textAlign: "center",
|
|
fontSize: 13,
|
|
color: "#444",
|
|
},
|
|
});
|
|
|
|
export default misimingguan;
|