Fakultas Ilmu Komputer UI

Commit c6544c2d authored by Ahmad Izzudin Alifyandra's avatar Ahmad Izzudin Alifyandra
Browse files

Merge branch 'ecosystem-carousel' into 'master'

feat: create carousel VerticalCard and category with PlainButton

See merge request !79
parents 4e700b18 b7b8359c
Pipeline #86154 passed with stage
in 8 minutes and 7 seconds
import React from "react";
import { StyleSheet, View, FlatList, ScrollView } from "react-native";
import Spacer from "../Spacer/Spacer";
import ArrowlessPlainButton from "../button/ArrowlessPlainButton";
type props = {
list: { id: string; name: string }[];
};
const CategoryHorizontalCarousel = ({ list }: props) => {
return (
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={styles.carousel}
>
<FlatList
data={list}
renderItem={({ item }) => {
return (
<View style={styles.slide}>
<ArrowlessPlainButton content={item.name} onPress={null} />
</View>
);
}}
numColumns={Math.ceil(list.length / 2)}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
<Spacer variant={"l"} />
</ScrollView>
);
};
const styles = StyleSheet.create({
carousel: {
flex: 1,
flexDirection: "row",
},
slide: {
width: 288,
justifyContent: "center",
alignItems: "center",
paddingRight: 16,
},
});
export default CategoryHorizontalCarousel;
import React from "react";
import { StyleSheet, View, FlatList, ScrollView } from "react-native";
import Spacer from "../Spacer/Spacer";
import VerticalCard from "../Cards/VerticalCard";
type props = {
list: {
id: string;
name: string;
pic: string;
followerCount: number;
}[];
};
const VerticalEcosystemCarousel = ({ list }: props) => {
return (
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={styles.carousel}
>
<FlatList
horizontal={true}
data={list}
renderItem={({ item }) => {
return (
<View style={styles.slide}>
<VerticalCard
members={item.followerCount}
title={item.name}
imageSource={item.pic}
onPressFunction={null}
/>
</View>
);
}}
ItemSeparatorComponent={() => <Spacer variant={"l"} />}
keyExtractor={(item) => item.id}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
/>
</ScrollView>
);
};
const styles = StyleSheet.create({
carousel: {
flex: 1,
flexDirection: "row",
},
slide: {
width: 210,
justifyContent: "center",
alignItems: "center",
},
});
export default VerticalEcosystemCarousel;
export type IEcosystem = {
item: {
id?: string;
image: string;
member: string;
title: string;
rate: string;
};
};
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