News added

app/(tabs)/home/index.tsx

@@ -3,6 +3,11 @@ import { Header } from '../../../components/common/header';
 import { Title } from '../../../components/common/title';
 import { ScheduleList } from '../../../components/schedule/schedule-list';
 import { useSchedule } from '../../../hooks/use-schedule';
+import { View} from "react-native";
+import React from "react";
+import {Menutitle} from "../../../components/common/menutitle";
+import {NewsList} from "../../../components/news/news-list";
+import {news} from "../../../mocks/news";
 
 interface HomePageProps {}
 
@@ -14,7 +19,11 @@ export default function HomePage({}: HomePageProps) {
       <Header>
         <Title>Simonyi Konferencia</Title>
       </Header>
+        <Menutitle>Előadások</Menutitle>
       <ScheduleList schedule={data ?? []} filterToCurrent filterToUpcoming />
+        <View className='w-20 h-1 rounded-full bg-slate-300 mx-5 my-5' />
+        <Menutitle>Hírek</Menutitle>
+      <NewsList news={news}></NewsList>
     </Screen>
   );
 }

app/(tabs)/home/news-details.tsx

@@ -0,0 +1,7 @@
+import { NewsDetailsPage } from '../../../components/news/news-details-page';
+import { useSafeId } from '../../../utils/common.utils';
+
+export default function NewsDetails() {
+    const id = useSafeId();
+    return <NewsDetailsPage id={id} />;
+}

components/common/menutitle.tsx

@@ -0,0 +1,12 @@
+import { TextProps } from 'react-native';
+
+import { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+
+export function Menutitle({ children, className, ...props }: TextProps) {
+    return (
+        <StyledText className={cn('text-2xl mx-5 mb-5', className)} {...props}>
+            {children}
+        </StyledText>
+);
+}

components/news/news-details-page.tsx

@@ -0,0 +1,22 @@
+import { Screen } from '../base/screen';
+import { StyledText } from '../base/text';
+import { Header } from '../common/header';
+import { Title } from '../common/title';
+import {useNewsItem} from "../../hooks/use-news-item";
+
+interface NewsDetailsPageProps {
+  id: string;
+}
+
+export function NewsDetailsPage({ id }: NewsDetailsPageProps) {
+  const { data } = useNewsItem(id);
+  if (!data) return <></>;
+  return (
+    <Screen>
+      <Header>
+        <Title>{data?.title}</Title>
+      </Header>
+      <StyledText className='mx-5 text-xl'>{data?.description}</StyledText>
+    </Screen>
+  );
+}

components/news/news-item.tsx

@@ -0,0 +1,36 @@
+import { useNavigation } from 'expo-router';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { NativeStackNavigationProp } from 'react-native-screens/native-stack';
+
+import { cn } from '../../utils/common.utils';
+import { StyledText } from '../base/text';
+import {NewsEvent} from "../../types/news-event.type";
+
+interface NewsItem {
+  event: NewsEvent;
+}
+
+export function NewsItem({ event }: NewsItem) {
+  const router = useNavigation<NativeStackNavigationProp<{ 'news-details': { id: string } }>>();
+  const [isPressed, setIsPressed] = useState(false);
+  const onPress = () => {
+    router.navigate('news-details', { id: event.id });
+  };
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => setIsPressed(true)}
+      onPressOut={() => setIsPressed(false)}
+      className={cn('mb-5 rounded-xl bg-white flex-row p-3 items-center shadow-md shadow-slate-500/10', {
+        'bg-slate-50': isPressed
+      })}
+    >
+      <View className='flex-col gap-2 flex-1 mx-2'>
+        <StyledText className='text-xl' numberOfLines={1}>
+          {event.title}
+        </StyledText>
+      </View>
+    </Pressable>
+  );
+}

components/news/news-list.tsx

@@ -0,0 +1,19 @@
+
+import { FlatList } from 'react-native';
+
+import {NewsEvent} from "../../types/news-event.type";
+import {NewsItem} from "./news-item";
+
+interface NewsListProps {
+  news: NewsEvent[];
+}
+
+export function NewsList({ news }: NewsListProps) {
+  return (
+    <FlatList
+      data={news}
+      className='flex-grow px-5'
+      renderItem={(listInfo) => <NewsItem event={listInfo.item} />}
+    />
+  );
+}

hooks/use-news-item.ts

@@ -0,0 +1,7 @@
+import {useNews} from "./use-news";
+
+export function useNewsItem(id: string) {
+  const { data, ...rest } = useNews();
+  const item = data?.find((item) => item.id === id);
+  return { data: item, ...rest };
+}

hooks/use-news.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+
+import {NewsEvent} from "../types/news-event.type";
+import {news} from "../mocks/news";
+
+export function useNews() {
+  return useQuery<NewsEvent[]>({
+    queryKey: ['news'],
+    queryFn: getNews,
+  });
+}
+
+const delay = 0;
+
+function getNews(): Promise<NewsEvent[]> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(news);
+    }, delay);
+  });
+}

mocks/news.ts

@@ -0,0 +1,14 @@
+import {NewsEvent} from "../types/news-event.type";
+
+export const news: NewsEvent[] = [
+    {
+        id: '0',
+        title: "ur mother",
+        description: "lol"
+    },
+    {
+        id: '1',
+        title: "asd",
+        description: "ekekekekekekekekekekekekekekekekekekekeekkekekeekekekkekekekekekekekekekekekeke"
+    }
+]

types/news-event.type.ts

@@ -0,0 +1,5 @@
+export type NewsEvent ={
+    id: string;
+    title: string;
+    description: string;
+}