Add home and clock on top

3 files changed, 54 insertions, 4 deletions

diff --git a/App.tsx b/App.tsx
index 1b42456..6c2c0dc 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,8 +1,9 @@
 import React, {useState} from 'react';
-import {SafeAreaView, Text, View} from 'react-native';
+import {SafeAreaView} from 'react-native';
 import {InstalledApps} from 'react-native-launcher-kit';
 import Swiper from 'react-native-swiper';
 import {AppList} from './src/screens/AppList';
+import {Home} from './src/screens/Home';
 
 function App(): React.JSX.Element {
   const [apps, setApps] = useState(() => InstalledApps.getSortedApps());
@@ -20,9 +21,7 @@ function App(): React.JSX.Element {
         activeDot={<></>}
         index={screenIndex}
         onIndexChanged={setScreenIndex}>
-        <View>
-          <Text>Wow</Text>
-        </View>
+        <Home />
 
         <AppList apps={apps} screenIndex={screenIndex} />
       </Swiper>
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
new file mode 100644
index 0000000..113201f
--- /dev/null
+++ b/src/components/Clock.tsx
@@ -0,0 +1,37 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {Text, View} from 'react-native';
+
+export const Clock: React.FC = () => {
+  const [date, setDate] = useState(() => new Date());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const timeText = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat('en', {
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    });
+    return formatter.format(date);
+  }, [date]);
+
+  const dateText = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat('en-IN', {
+      month: 'short',
+      day: 'numeric',
+      weekday: 'long',
+    });
+    return formatter.format(date);
+  }, [date]);
+
+  return (
+    <View className="p-6">
+      <Text className="text-3xl font-bold">{timeText}</Text>
+      <Text className="text-lg">{dateText}</Text>
+    </View>
+  );
+};
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
new file mode 100644
index 0000000..da24e13
--- /dev/null
+++ b/src/screens/Home.tsx
@@ -0,0 +1,14 @@
+import React, {useMemo} from 'react';
+import {Text, View} from 'react-native';
+import {Clock} from '../components/Clock';
+
+export const Home: React.FC = () => {
+  return (
+    <View>
+      <Clock />
+      <View className="p-6">
+        <Text>Favorites list</Text>
+      </View>
+    </View>
+  );
+};