mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-03-03 08:29:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

icon card improvements

Browse Source
This commit is contained in:
Violet Caulfield
2025-02-09 13:21:40 -06:00
parent feef432d5a
commit 1c5d25dbc3
6 changed files with 59 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/Favorites/component.tsx
View File

@@ -31,6 +31,7 @@ export default function FavoritesScreen({
onPress={() => {
navigation.navigate(item.name)
}}
largeIcon
/>
)
}}

2
components/Global/helpers/icon-button.tsx
View File

@@ -25,7 +25,7 @@ export default function IconButton({
<TouchableOpacity>
<Square
animation={"bouncy"}
borderRadius={!circular ? 2 : undefined}
borderRadius={!circular ? 25 : undefined}
circular={circular}
elevate
hoverStyle={{ scale: 0.925 }}

22
components/Global/helpers/icon-card.tsx
View File

@@ -2,17 +2,21 @@ import { Card, getTokens, View } from "tamagui";
import { H2, H4 } from "./text";
import Icon from "./icon";
interface IconCardProps {
name: string;
onPress: () => void;
width?: number | undefined
caption?: string | undefined;
largeIcon?: boolean | undefined
}
export default function IconCard({
name,
onPress,
width,
caption,
}: {
name: string,
onPress: () => void,
width?: number | undefined,
caption?: string | undefined,
}) : React.JSX.Element {
largeIcon
}: IconCardProps) : React.JSX.Element {
return (
<View
@@ -29,7 +33,11 @@ export default function IconCard({
onPress={onPress}
>
<Card.Header>
<Icon color={getTokens().color.purpleDark.val} name={name} large />
<Icon
color={getTokens().color.purpleDark.val}
name={name}
large={largeIcon}
/>
</Card.Header>
<Card.Footer padded>
<H4 color={getTokens().color.purpleDark}>{ caption ?? "" }</H4>

3
components/Global/helpers/icon.tsx
View File

@@ -9,7 +9,8 @@ const regularSize = 36;
const largeSize = 48
export default function Icon({
name, onPress,
name,
onPress,
small,
large,
color

67
components/ItemDetail/component.tsx
View File

@@ -9,6 +9,8 @@ import { Text } from "../Global/helpers/text";
import FavoriteButton from "../Global/components/favorite-button";
import { useEffect } from "react";
import { trigger } from "react-native-haptic-feedback";
import TextTicker from "react-native-text-ticker";
import { TextTickerConfig } from "../Player/component.config";
export default function ItemDetail({
item,
@@ -82,39 +84,44 @@ export default function ItemDetail({
<YStack
marginLeft={"$0.5"}
alignItems="flex-start"
alignContent="flex-start"
justifyContent="flex-start"
flex={3}
>
<Text textAlign="center" bold fontSize={"$6"}>
{ item.Name ?? "Untitled Track" }
</Text>
>
<TextTicker {...TextTickerConfig}>
<Text bold fontSize={"$6"}>
{ item.Name ?? "Untitled Track" }
</Text>
</TextTicker>
<Text
textAlign="center"
fontSize={"$6"}
color={getTokens().color.telemagenta}
onPress={() => {
if (item.ArtistItems) {
if (isNested)
navigation.getParent()!.goBack();
navigation.goBack();
navigation.navigate("Artist", {
artist: item.ArtistItems[0]
});
}
}}>
{ item.Artists?.join(", ") ?? "Unknown Artist"}
</Text>
<Text
textAlign="center"
fontSize={"$6"}
color={"$borderColor"}
>
{ item.Album ?? "" }
</Text>
<TextTicker {...TextTickerConfig}>
<Text
fontSize={"$6"}
color={getTokens().color.telemagenta}
onPress={() => {
if (item.ArtistItems) {
if (isNested)
navigation.getParent()!.goBack();
navigation.goBack();
navigation.navigate("Artist", {
artist: item.ArtistItems[0]
});
}
}}>
{ item.Artists?.join(", ") ?? "Unknown Artist"}
</Text>
</TextTicker>
<TextTicker {...TextTickerConfig}>
<Text
fontSize={"$6"}
color={"$borderColor"}
>
{ item.Album ?? "" }
</Text>
</TextTicker>
</YStack>
<YStack

6
components/ItemDetail/helpers/TrackOptions.tsx
View File

@@ -60,7 +60,7 @@ export default function TrackOptions({
album
});
}}
size={width / 5}
size={width / 6}
/>
) : (
<Spacer />
@@ -76,7 +76,7 @@ export default function TrackOptions({
queuingType: QueuingType.PlayingNext
})
}}
size={width / 5}
size={width / 6}
/>
<IconButton
@@ -88,7 +88,7 @@ export default function TrackOptions({
track: track
})
}}
size={width / 5}
size={width / 6}
/>
</XStack>