zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added SongCardInfo for the V2 design and type fixes

Browse Source
This commit is contained in:
Clément Le Bihan
2023-09-20 00:35:10 +02:00
parent 94875d4c7f
commit 8e5c65e6f2
8 changed files with 503 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/views/HomeView.tsx
+6
View File
@@ -136,6 +136,12 @@ const HomeView = () => {
size="sm"
onPress={() => navigation.navigate('Settings')}
/>
<TextButton
label={'V2'}
colorScheme="gray"
size="sm"
onPress={() => navigation.navigate('HomeNew')}
/>
</HStack>
<Box style={{ width: '100%' }}>
<Heading>
front/views/V2/HomeView.tsx
+89 -59
View File
@@ -1,11 +1,48 @@
import { View, Image } from 'react-native';
import { Text } from 'native-base';
import { View } from 'react-native';
import { Text, useBreakpointValue } from 'native-base';
import React from 'react';
import { useQuery } from '../../Queries';
import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
import SongCardInfo from '../../components/V2/SongCardInfo';
import API from '../../API';
const bigSideRatio = 100;
const smallSideRatio = 61;
const bigSideRatio = 1000;
const smallSideRatio = 618;
type HomeCardProps = {
image: string;
title: string;
artist: string;
};
const cards = [
{
image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
title: 'Beethoven',
artist: 'Synphony No. 9',
},
{
image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
title: 'Mozart',
artist: 'Lieder Kantate KV 619',
},
{
image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
title: 'Back',
artist: 'Truc Truc',
},
{
image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
title: 'Mozart',
artist: 'Machin Machin',
},
] as [HomeCardProps, HomeCardProps, HomeCardProps, HomeCardProps];
const HomeView = () => {
const songsQuery = useQuery(API.getSongSuggestions);
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
const isPhone = screenSize === 'small';
return (
<View
style={{
@@ -15,19 +52,13 @@ const HomeView = () => {
flexDirection: 'column',
}}
>
<View
style={{
width: '100%',
aspectRatio: 16 / 9,
}}
>
<View>
<View
style={{
alignSelf: 'stretch',
maxWidth: '1100px',
alignItems: 'stretch',
flexDirection: 'row',
display: 'flex',
gap: '0px',
flexDirection: isPhone ? 'column' : 'row',
}}
>
<View
@@ -35,23 +66,14 @@ const HomeView = () => {
flexGrow: bigSideRatio,
}}
>
<Image
source={{
uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
}}
style={{
aspectRatio: 1,
}}
/>
<HomeMainSongCard {...cards[0]} />
</View>
<View
style={{
flexGrow: smallSideRatio,
height: '100%',
display: 'flex',
flexDirection: 'column',
flexDirection: isPhone ? 'row' : 'column',
alignItems: 'stretch',
gap: '0px',
}}
>
<View
@@ -59,23 +81,14 @@ const HomeView = () => {
flexGrow: bigSideRatio,
}}
>
<Image
source={{
uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
}}
style={{
aspectRatio: 1,
}}
/>
<HomeMainSongCard {...cards[1]} />
</View>
<View
style={{
flexGrow: smallSideRatio,
width: '100%',
display: 'flex',
flexDirection: 'row-reverse',
flexDirection: isPhone ? 'column-reverse' : 'row-reverse',
alignItems: 'stretch',
gap: '0px',
}}
>
<View
@@ -83,47 +96,32 @@ const HomeView = () => {
flexGrow: bigSideRatio,
}}
>
<Image
source={{
uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
}}
style={{
aspectRatio: 1,
}}
/>
<HomeMainSongCard {...cards[2]} />
</View>
<View
style={{
flexGrow: smallSideRatio,
height: '100%',
display: 'flex',
flexDirection: 'column-reverse',
flexDirection: isPhone ? 'row-reverse' : 'column-reverse',
alignItems: 'stretch',
gap: '0px',
}}
>
<View
style={{
flexGrow: bigSideRatio,
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-end',
}}
>
<Image
source={{
uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
}}
style={{
aspectRatio: 1,
}}
/>
<HomeMainSongCard {...cards[3]} />
</View>
<View
style={{
width: '100%',
flexGrow: smallSideRatio,
}}
>
<Text>More</Text>
</View>
></View>
</View>
</View>
</View>
@@ -137,7 +135,39 @@ const HomeView = () => {
width: '100%',
}}
>
<Text>Footer</Text>
<Text
style={{
color: 'white',
fontSize: 24,
fontWeight: 'bold',
marginLeft: 16,
marginBottom: 16,
marginTop: 24,
}}
>
{'Suggestions'}
</Text>
{songsQuery.isLoading && <Text>Loading...</Text>}
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
// @ts-expect-error - gap is not in the typings
gap: 16,
}}
>
{songsQuery.data?.map((song) => (
<SongCardInfo
key={song.id}
song={song}
onPress={() => {
console.log('SongCardInfo pressed');
}}
/>
))}
</View>
</View>
</View>
);