From e9cb0e7e50d85e500b6a007559e0843f5db76c17 Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Fri, 22 Jan 2021 01:29:40 +0100
Subject: [PATCH] first implementation of deck buttons

---
 src/App.tsx                   | 107 +++++-----------------------------
 src/components/Deck.tsx       |  18 ++++++
 src/components/DeckButton.tsx |  28 +++++++++
 3 files changed, 59 insertions(+), 94 deletions(-)
 create mode 100644 src/components/Deck.tsx
 create mode 100644 src/components/DeckButton.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 08d25c9..697353c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,110 +9,29 @@
  */
 
 import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import {SafeAreaView, StatusBar} from 'react-native';
+import Deck from './components/Deck';
+import DeckButton from './components/DeckButton';
 
 declare const global: {HermesInternal: null | {}};
 
 const App = () => {
   return (
     <>
-      <StatusBar barStyle="dark-content" />
+      <StatusBar hidden={true} />
       <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
+        <Deck>
+          <DeckButton text="Btn1" />
+          <DeckButton text="Btn2" />
+          <DeckButton text="Btn3" />
+          <DeckButton text="Btn4" />
+          <DeckButton text="Btn5" />
+          <DeckButton text="Btn6" />
+          <DeckButton text="Btn7" />
+        </Deck>
       </SafeAreaView>
     </>
   );
 };
 
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
 export default App;
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
new file mode 100644
index 0000000..47e4acf
--- /dev/null
+++ b/src/components/Deck.tsx
@@ -0,0 +1,18 @@
+import React, {PropsWithChildren} from 'react';
+import {StyleSheet, View} from 'react-native';
+
+export default function Deck(props: PropsWithChildren<{}>) {
+  return (
+    <>
+      <View style={style.view}>{props.children}</View>
+    </>
+  );
+}
+
+const style = StyleSheet.create({
+  view: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});
diff --git a/src/components/DeckButton.tsx b/src/components/DeckButton.tsx
new file mode 100644
index 0000000..f16cf53
--- /dev/null
+++ b/src/components/DeckButton.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+interface Props {
+  text: string;
+}
+
+export default function DeckButton(props: Props) {
+  return (
+    <>
+      <View style={style.view}>
+        <Text style={style.text}>{props.text}</Text>
+      </View>
+    </>
+  );
+}
+
+const style = StyleSheet.create({
+  view: {
+    backgroundColor: '#ff4000',
+    flexBasis: '25%',
+    height: 80,
+  },
+  text: {
+    backgroundColor: '#ffbf00',
+    textAlign: 'center',
+  },
+});