160 lines
4.0 KiB
JavaScript
160 lines
4.0 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
Image,
|
|
ScrollView,
|
|
Alert,
|
|
ToastAndroid,
|
|
} from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
|
|
const PosterEdukasiScreen = () => {
|
|
const navigation = useNavigation();
|
|
// State untuk menyimpan daftar poster
|
|
const [posters, setPosters] = useState([
|
|
{ id: 1, image: require("../../assets/images/poster1.png") },
|
|
{ id: 2, image: require("../../assets/images/poster2.png") }, // Tambah poster kedua
|
|
{ id: 2, image: require("../../assets/images/poster3.png") }, // Tambah poster kedua
|
|
// Tambahkan poster lainnya sesuai kebutuhan
|
|
]);
|
|
|
|
// Handle add poster action
|
|
const handleAddPoster = () => {
|
|
navigation.navigate("AddPosterScreen");
|
|
};
|
|
|
|
// Fungsi untuk menghapus poster
|
|
const handleDeletePoster = (posterId) => {
|
|
Alert.alert(
|
|
"Hapus Poster",
|
|
"Apakah Anda yakin ingin menghapus poster ini?",
|
|
[
|
|
{
|
|
text: "Batal",
|
|
style: "cancel",
|
|
},
|
|
{
|
|
text: "Hapus",
|
|
onPress: () => {
|
|
// Hapus poster berdasarkan ID
|
|
const updatedPosters = posters.filter(
|
|
(poster) => poster.id !== posterId
|
|
);
|
|
setPosters(updatedPosters);
|
|
ToastAndroid.show("Poster telah dihapus", ToastAndroid.SHORT);
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ScrollView style={styles.container}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={() => navigation.goBack()}
|
|
>
|
|
<Ionicons name="arrow-back" size={24} color="#000" />
|
|
</TouchableOpacity>
|
|
<Text style={styles.title}>POSTER EDUKASI</Text>
|
|
</View>
|
|
|
|
{/* Daftar Poster */}
|
|
<View style={styles.posterList}>
|
|
{posters.map((poster) => (
|
|
<View key={poster.id} style={styles.posterItem}>
|
|
<TouchableOpacity onPress={() => handleDeletePoster(poster.id)}>
|
|
<Image source={poster.image} style={styles.posterImage} />
|
|
{/* Tombol Hapus Poster */}
|
|
<TouchableOpacity
|
|
style={styles.deleteIcon}
|
|
onPress={() => handleDeletePoster(poster.id)}
|
|
>
|
|
<Ionicons name="trash" size={24} color="white" />
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* Add Poster Button */}
|
|
<View style={styles.addPosterContainer}>
|
|
<TouchableOpacity style={styles.addButton} onPress={handleAddPoster}>
|
|
<Ionicons name="add-circle" size={24} color="#FFF" />
|
|
<Text style={styles.addButtonText}>Tambah Poster</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#FFF",
|
|
padding: 16,
|
|
},
|
|
header: {
|
|
marginTop: 40,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 20,
|
|
},
|
|
backButton: {
|
|
marginRight: 12,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
color: "#000",
|
|
},
|
|
posterList: {
|
|
marginBottom: 20,
|
|
},
|
|
posterItem: {
|
|
position: "relative",
|
|
marginBottom: 15,
|
|
},
|
|
posterImage: {
|
|
width: "100%",
|
|
height: 250,
|
|
resizeMode: "contain",
|
|
borderRadius: 8,
|
|
},
|
|
deleteIcon: {
|
|
position: "absolute",
|
|
top: 10,
|
|
right: 10,
|
|
backgroundColor: "red",
|
|
padding: 6,
|
|
borderRadius: 16,
|
|
},
|
|
addPosterContainer: {
|
|
marginTop: 20,
|
|
alignItems: "center",
|
|
marginBottom: 50,
|
|
},
|
|
addButton: {
|
|
backgroundColor: "#2D572C",
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 32,
|
|
borderRadius: 8,
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
addButtonText: {
|
|
color: "#FFF",
|
|
fontWeight: "bold",
|
|
marginLeft: 8,
|
|
},
|
|
});
|
|
|
|
export default PosterEdukasiScreen;
|