Add home and clock on top

2 files changed, 51 insertions, 0 deletions

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>
+  );
+};