Fakultas Ilmu Komputer UI

Commit d33d65b8 authored by angelin depthios's avatar angelin depthios
Browse files

Merge branch 'component-ecosystem-card-vertical' into 'master'

Vertical Card Component

See merge request !71
parents f1174af9 cb4da3e9
Pipeline #86125 passed with stage
in 9 minutes and 31 seconds
import { MaterialIcons } from "@expo/vector-icons";
import React from "react";
import { View, Text, StyleSheet, Dimensions, Image } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import Colors from "../../constants/Colors";
import Spacer from "../Spacer/Spacer";
type props = {
imageSource?: string;
members: number;
title: string;
onPressFunction: () => void;
};
const VerticalCard = ({
imageSource,
members,
title,
onPressFunction,
}: props) => {
return (
<View testID="VerticalCard">
<TouchableOpacity
onPress={() => onPressFunction()}
style={styles.touchableContainer}
>
<View style={styles.cardContainer}>
<View style={styles.contentContainer}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: imageSource }} />
</View>
<Spacer variant="m" />
<View style={styles.textContainer} testID="textContainer">
<View style={styles.membersContainer} testID="membersContainer">
<MaterialIcons
testID="groupIcon"
name={"group"}
size={18}
style={styles.icon}
/>
<Text style={styles.membersText} testID="membersText">
{" "}
{members} Anggota
</Text>
</View>
<Spacer variant="m" />
<View style={styles.titleContainer} testID="titleContainer">
<Text style={styles.titleText} testID="titleText">
{title}
</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
</View>
);
};
const deviceWidth = Math.round(Dimensions.get("window").width);
const containerDimension = deviceWidth * 0.51;
const styles = StyleSheet.create({
touchableContainer: {
shadowColor: "#000",
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.3,
shadowRadius: 6,
elevation: 4,
},
cardContainer: {
width: containerDimension,
height: containerDimension,
color: Colors.background,
borderRadius: 8,
overflow: "hidden",
},
contentContainer: {
height: "100%",
width: "100%",
backgroundColor: "#fff",
},
icon: {
color: Colors.text.disabled,
fontSize: 15,
},
membersText: {
color: Colors.text.disabled,
fontSize: 12,
fontWeight: "300",
},
imageContainer: {
height: "53.6%",
width: "100%",
backgroundColor: Colors.form.disabled.bg,
justifyContent: "center",
alignItems: "center",
},
image: {
height: "100%",
width: "100%",
},
membersContainer: {
flexDirection: "row",
},
titleContainer: {
flexDirection: "row",
},
textContainer: {
paddingHorizontal: 8,
paddingBottom: 8,
},
titleText: {
fontSize: 14,
fontWeight: "300",
},
});
export default VerticalCard;
Markdown is supported
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