style: unify card design (#13)

src/components/area.tsx

@@ -0,0 +1,50 @@
+import { ReactElement } from "react";
+import { Card, Icon, Text } from "react-native-paper";
+import { StyleSheet, View } from "react-native";
+
+export default function Area({
+  title,
+  icon,
+  children,
+  right,
+}: {
+  title: string;
+  icon: string;
+  children?: ReactElement | ReactElement[];
+  right?: undefined | ReactElement;
+}) {
+  return (
+    <Card>
+      <Card.Content>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Icon size={22} source={icon} />
+            <Text style={styles.text} variant={"titleMedium"}>
+              {title}
+            </Text>
+            {right}
+          </View>
+          {children && <View style={styles.content}>{children}</View>}
+        </View>
+      </Card.Content>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
+  text: {
+    flex: 1,
+  },
+  content: {
+    gap: 10,
+  },
+});

src/components/feed/feed.tsx

@@ -4,20 +4,18 @@ import { useAtomValue } from "jotai";
 import { feedAtom } from "../../stores/feed";
 import { ActivityIndicator, Card } from "react-native-paper";
 import Item from "./item";
+import Area from "../area";
 
 export default function Feed() {
   const feed = useAtomValue(feedAtom);
 
   return (
-    <Card>
-      <Card.Title title={"Nieuws"} />
-      <Card.Content style={{ gap: 10 }}>
-        {feed ? (
-          feed.map((item, index) => <Item key={index} item={item} />)
-        ) : (
-          <ActivityIndicator animating={true} />
-        )}
-      </Card.Content>
-    </Card>
+    <Area title={"Nieuws"} icon={"bullhorn"}>
+      {feed ? (
+        feed.map((item, index) => <Item key={index} item={item} />)
+      ) : (
+        <ActivityIndicator animating={true} />
+      )}
+    </Area>
   );
 }

src/components/register/listing.tsx

@@ -10,6 +10,7 @@ import { StyleSheet, TouchableOpacity } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "react-native-screens/native-stack";
 import { StackParamList } from "../../../App";
+import Area from "../area";
 
 type SlotNavigationProps = NativeStackNavigationProp<StackParamList>;
 
@@ -38,23 +39,14 @@ export default function Listing() {
   const slots = useAtomValue(slotsAtom);
 
   return (
-    <Card>
-      <Card.Title title={"Aanmelden"} />
-      <Card.Content style={styles.content}>
-        {slots ? (
-          slots.map((slot, index) => (
-            <SlotListing key={index} slot={slot} index={index} />
-          ))
-        ) : (
-          <ActivityIndicator animating={true} />
-        )}
-      </Card.Content>
-    </Card>
+    <Area title={"Aanmelden"} icon={"playlist-check"}>
+      {slots ? (
+        slots.map((slot, index) => (
+          <SlotListing key={index} slot={slot} index={index} />
+        ))
+      ) : (
+        <ActivityIndicator animating={true} />
+      )}
+    </Area>
   );
 }
-
-const styles = StyleSheet.create({
-  content: {
-    gap: 10,
-  },
-});

src/components/register/precenseCard.tsx

@@ -38,7 +38,7 @@ export default function PresenceCard({
   if (!slot.presence) return;
 
   return (
-    <>
+    <View>
       <PaperSelect
         label={"Lid handmatig aanmelden"}
         arrayList={members
@@ -69,7 +69,7 @@ export default function PresenceCard({
           <Presence key={presence.id} presence={presence} slot={slot} />
         ))}
       </View>
-    </>
+    </View>
   );
 }
 

src/components/register/presence.tsx

@@ -44,7 +44,7 @@ export default function Presence({
     <TouchableOpacity style={styles.presence} onPress={markSeen}>
       <Switch value={seen} onChange={markSeen} />
       <Text>{presence.name}</Text>
-      {presence.stripcard_count && (
+      {!!presence.stripcard_count && (
         <View style={styles.stripcard}>
           <Icon size={22} source={"clipboard-list"} />
           <Text>

src/screens/calendar/calendar.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { parse, VEvent } from "unfucked-ical";
 import Item from "../../components/feed/item";
 import { ActionType, FeedItem, sortFeeds } from "../../stores/feed";
+import Area from "../../components/area";
 
 export default function CalendarScreen() {
   const [date, setDate] = useState(new Date());
@@ -64,45 +65,41 @@ export default function CalendarScreen() {
       </Appbar.Header>
       <ScrollView>
         <View style={styles.container}>
-          <Card>
-            <Card.Content style={styles.header}>
-              <View style={styles.headerText}>
-                <Icon size={18} source={"calendar"} />
-                <Text variant={"titleMedium"}>Vanaf</Text>
-              </View>
+          <Area
+            title={"Vanaf"}
+            icon={"calendar"}
+            right={
+              <>
+                {Platform.OS === "ios" && (
+                  <DateTimePicker
+                    value={date}
+                    onChange={(_, date) => setDate(date as Date)}
+                    mode={"date"}
+                  />
+                )}
+                {Platform.OS === "android" && (
+                  <Button
+                    mode={"elevated"}
+                    onPress={() => {
+                      DateTimePickerAndroid.open({
+                        value: date,
+                        onChange: (_, date) => setDate(date as Date),
+                        mode: "date",
+                      });
+                    }}
+                  >
+                    {date.toLocaleDateString("nl-NL")}
+                  </Button>
+                )}
+              </>
+            }
+          />
 
-              {Platform.OS === "ios" && (
-                <DateTimePicker
-                  value={date}
-                  onChange={(_, date) => setDate(date as Date)}
-                  mode={"date"}
-                />
-              )}
-              {Platform.OS === "android" && (
-                <Button
-                  mode={"elevated"}
-                  onPress={() => {
-                    DateTimePickerAndroid.open({
-                      value: date,
-                      onChange: (_, date) => setDate(date as Date),
-                      mode: "date",
-                    });
-                  }}
-                >
-                  {date.toLocaleDateString("nl-NL")}
-                </Button>
-              )}
-            </Card.Content>
-          </Card>
-
-          <Card>
-            <Card.Title title={"Bijzonderheden"} titleVariant={"titleMedium"} />
-            <Card.Content style={{ gap: 10 }}>
-              {items.map((item, index) => (
-                <Item item={item} key={index} />
-              ))}
-            </Card.Content>
-          </Card>
+          <Area title={"Bijzonderheden"} icon={"calendar-alert"}>
+            {items.map((item, index) => (
+              <Item item={item} key={index} />
+            ))}
+          </Area>
         </View>
       </ScrollView>
     </>

src/screens/calendar/event.tsx

@@ -19,6 +19,7 @@ import { useAtom } from "jotai";
 import { useContext } from "react";
 import AuthContext, { Authed } from "../../auth";
 import * as WebBrowser from "expo-web-browser";
+import Area from "../../components/area";
 
 function friday() {
   return isFriday(new Date()) ? new Date() : nextFriday(new Date());
@@ -168,19 +169,13 @@ export default function EventScreen({ route, navigation }: Props) {
           </Button>
         )}
         {getDescription() && (
-          <Card>
-            <Card.Title titleVariant={"titleMedium"} title={"Beschrijving"} />
-            <Card.Content>
-              <Text>{getDescription()}</Text>
-            </Card.Content>
-          </Card>
+          <Area title={"Beschrijving"} icon={"information"}>
+            <Text>{getDescription()}</Text>
+          </Area>
         )}
-        <Card>
-          <Card.Title titleVariant={"titleMedium"} title={"Wanneer"} />
-          <Card.Content>
-            <Text>{getDates()}</Text>
-          </Card.Content>
-        </Card>
+        <Area title={"Wanneer"} icon={"calendar"}>
+          <Text>{getDates()}</Text>
+        </Area>
       </View>
     </ScrollView>
   );

src/screens/feed/search.tsx

@@ -14,6 +14,7 @@ import { ActionType, FeedItem } from "../../stores/feed";
 import Item from "../../components/feed/item";
 import { parse } from "fast-html-parser";
 import * as WebBrowser from "expo-web-browser";
+import Area from "../../components/area";
 
 export interface Item {
   id: number;
@@ -135,45 +136,39 @@ export default function SearchScreen() {
           >
             {searched && (
               <>
-                <Card>
-                  <Card.Title title={"Inventaris"} />
-                  <Card.Content style={styles.content}>
-                    {itemResults ? (
-                      itemResults.length > 0 ? (
-                        itemResults.map((result, index) => (
-                          <Item key={index} item={result} />
-                        ))
-                      ) : (
-                        <View style={styles.center}>
-                          <Text>Geen producten gevonden</Text>
-                          <Button onPress={orderList} mode={"text"}>
-                            Mis je iets? Bekijk de bestellijst
-                          </Button>
-                        </View>
-                      )
+                <Area title={"Inventaris"} icon={"package-variant-closed"}>
+                  {itemResults ? (
+                    itemResults.length > 0 ? (
+                      itemResults.map((result, index) => (
+                        <Item key={index} item={result} />
+                      ))
                     ) : (
-                      <ActivityIndicator animating={true} />
-                    )}
-                  </Card.Content>
-                </Card>
-                <Card>
-                  <Card.Title title={"Artikelen"} />
-                  <Card.Content style={styles.content}>
-                    {articleResults ? (
-                      articleResults.length > 0 ? (
-                        articleResults.map((result, index) => (
-                          <Item key={index} item={result} />
-                        ))
-                      ) : (
-                        <View style={styles.center}>
-                          <Text>Geen artikelen gevonden</Text>
-                        </View>
-                      )
+                      <View style={styles.center}>
+                        <Text>Geen producten gevonden</Text>
+                        <Button onPress={orderList} mode={"text"}>
+                          Mis je iets? Bekijk de bestellijst
+                        </Button>
+                      </View>
+                    )
+                  ) : (
+                    <ActivityIndicator animating={true} />
+                  )}
+                </Area>
+                <Area title={"Artikelen"} icon={"post"}>
+                  {articleResults ? (
+                    articleResults.length > 0 ? (
+                      articleResults.map((result, index) => (
+                        <Item key={index} item={result} />
+                      ))
                     ) : (
-                      <ActivityIndicator animating={true} />
-                    )}
-                  </Card.Content>
-                </Card>
+                      <View style={styles.center}>
+                        <Text>Geen artikelen gevonden</Text>
+                      </View>
+                    )
+                  ) : (
+                    <ActivityIndicator animating={true} />
+                  )}
+                </Area>
               </>
             )}
           </View>