calender view (wip); added some colors; BaseBackground-Component

src/Constants.tsx

@@ -0,0 +1,28 @@
+export const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+] as const;
+
+export type MonthValue = (typeof MONTHS)[number];
+
+export const DAYS = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+export type DayValue = (typeof DAYS)[number];

src/Themes.tsx

@@ -4,6 +4,7 @@ type Theme = {
   primeBg: string,
   messageBorderBg: string,
   placeholderBg: string,
+  calenderBg: string,
 }
 
 const defaultLight: Theme = {
@@ -11,7 +12,8 @@ const defaultLight: Theme = {
   primeFg: "#3B3329",
   primeBg: "#FFEEDE",
   messageBorderBg: "#FFFFFF",
-  placeholderBg: "#D9D9D9"
+  placeholderBg: "#D9D9D9",
+  calenderBg: "#FBD5B2",
 }
 
 let currentTheme: Theme = defaultLight;

src/app/Calender.tsx

@@ -0,0 +1,118 @@
+import { Pressable, Text, View } from "react-native";
+import { DAYS, MONTHS } from "../Constants";
+import Header from "../components/Header";
+import { useState } from "react";
+import currentTheme from "../Themes";
+import BaseBackground from "../components/BaseBackground";
+
+// TODO: month selection dropdown menu
+
+const Calender = () => (
+  <BaseBackground>
+    <CalenderHeader />
+    <WeekDaysLine />
+    <CalenderGrid />
+  </BaseBackground>
+);
+
+const CalenderHeader = () => {
+  const [monthIndex, setMonthIndex] = useState(0);
+  const [currentYear, setCurrentYear] = useState(2025);
+
+  const changeMonth = (delta: number) => {
+    setMonthIndex((prev) => {
+      const newIndex = prev + delta;
+      if (newIndex > 11) {
+        setCurrentYear(currentYear + 1);
+        return 0;
+      }
+      if (newIndex < 0) {
+        setCurrentYear(currentYear - 1);
+        return 11;
+      }
+      return newIndex;
+    });
+  };
+
+  const prevMonth = () => changeMonth(-1);
+  const nextMonth = () => changeMonth(1);
+
+  return (
+    <Header className="flex flex-row items-center justify-between">
+      <ChangeMonthButton onPress={prevMonth} title={"<"} />
+      <Text className="text-4xl">
+        {MONTHS[monthIndex]} {currentYear}
+      </Text>
+      <ChangeMonthButton onPress={nextMonth} title={">"} />
+    </Header>
+  );
+};
+
+type ChangeMonthButtonProps = {
+  onPress: () => void;
+  title: string;
+};
+
+const ChangeMonthButton = (props: ChangeMonthButtonProps) => (
+  <Pressable
+    onPress={props.onPress}
+    className={
+      "w-16 h-16 bg-white rounded-full flex items-center " +
+      "justify-center border border-solid border-1 mx-2"
+    }
+    style={{
+      borderColor: currentTheme.primeFg,
+    }}
+  >
+    <Text className="text-4xl">{props.title}</Text>
+  </Pressable>
+);
+
+const WeekDaysLine = () => (
+  <View className="flex flex-row items-center justify-around px-2 gap-2">
+    {/* TODO: px and gap need fine tuning to perfectly align with the grid */}
+    {DAYS.map((day, i) => (
+      <Text key={i}>{day.substring(0, 2).toUpperCase()}</Text>
+    ))}
+  </View>
+);
+
+const CalenderGrid = () => (
+  <View
+    className="h-full flex-1 flex-col flex-wrap gap-2 p-2"
+    style={{
+      backgroundColor: currentTheme.calenderBg,
+    }}
+  >
+    {Array.from({ length: 6 }).map((_, i) => (
+      <View
+        key={i}
+        className="w-full flex-1 flex-row justify-around items-center gap-2"
+      >
+        {/* TODO: correctly retrieve or calculate the date */}
+        {Array.from({ length: 7 }).map((_, j) => (
+          <SingleDay key={j} date={i * 7 + (j+1)} />
+        ))}
+      </View>
+    ))}
+  </View>
+);
+
+type SingleDayProps = {
+  date: number,
+}
+
+const SingleDay = (props: SingleDayProps) => (
+  <View
+    className="h-full flex-1 aspect-auto rounded-xl"
+    style={{
+      backgroundColor: currentTheme.primeBg,
+    }}
+  >
+    <Text>
+      {props.date}
+    </Text>
+  </View>
+);
+
+export default Calender;

src/app/Chat.tsx

@@ -2,6 +2,7 @@ import { View, Text, FlatList, TextInput } from "react-native";
 import currentTheme from "../Themes";
 import { useState } from "react";
 import Header from "../components/Header";
+import BaseBackground from "../components/BaseBackground";
 
 // TODO: better shadows for everything
 // (maybe with extra library because of differences between android and ios)
@@ -243,12 +244,7 @@ const messages: MessageData[] = [
 
 const Chat = () => {
   return (
-    <View
+    <BaseBackground>
-      className="h-full"
-      style={{
-        backgroundColor: currentTheme.primeBg,
-      }}
-    >
       <ChatHeader />
       <FlatList
         inverted
@@ -264,13 +260,13 @@ const Chat = () => {
         // extraData={selectedId} might need this later for re-rendering
       />
       <ChatInput />
-    </View>
+    </BaseBackground>
   );
 };
 
 const ChatHeader = () => {
   return (
-    <Header>
+    <Header className="flex flex-row items-center">
       <View
         className="ml-3 w-12 h-12 rounded-3xl border border-solid"
         style={{

src/components/BaseBackground.tsx

@@ -0,0 +1,23 @@
+import { View } from "react-native"
+import currentTheme from "../Themes"
+import { ReactNode } from "react";
+
+type BaseBackgroundProps = {
+  children?: ReactNode;
+  className?: string;
+}
+
+const BaseBackground = (props: BaseBackgroundProps) => {
+  return (
+    <View
+      className={`h-full ${props.className}`}
+      style={{
+        backgroundColor: currentTheme.primeBg,
+      }}
+    >
+      {props.children}
+    </View>
+  )
+}
+
+export default BaseBackground;

src/components/Header.tsx

@@ -4,13 +4,14 @@ import { ReactNode } from "react";
 
 type HeaderProps = {
   children?: ReactNode;
+  className?: string;
 };
 
 const Header = (props: HeaderProps) => {
   return (
     <View>
       <View
-        className="w-full h-32 flex flex-row items-center pt-10 pb-4"
+        className={`w-full h-32 pt-10 pb-4 ${props.className}`}
         style={{
           backgroundColor: currentTheme.chatBot,
         }}