mirror of
https://github.com/anultravioletaurora/Jellify.git
synced 2026-01-04 12:50:02 -06:00
color and sizing
This commit is contained in:
@@ -6,11 +6,13 @@ import Icon from "./icon";
|
||||
export default function IconCard({
|
||||
name,
|
||||
onPress,
|
||||
width,
|
||||
caption,
|
||||
subCaption,
|
||||
}: {
|
||||
name: string,
|
||||
onPress: () => void,
|
||||
width?: number | undefined,
|
||||
caption?: string | undefined,
|
||||
subCaption?: string | undefined
|
||||
}) : React.JSX.Element {
|
||||
@@ -26,8 +28,8 @@ export default function IconCard({
|
||||
animation="bouncy"
|
||||
hoverStyle={{ scale: 0.925 }}
|
||||
pressStyle={{ scale: 0.875 }}
|
||||
width={150}
|
||||
height={150}
|
||||
width={width ? width : 150}
|
||||
height={width ? width : 150}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Card.Header>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { FlatList } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
|
||||
import Categories from "./categories";
|
||||
import IconCard from "@/components/Global/helpers/icon-card";
|
||||
import { StackParamList } from "@/components/types";
|
||||
@@ -13,15 +13,20 @@ export default function LibraryScreen({
|
||||
route: RouteProp<StackParamList, "Library">,
|
||||
navigation: NativeStackNavigationProp<StackParamList>
|
||||
}): React.JSX.Element {
|
||||
|
||||
const { width } = useSafeAreaFrame();
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<SafeAreaView edges={["top", "right", "left"]}>
|
||||
<FlatList
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
data={Categories}
|
||||
numColumns={2}
|
||||
renderItem={({ index, item }) => {
|
||||
return (
|
||||
<IconCard
|
||||
name={item.iconName}
|
||||
width={width / 2.1}
|
||||
onPress={() => {
|
||||
navigation.navigate(item.name)
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user