Fakultas Ilmu Komputer UI

Commit 8a91428e authored by Muhammad Zahran Agung Dewantoro's avatar Muhammad Zahran Agung Dewantoro
Browse files

feat: add ecosystem horizontal card components

parent 65364bfa
import { MaterialIcons } from "@expo/vector-icons";
import React from "react";
import { Text, StyleSheet, TouchableOpacity, View, Image } from "react-native";
import Colors from "../../constants/Colors";
import Spacer from "../../components/Spacer/Spacer";
import { useAppSelector } from "../../hooks/reduxHooks";
import { IUser } from "../../types/firestore/User";
import Layout from "../../constants/Layout";
type props = {
image: string;
member: string;
title: string;
rate: string;
onPress: () => void;
};
const HorizontalCards = ({ image, member, title, rate, onPress }: props) => {
const user: IUser = useAppSelector((state) => state.user);
return (
<View>
<TouchableOpacity onPress={() => onPress()}>
<View style={styles.container}>
<View style={styles.cardWrapper}>
<Image style={styles.image} source={{ uri: image }} />
<View style={styles.textWrapper}>
<View style={styles.bodyWrapper}>
<MaterialIcons
name={"group"}
style={styles.iconMember}
size={30}
/>
<View style={styles.textWrapper}>
<Text style={styles.textMember}>{member} Anggota</Text>
</View>
</View>
<Spacer variant={"s"} />
<Text style={styles.title} numberOfLines={2} ellipsizeMode="tail">
{title}
</Text>
<Spacer variant={"s"} />
<View style={styles.bodyWrapper}>
<MaterialIcons
name={"star"}
style={styles.iconStar}
size={30}
/>
<View style={styles.textWrapper}>
<Text style={styles.textRating}>{rate}</Text>
</View>
</View>
</View>
</View>
</View>
</TouchableOpacity>
</View>
);
};
export default HorizontalCards;
const styles = StyleSheet.create({
container: {
width: "100%",
borderRadius: 8,
elevation: 4,
flexDirection: "row",
alignItems: "center",
backgroundColor: Colors.background,
},
cardWrapper: {
width: "100%",
flexDirection: "row",
},
imageWrapper: {
width: "100%",
},
textWrapper: {
width: "100%",
marginTop: 4,
paddingLeft: 8,
},
bodyWrapper: {
flexDirection: "row",
paddingTop: 8,
},
image: {
width: Layout.window.width * 0.4,
height: Layout.window.height * 0.16,
borderTopLeftRadius: 8,
borderBottomLeftRadius: 8,
overflow: "hidden",
backgroundColor: Colors.background,
},
iconMember: {
color: Colors.icon.tab.inactive,
},
textMember: {
color: Colors.text.disabled,
fontSize: 12,
},
title: {
color: Colors.text.subtitle,
width: Layout.window.width * 0.45,
},
iconStar: {
color: Colors.icon.star,
},
textRating: {
color: Colors.text.body,
fontSize: 14,
},
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment