upd: banner

Deskripsi:
- ui list banner
- ui create banner
- ui edit banner
- ui delete banner

No Issues

app/(application)/banner/[id].tsx

@@ -0,0 +1,73 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import { ButtonForm } from "@/components/buttonForm"
+import { InputForm } from "@/components/inputForm"
+import Styles from "@/constants/Styles"
+import { Entypo } from "@expo/vector-icons"
+import * as ImagePicker from 'expo-image-picker'
+import { router, Stack } from "expo-router"
+import { useState } from "react"
+import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
+
+export default function EditBanner() {
+   const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
+
+   const pickImageAsync = async () => {
+      let result = await ImagePicker.launchImageLibraryAsync({
+         mediaTypes: ['images'],
+         allowsEditing: false,
+         quality: 1,
+      });
+
+      if (!result.canceled) {
+         setSelectedImage(result.assets[0].uri);
+      } else {
+         alert('Tidak ada gambar yang dipilih');
+      }
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Edit Banner',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.mb15]}>
+                  {
+                     selectedImage != undefined ? (
+                        <Pressable onPress={pickImageAsync}>
+                           <Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height: 100 }} />
+                        </Pressable>
+                     ) : (
+                        <Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
+                           <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                              <Entypo name="image" size={50} color={'#aeaeae'} />
+                              <Text style={[Styles.textInformation]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
+                           </View>
+                        </Pressable>
+                     )
+                  }
+               </View>
+               <InputForm label="Judul" type="numeric" placeholder="Judul" required />
+               <ButtonForm
+                  text="SIMPAN"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin mengubah data?',
+                        onPress: () => {
+                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                           router.push('/banner')
+                        }
+                     })
+                  }} />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/banner/create.tsx

@@ -0,0 +1,73 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonForm } from "@/components/buttonForm";
+import { InputForm } from "@/components/inputForm";
+import Styles from "@/constants/Styles";
+import { Entypo } from "@expo/vector-icons";
+import * as ImagePicker from 'expo-image-picker';
+import { router, Stack } from "expo-router";
+import { useState } from "react";
+import { Image, Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+
+export default function CreateBanner() {
+   const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined)
+
+   const pickImageAsync = async () => {
+      let result = await ImagePicker.launchImageLibraryAsync({
+         mediaTypes: ['images'],
+         allowsEditing: false,
+         quality: 1,
+      });
+
+      if (!result.canceled) {
+         setSelectedImage(result.assets[0].uri);
+      } else {
+         alert('Tidak ada gambar yang dipilih');
+      }
+   };
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Tambah Banner',
+               headerTitleAlign: 'center',
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <View style={[Styles.mb15]}>
+                  {
+                     selectedImage != undefined ? (
+                        <Pressable onPress={pickImageAsync}>
+                           <Image src={selectedImage} style={{ resizeMode: 'contain', width: '100%', height:100 }} />
+                        </Pressable>
+                     ) : (
+                        <Pressable onPress={pickImageAsync} style={[Styles.wrapPaper, Styles.contentItemCenter]}>
+                           <View style={{justifyContent:'center', alignItems:'center'}}>
+                              <Entypo name="image" size={50} color={'#aeaeae'} />
+                              <Text style={[Styles.textInformation]}>Mohon unggah gambar dalam resolusi 1535 x 450 piksel untuk memastikan</Text>
+                           </View>
+                        </Pressable>
+                     )
+                  }
+               </View>
+               <InputForm label="Judul" type="numeric" placeholder="Judul" required />
+               <ButtonForm
+                  text="SIMPAN"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menambahkan data?',
+                        onPress: () => {
+                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+                           router.push('/banner')
+                        }
+                     })
+                  }} />
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}

app/(application)/banner/index.tsx

@@ -0,0 +1,98 @@
+import AlertKonfirmasi from "@/components/alertKonfirmasi"
+import HeaderRightBannerList from "@/components/banner/headerBannerList"
+import BorderBottomItem from "@/components/borderBottomItem"
+import ButtonBackHeader from "@/components/buttonBackHeader"
+import DrawerBottom from "@/components/drawerBottom"
+import MenuItemRow from "@/components/menuItemRow"
+import Styles from "@/constants/Styles"
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
+import { router, Stack } from "expo-router"
+import { useState } from "react"
+import { Image, SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+
+export default function BannerList() {
+   const [isModal, setModal] = useState(false)
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Banner',
+               headerTitleAlign: 'center',
+               headerRight: () => <HeaderRightBannerList />
+            }}
+         />
+
+         <ScrollView>
+            <View style={[Styles.p15, Styles.mb100]}>
+               <BorderBottomItem
+                  onPress={() => { setModal(true) }}
+                  borderType="all"
+                  icon={
+                     <Image
+                        source={require("../../../assets/images/bg.png")}
+                        style={[Styles.imgListBanner]}
+                     />
+                  }
+                  title="Banner 1"
+               />
+               <BorderBottomItem
+                  onPress={() => { setModal(true) }}
+                  borderType="all"
+                  icon={
+                     <Image
+                        source={require("../../../assets/images/bg.png")}
+                        style={[Styles.imgListBanner]}
+                     />
+                  }
+                  title="Banner 2"
+               />
+               <BorderBottomItem
+                  onPress={() => { setModal(true) }}
+                  borderType="all"
+                  icon={
+                     <Image
+                        source={require("../../../assets/images/bg.png")}
+                        style={[Styles.imgListBanner]}
+                     />
+                  }
+                  title="Banner 3"
+               />
+            </View>
+         </ScrollView>
+
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  title="Edit"
+                  onPress={() => {
+                     setModal(false)
+                     router.push('/banner/784')
+                  }}
+               />
+               <MenuItemRow
+                  icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
+                  title="Lihat File"
+                  onPress={() => { }}
+               />
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Konfirmasi',
+                        desc: 'Apakah anda yakin ingin menghapus data?',
+                        onPress: () => {
+                           setModal(false)
+                           ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                        }
+                     })
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </SafeAreaView>
+   )
+}

app/(application)/feature.tsx

@@ -29,7 +29,7 @@ export default function Feature() {
                <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} />
             </View>
             <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
-               <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" />
+               <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
             </View>
          </View>
       </SafeAreaView>

components/banner/headerBannerList.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import ButtonMenuHeader from "../buttonMenuHeader";
+import DrawerBottom from "../drawerBottom";
+import { View } from "react-native";
+import Styles from "@/constants/Styles";
+import MenuItemRow from "../menuItemRow";
+import { AntDesign } from "@expo/vector-icons";
+import { router } from "expo-router";
+
+export default function HeaderRightBannerList() {
+   const [isVisible, setVisible] = useState(false)
+   return (
+      <>
+         <ButtonMenuHeader onPress={() => { setVisible(true) }} />
+         <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                  title="Tambah Banner"
+                  onPress={() => {
+                     setVisible(false)
+                     router.push('/banner/create')
+                  }}
+               />
+            </View>
+         </DrawerBottom>
+      </>
+   )
+}

constants/Styles.ts

@@ -312,6 +312,11 @@ const Styles = StyleSheet.create({
       height: 100,
       borderRadius: 100
    },
+   imgListBanner: {
+      width: 100,
+      height: 50,
+      borderRadius: 5
+   },
    iconContent: {
       padding: 10,
       borderRadius: 100,