From 94875d4c7f7aceae0cf8ec59e15ff3cff53f3ad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Tue, 19 Sep 2023 17:35:55 +0200
Subject: [PATCH] trying golden ratio

---
 front/components/V2/TabNavigation.tsx        |  11 +-
 front/components/V2/TabNavigationDesktop.tsx |   8 +-
 front/components/V2/TabNavigationPhone.tsx   |   8 +-
 front/views/V2/HomeView.tsx                  | 146 +++++++++++++++++++
 4 files changed, 165 insertions(+), 8 deletions(-)
 create mode 100644 front/views/V2/HomeView.tsx

diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
index bb7c30d..6a3c724 100644
--- a/front/components/V2/TabNavigation.tsx
+++ b/front/components/V2/TabNavigation.tsx
@@ -5,6 +5,7 @@ import TabNavigationPhone from './TabNavigationPhone';
 import { Ionicons } from '@expo/vector-icons';
 import React, { useState } from 'react';
 import useColorScheme from '../../hooks/colorScheme';
+import HomeView from '../../views/V2/HomeView';
 
 export type NaviTab = {
 	id: string;
@@ -62,6 +63,8 @@ const TabNavigation = () => {
 	const [activeTab, setActiveTab] = useState(tabs[0]?.id ?? 'home');
 	const colorScheme = useColorScheme();
 
+	const child = <HomeView />;
+
 	const appTabs = tabs.map((t) => {
 		return {
 			...t,
@@ -90,7 +93,9 @@ const TabNavigation = () => {
 					tabs={appTabs}
 					activeTabID={activeTab}
 					setActiveTabID={setActiveTab}
-				/>
+				>
+					{child}
+				</TabNavigationPhone>
 			) : (
 				<TabNavigationDesktop
 					tabs={appTabs}
@@ -98,7 +103,9 @@ const TabNavigation = () => {
 					setActiveTabID={setActiveTab}
 					isCollapsed={isDesktopCollapsed}
 					setIsCollapsed={setIsDesktopCollapsed}
-				/>
+				>
+					{child}
+				</TabNavigationDesktop>
 			)}
 		</View>
 	);
diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
index 339f580..2fe80c7 100644
--- a/front/components/V2/TabNavigationDesktop.tsx
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -12,6 +12,7 @@ type TabNavigationDesktopProps = {
 	setIsCollapsed: (isCollapsed: boolean) => void;
 	activeTabID: string;
 	setActiveTabID: (id: string) => void;
+	children?: React.ReactNode;
 };
 
 const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
@@ -139,9 +140,10 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					</TabNavigationList>
 				</View>
 			</View>
-			<View>
-				<Text>Main content page</Text>
-			</View>
+			<View style={{
+				height: '100%',
+				width: 'calc(100% - 300px)',
+			}}>{props.children}</View>
 		</View>
 	);
 };
diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx
index 01d1902..16485e1 100644
--- a/front/components/V2/TabNavigationPhone.tsx
+++ b/front/components/V2/TabNavigationPhone.tsx
@@ -7,6 +7,7 @@ type TabNavigationPhoneProps = {
 	tabs: NaviTab[];
 	activeTabID: string;
 	setActiveTabID: (id: string) => void;
+	children?: React.ReactNode;
 };
 
 const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
@@ -54,9 +55,10 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 					</View>
 				</Center>
 			</View>
-			<View>
-				<Text>Main content page</Text>
-			</View>
+			<View style={{
+				width: '100%',
+				height: 'calc(100% - 90px)',
+			}}>{props.children}</View>
 		</View>
 	);
 };
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
new file mode 100644
index 0000000..c5441f8
--- /dev/null
+++ b/front/views/V2/HomeView.tsx
@@ -0,0 +1,146 @@
+import { View, Image } from 'react-native';
+import { Text } from 'native-base';
+import React from 'react';
+
+const bigSideRatio = 100;
+const smallSideRatio = 61;
+
+const HomeView = () => {
+	return (
+		<View
+			style={{
+				width: '100%',
+				height: '100%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<View
+				style={{
+					width: '100%',
+                    aspectRatio: 16 / 9,
+				}}
+			>
+				<View
+					style={{
+						alignSelf: 'stretch',
+						alignItems: 'stretch',
+						flexDirection: 'row',
+						display: 'flex',
+						gap: '0px',
+					}}
+				>
+					<View
+						style={{
+							flexGrow: bigSideRatio,
+						}}
+					>
+						<Image
+							source={{
+								uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
+							}}
+							style={{
+								aspectRatio: 1,
+							}}
+						/>
+					</View>
+					<View
+						style={{
+							flexGrow: smallSideRatio,
+							height: '100%',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'stretch',
+							gap: '0px',
+						}}
+					>
+						<View
+							style={{
+								flexGrow: bigSideRatio,
+							}}
+						>
+							<Image
+								source={{
+									uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
+								}}
+								style={{
+									aspectRatio: 1,
+								}}
+							/>
+						</View>
+						<View
+							style={{
+								flexGrow: smallSideRatio,
+								width: '100%',
+								display: 'flex',
+								flexDirection: 'row-reverse',
+								alignItems: 'stretch',
+								gap: '0px',
+							}}
+						>
+							<View
+								style={{
+									flexGrow: bigSideRatio,
+								}}
+							>
+								<Image
+									source={{
+										uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
+									}}
+									style={{
+										aspectRatio: 1,
+									}}
+								/>
+							</View>
+							<View
+								style={{
+									flexGrow: smallSideRatio,
+									height: '100%',
+									display: 'flex',
+									flexDirection: 'column-reverse',
+									alignItems: 'stretch',
+									gap: '0px',
+								}}
+							>
+								<View
+									style={{
+										flexGrow: bigSideRatio,
+									}}
+								>
+									<Image
+										source={{
+											uri: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
+										}}
+										style={{
+											aspectRatio: 1,
+										}}
+									/>
+								</View>
+								<View
+									style={{
+										width: '100%',
+										flexGrow: smallSideRatio,
+									}}
+								>
+									<Text>More</Text>
+								</View>
+							</View>
+						</View>
+					</View>
+				</View>
+			</View>
+			<View
+				style={{
+					flexShrink: 0,
+					flexGrow: 0,
+					flexBasis: '15%',
+					width: '100%',
+				}}
+			>
+				<Text>Footer</Text>
+			</View>
+		</View>
+	);
+};
+
+export default HomeView;