reasourcing home
This commit is contained in:
132
components/Home/HomeView.tsx
Normal file
132
components/Home/HomeView.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import Spacing from "@/components/_ShareComponent/Spacing";
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { globalStyles } from "@/constants/global-styles";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Image } from "expo-image";
|
||||
import { useNavigation } from "expo-router";
|
||||
import { useEffect } from "react";
|
||||
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||
import Icon from "react-native-vector-icons/FontAwesome";
|
||||
import DynamicTruncatedText from "../_ShareComponent/TruncatedText";
|
||||
import { stylesHome } from "./homeViewStyle";
|
||||
|
||||
export default function HomeView() {
|
||||
const navigation = useNavigation();
|
||||
useEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: "HIPMI",
|
||||
headerLeft: () => (
|
||||
<Ionicons name="search" size={20} color={MainColor.white} />
|
||||
),
|
||||
headerRight: () => (
|
||||
<Ionicons name="notifications" size={20} color={MainColor.white} />
|
||||
),
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
||||
<View style={globalStyles.mainContainer}>
|
||||
<Spacing height={20} />
|
||||
<View
|
||||
style={{
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 10,
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
source={require("@/assets/images/constants/home-hipmi.png")}
|
||||
// placeholder={{ blurhash: "" }}
|
||||
contentFit="cover"
|
||||
transition={1000}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 120,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Spacing height={10} />
|
||||
|
||||
{/* Grid Section */}
|
||||
<View style={stylesHome.gridContainer}>
|
||||
<TouchableOpacity style={stylesHome.gridItem}>
|
||||
<Ionicons name="analytics" size={48} color="white" />
|
||||
<Text style={stylesHome.gridLabel}>Event</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={stylesHome.gridItem}>
|
||||
<Ionicons name="share" size={48} color="white" />
|
||||
<Text style={stylesHome.gridLabel}>Collaboration</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={stylesHome.gridItem}>
|
||||
<Ionicons name="cube" size={48} color="white" />
|
||||
<Text style={stylesHome.gridLabel}>Voting</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={stylesHome.gridItem}>
|
||||
<Ionicons name="heart" size={48} color="white" />
|
||||
<Text style={stylesHome.gridLabel}>Crowdfunding</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Spacing height={10} />
|
||||
|
||||
{/* Job Vacancy Section */}
|
||||
<View style={stylesHome.jobVacancyContainer}>
|
||||
<View style={stylesHome.jobVacancyHeader}>
|
||||
<Icon name="briefcase" size={24} color="white" />
|
||||
<Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
|
||||
</View>
|
||||
|
||||
<View style={stylesHome.vacancyList}>
|
||||
{/* Vacancy Item 1 */}
|
||||
<View style={stylesHome.vacancyItem}>
|
||||
{/* <Icon name="user" size={20} color="#FFD700" /> */}
|
||||
<View style={stylesHome.vacancyDetails}>
|
||||
<DynamicTruncatedText
|
||||
text="Bagas_banuna"
|
||||
fontSize={14}
|
||||
fontFamily="System"
|
||||
style={stylesHome.vacancyName}
|
||||
/>
|
||||
<Spacing height={5} />
|
||||
<DynamicTruncatedText
|
||||
text="Dicari perawat kucing"
|
||||
fontSize={12}
|
||||
fontFamily="System"
|
||||
style={stylesHome.vacancyDescription}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Vacancy Item 2 */}
|
||||
<View style={stylesHome.vacancyItem}>
|
||||
{/* <Icon name="user" size={20} color="#FFD700" /> */}
|
||||
<View style={stylesHome.vacancyDetails}>
|
||||
<DynamicTruncatedText
|
||||
text="fibramarcell"
|
||||
fontSize={14}
|
||||
fontFamily="System"
|
||||
style={stylesHome.vacancyName}
|
||||
/>
|
||||
<Spacing height={5} />
|
||||
<DynamicTruncatedText
|
||||
text="Di Butuhkan Seorang..."
|
||||
fontSize={12}
|
||||
fontFamily="System"
|
||||
style={stylesHome.vacancyDescription}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Spacing height={20} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
</>
|
||||
);
|
||||
}
|
||||
129
components/Home/homeViewStyle.tsx
Normal file
129
components/Home/homeViewStyle.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const stylesHome = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#001F3F", // Dark blue background
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 16,
|
||||
backgroundColor: "#001F3F",
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
color: "#FFD700", // Gold color
|
||||
},
|
||||
notificationBadge: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
badgeCount: {
|
||||
backgroundColor: "#FFD700",
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
marginLeft: 4,
|
||||
},
|
||||
badgeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
color: "#001F3F",
|
||||
},
|
||||
banner: {
|
||||
width: "100%",
|
||||
height: 200,
|
||||
resizeMode: "cover",
|
||||
marginVertical: 16,
|
||||
borderRadius: 8,
|
||||
},
|
||||
gridContainer: {
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
gridItem: {
|
||||
width: "46%",
|
||||
height: "100%",
|
||||
aspectRatio: 1,
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginVertical: 8,
|
||||
borderWidth: 2,
|
||||
borderColor: AccentColor.blue,
|
||||
},
|
||||
gridLabel: {
|
||||
marginTop: 8,
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
jobVacancyContainer: {
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 16,
|
||||
borderWidth: 2,
|
||||
borderColor: AccentColor.blue,
|
||||
},
|
||||
jobVacancyHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginBottom: 16,
|
||||
},
|
||||
jobVacancyTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
marginLeft: 8,
|
||||
},
|
||||
vacancyList: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
// backgroundColor: "red",
|
||||
},
|
||||
vacancyItem: {
|
||||
flex: 1,
|
||||
backgroundColor: MainColor.darkblue,
|
||||
borderRadius: 8,
|
||||
padding: 15,
|
||||
marginHorizontal: 5,
|
||||
// borderWidth: 1,
|
||||
// borderColor: AccentColor.blue,
|
||||
// marginRight: 8,
|
||||
},
|
||||
vacancyDetails: {
|
||||
marginLeft: 8,
|
||||
},
|
||||
vacancyName: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
color: "#FFD700",
|
||||
},
|
||||
vacancyDescription: {
|
||||
fontSize: 12,
|
||||
color: "white",
|
||||
},
|
||||
bottomNav: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
alignItems: "center",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "#333",
|
||||
paddingVertical: 12,
|
||||
backgroundColor: "#001F3F",
|
||||
},
|
||||
navItem: {
|
||||
alignItems: "center",
|
||||
},
|
||||
navLabel: {
|
||||
marginTop: 4,
|
||||
color: "white",
|
||||
},
|
||||
});
|
||||
73
components/_ShareComponent/TruncatedText.tsx
Normal file
73
components/_ShareComponent/TruncatedText.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { StyleSheet, Text, TextStyle, View } from "react-native";
|
||||
|
||||
interface DynamicTruncatedTextProps {
|
||||
text: string;
|
||||
fontSize?: number;
|
||||
fontFamily?: TextStyle["fontFamily"];
|
||||
style?: TextStyle;
|
||||
}
|
||||
|
||||
const DynamicTruncatedText: React.FC<DynamicTruncatedTextProps> = ({
|
||||
text,
|
||||
fontSize = 14,
|
||||
fontFamily,
|
||||
style
|
||||
|
||||
}) => {
|
||||
const [truncated, setTruncated] = useState<string>(text);
|
||||
const textRef = useRef<Text>(null);
|
||||
const containerWidth = useRef<number>(0);
|
||||
|
||||
const handleLayout = (event: any) => {
|
||||
const { width } = event.nativeEvent.layout;
|
||||
containerWidth.current = width;
|
||||
truncateText(width);
|
||||
};
|
||||
|
||||
const truncateText = useCallback(
|
||||
(width: number) => {
|
||||
if (!text || !textRef.current || width <= 0) return;
|
||||
|
||||
textRef.current.measure((x, y, textWidth, height, pageX, pageY) => {
|
||||
const avgCharWidth = fontSize * 0.5;
|
||||
const maxChars = Math.floor(width / avgCharWidth);
|
||||
|
||||
if (text.length <= maxChars) {
|
||||
setTruncated(text);
|
||||
} else {
|
||||
const truncatedText = text.substring(0, maxChars - 3) + "...";
|
||||
setTruncated(truncatedText);
|
||||
}
|
||||
});
|
||||
},
|
||||
[text, fontSize]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (containerWidth.current > 0) {
|
||||
truncateText(containerWidth.current);
|
||||
}
|
||||
}, [truncateText]);
|
||||
|
||||
return (
|
||||
<View onLayout={handleLayout} style={styles.container}>
|
||||
<Text
|
||||
ref={textRef}
|
||||
numberOfLines={1}
|
||||
ellipsizeMode="clip"
|
||||
style={{ fontSize, fontFamily, ...style }}
|
||||
>
|
||||
{truncated}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
overflow: "hidden",
|
||||
},
|
||||
});
|
||||
|
||||
export default DynamicTruncatedText;
|
||||
@@ -1,4 +1,5 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { MainColor } from "@/constants/color-palet";
|
||||
import { globalStyles } from "@/constants/global-styles";
|
||||
import { ImageBackground, ScrollView, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
@@ -12,13 +13,14 @@ const ViewWrapper = ({ children }: ViewWrapperProps) => {
|
||||
|
||||
return (
|
||||
<SafeAreaView
|
||||
edges={["top", "bottom"]}
|
||||
edges={[]}
|
||||
style={{
|
||||
flex: 1,
|
||||
// paddingTop: StatusBar.currentHeight,
|
||||
}}
|
||||
|
||||
>
|
||||
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
|
||||
<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
|
||||
<ImageBackground
|
||||
source={require("../../assets/images/main-background.png")}
|
||||
resizeMode="cover"
|
||||
|
||||
Reference in New Issue
Block a user