+
+ );
+};
+
+export default ErrorMessage;
diff --git a/react-app/src/components/Feed.tsx b/react-app/src/components/Feed.tsx
new file mode 100644
index 00000000..fffe49fc
--- /dev/null
+++ b/react-app/src/components/Feed.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useFeed } from '../hooks/useHackerNews';
+import Item from './Item';
+import Loader from './Loader';
+import ErrorMessage from './ErrorMessage';
+
+interface FeedProps {
+ feedType: string;
+}
+
+const Feed: React.FC{message}
++ If you are offline viewing, you'll need to visit this page with a network + connection first before it can work offline. +
+
+
+ );
+ }
+
+ if (error && !items) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {items && (
+
+ );
+};
+
+export default Feed;
diff --git a/react-app/src/components/Footer.tsx b/react-app/src/components/Footer.tsx
new file mode 100644
index 00000000..e393d5b3
--- /dev/null
+++ b/react-app/src/components/Footer.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/react-app/src/components/Header.tsx b/react-app/src/components/Header.tsx
new file mode 100644
index 00000000..ca996c60
--- /dev/null
+++ b/react-app/src/components/Header.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useSettings } from '../context/SettingsContext';
+import Settings from './Settings';
+
+const Header: React.FC = () => {
+ const { settings, toggleSettings } = useSettings();
+
+ const scrollTop = () => {
+ window.scrollTo(0, 0);
+ };
+
+ return (
+
+ {feedType === 'jobs' && (
+
+ )}
+ + These are jobs at startups that were funded by Y Combinator. You can + also get a job at a YC startup through{' '} + Triplebyte. +
+ )} +-
+ {items.map((item) => (
+
-
+
- +
+ ))}
+
+ {listStart !== 1 && (
+
+ ‹ Prev
+
+ )}
+ {items.length === 30 && (
+
+ More ›
+
+ )}
+
+
+
+
+ 
+
+
+ {settings.showSettings &&
+
+
+
+
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ new
+
+ {' | '}
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ show
+
+ {' | '}
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ ask
+
+ {' | '}
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ jobs
+
+
+
+
+ 
+
+
+
+ {hasUrl ? (
+
+ );
+};
+
+export default Item;
diff --git a/react-app/src/components/Loader.tsx b/react-app/src/components/Loader.tsx
new file mode 100644
index 00000000..04187062
--- /dev/null
+++ b/react-app/src/components/Loader.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Loader: React.FC = () => {
+ return (
+ + + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( ++ + {item.title} + +
+ )} + +
+ {item.type !== 'job' && (
+
+
+
+
+ {item.user}
+
+ {item.points} ★
+
+ )}
+
+ {item.time_ago}
+ {item.type !== 'job' && (
+
+ {' '}• {formatCommentCount(item.comments_count)}
+
+ )}
+
+
+ {item.type !== 'job' && (
+
+ {item.points} points by{' '}
+ {item.user}
+
+ )}
+
+ {item.time_ago}
+ {item.type !== 'job' && (
+
+ {' | '}
+
+ {formatCommentCount(item.comments_count)}
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default Loader;
diff --git a/react-app/src/components/Settings.tsx b/react-app/src/components/Settings.tsx
new file mode 100644
index 00000000..e1497033
--- /dev/null
+++ b/react-app/src/components/Settings.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { useSettings } from '../context/SettingsContext';
+
+const Settings: React.FC = () => {
+ const { settings, toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing } = useSettings();
+
+ const handleFontChange = (e: React.ChangeEventLoading...
+
+
+ );
+};
+
+export default Settings;
diff --git a/react-app/src/components/index.ts b/react-app/src/components/index.ts
new file mode 100644
index 00000000..7cd4bfa8
--- /dev/null
+++ b/react-app/src/components/index.ts
@@ -0,0 +1,7 @@
+export { default as Header } from './Header';
+export { default as Footer } from './Footer';
+export { default as Settings } from './Settings';
+export { default as Feed } from './Feed';
+export { default as Item } from './Item';
+export { default as Loader } from './Loader';
+export { default as ErrorMessage } from './ErrorMessage';
diff --git a/react-app/src/context/SettingsContext.tsx b/react-app/src/context/SettingsContext.tsx
new file mode 100644
index 00000000..05e166f5
--- /dev/null
+++ b/react-app/src/context/SettingsContext.tsx
@@ -0,0 +1,117 @@
+import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import { Settings } from '../models';
+
+interface SettingsContextType {
+ settings: Settings;
+ toggleSettings: () => void;
+ toggleOpenLinksInNewTab: () => void;
+ setTheme: (theme: string) => void;
+ setFont: (fontSize: string) => void;
+ setSpacing: (listSpace: string) => void;
+}
+
+const SettingsContext = createContext
+
+ + × + +
+ Settings
++ + × + +
+
+
+
+ Links
+ +
+
+
+
+ Select a theme
+
+
+
+
+
+
+
+
+
+
+
+ Change Font
+
+
+
+
+
+
+