+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {feedType === 'jobs' && (
+
+ );
+}
diff --git a/react-app/src/components/FeedItem/FeedItem.scss b/react-app/src/components/FeedItem/FeedItem.scss
new file mode 100644
index 000000000..d34b2c485
--- /dev/null
+++ b/react-app/src/components/FeedItem/FeedItem.scss
@@ -0,0 +1,68 @@
+@import "../../styles/media";
+@import "../../styles/theme_variables";
+
+p {
+ margin: 2px 0;
+
+ @media #{$mobile-only} {
+ margin-bottom: 5px;
+ margin-top: 0;
+ }
+ }
+
+ a {
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ .title {
+ font-size: 16px;
+ font-family: Verdana, Geneva, sans-serif;
+ }
+
+ .subtext-laptop {
+ font-size: 12px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+
+ a {
+ &:hover {
+ text-decoration: underline;
+ };
+ }
+ @media #{$mobile-only} {
+ display: none;
+ }
+ }
+
+ .subtext-palm {
+ font-size: 13px;
+ font-weight: bold;
+ letter-spacing: 0.5px;
+
+ a {
+ &:hover {
+ text-decoration: underline;
+ };
+ }
+
+ .details {
+ margin-top: 5px;
+
+ .right {
+ float: right;
+ }
+ }
+ @media #{$laptop-only} {
+ display: none;
+ }
+ }
+
+ .domain {
+ color: #696969;
+ letter-spacing: 0.5px;
+ }
+
+ .item-details {
+ padding: 10px;
+ }
diff --git a/react-app/src/components/FeedItem/FeedItem.tsx b/react-app/src/components/FeedItem/FeedItem.tsx
new file mode 100644
index 000000000..005a629f7
--- /dev/null
+++ b/react-app/src/components/FeedItem/FeedItem.tsx
@@ -0,0 +1,68 @@
+import { Link } from 'react-router-dom';
+import type { Story } from '../../models/story';
+import { useSettings } from '../../contexts/SettingsContext';
+import { formatCommentCount } from '../../utils/comment-pipe';
+import './FeedItem.scss';
+
+interface FeedItemProps {
+ item: Story;
+}
+
+export function FeedItem({ item }: FeedItemProps) {
+ const { settings } = useSettings();
+ const hasUrl = item.url?.startsWith('http');
+
+ const titleStyle = {
+ fontSize: `${settings.titleFontSize}px`,
+ };
+
+ const target = settings.openLinkInNewTab ? '_blank' : undefined;
+ const rel = settings.openLinkInNewTab ? 'noopener noreferrer' : undefined;
+
+ return (
+ + 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 ›
+
+ )}
+
+
+ {hasUrl ? (
+
+ );
+}
diff --git a/react-app/src/components/Footer/Footer.scss b/react-app/src/components/Footer/Footer.scss
new file mode 100644
index 000000000..e6ea4e1e6
--- /dev/null
+++ b/react-app/src/components/Footer/Footer.scss
@@ -0,0 +1,23 @@
+@import "../../styles/media";
+@import "../../styles/theme_variables";
+
+#footer {
+ position: relative;
+ padding: 10px;
+ height: 60px;
+ letter-spacing: 0.7px;
+ text-align: center;
+
+ a {
+ font-weight: bold;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ @media #{$mobile-only} {
+ display: none;
+ }
+}
diff --git a/react-app/src/components/Footer/Footer.tsx b/react-app/src/components/Footer/Footer.tsx
new file mode 100644
index 000000000..d1e295ea7
--- /dev/null
+++ b/react-app/src/components/Footer/Footer.tsx
@@ -0,0 +1,9 @@
+import './Footer.scss';
+
+export function Footer() {
+ return (
+
+ );
+}
diff --git a/react-app/src/components/Header/Header.scss b/react-app/src/components/Header/Header.scss
new file mode 100644
index 000000000..3d8553a52
--- /dev/null
+++ b/react-app/src/components/Header/Header.scss
@@ -0,0 +1,149 @@
+@import "../../styles/media";
+@import "../../styles/theme_variables";
+
+#header {
+ color: #fff;
+ padding: 6px 0;
+ line-height: 18px;
+ vertical-align: middle;
+ position: relative;
+ z-index: 1;
+ width: 100%;
+
+ @media #{$mobile-only} {
+ height: 50px;
+ position: fixed;
+ top: 0;
+ }
+
+ a {
+ display: inline;
+ }
+}
+
+.home-link {
+ width: 50px;
+ height: 66px;
+}
+
+.logo-inner {
+ width: 32px;
+ position: absolute;
+ left: 17px;
+ top: 18px;
+ z-index: -1;
+ height: 32px;
+ border-radius: 50%;
+
+ @media #{$mobile-only} {
+ left: 16px;
+ top: 12px;
+ }
+}
+
+.logo {
+ width: 50px;
+ padding: 3px 8px 0;
+
+ @media #{$mobile-only} {
+ width: 45px;
+ padding: 0 0 0 10px;
+ }
+}
+
+h1 {
+ font-weight: normal;
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0;
+ font-size: 16px;
+
+ a {
+ color: #fff;
+ text-decoration: none;
+ }
+}
+
+.name {
+ margin-right: 30px;
+ margin-bottom: 2px;
+
+ @media #{$mobile-only} {
+ display: none;
+ }
+}
+
+.header-text {
+ position: absolute;
+ width: inherit;
+ height: 20px;
+ left: 10px;
+ top: 27px;
+ z-index: -1;
+
+ @media #{$mobile-only} {
+ top: 22px;
+ }
+}
+
+.left {
+ position: absolute;
+ left: 60px;
+ font-size: 16px;
+
+ @media #{$mobile-only} {
+ width: 100%;
+ left: 0;
+ }
+}
+
+.header-nav {
+ display: inline-block;
+ margin-left: 20px;
+
+ @media #{$mobile-only} {
+ margin-left: 60px;
+ }
+
+ a {
+ color: hsla(0, 0%, 100%, .9);
+ text-decoration: none;
+ margin: 0 5px;
+ letter-spacing: 1.8px;
+
+ &:hover {
+ color: #fff;
+ }
+ }
+
+ .active {
+ color: #fff;
+ }
+}
+
+.info {
+ position: absolute;
+ top: 0;
+ right: 20px;
+ height: 100%;
+
+ @media #{$mobile-only} {
+ right: 10px;
+ }
+
+ img {
+ opacity: 0.8;
+ width: 25px;
+ margin-top: 21.5px;
+ display: block;
+
+ &:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+
+ @media #{$mobile-only} {
+ margin-top: 15px;
+ }
+ }
+}
diff --git a/react-app/src/components/Header/Header.tsx b/react-app/src/components/Header/Header.tsx
new file mode 100644
index 000000000..7fe1cb72b
--- /dev/null
+++ b/react-app/src/components/Header/Header.tsx
@@ -0,0 +1,53 @@
+import { NavLink } from 'react-router-dom';
+import { useSettings } from '../../contexts/SettingsContext';
+import { Settings } from '../Settings/Settings';
+import './Header.scss';
+
+export function Header() {
+ const { settings, toggleSettings } = useSettings();
+
+ const scrollTop = () => {
+ window.scrollTo(0, 0);
+ };
+
+ 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)}
+ )}
+
+
+
+
+
+ 
+
+
+ {settings.showSettings &&
+
+
+
+
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ new
+
+ {' | '}
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ show
+
+ {' | '}
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ ask
+
+ {' | '}
+ isActive ? 'active' : ''} onClick={scrollTop}>
+ jobs
+
+
+
+
+ 
+
+
+
+
+ );
+ }
+
+ if (error || !item) {
+ return (
+
+
+ );
+ }
+
+ const target = settings.openLinkInNewTab ? '_blank' : undefined;
+ const rel = settings.openLinkInNewTab ? 'noopener noreferrer' : undefined;
+
+ return (
+
+
+ );
+}
diff --git a/react-app/src/components/Loader/Loader.scss b/react-app/src/components/Loader/Loader.scss
new file mode 100644
index 000000000..81d75d4eb
--- /dev/null
+++ b/react-app/src/components/Loader/Loader.scss
@@ -0,0 +1,109 @@
+@import "../../styles/media";
+@import "../../styles/theme_variables";
+
+.loader {
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+ &:before, &:after {
+ -webkit-animation: load1 1s infinite ease-in-out;
+ animation: load1 1s infinite ease-in-out;
+ width: 1em;
+ height: 4em;
+ }
+ &:before, &:after {
+ position: absolute;
+ top: 0;
+ content: '';
+ }
+ &:before {
+ left: -1.5em;
+ -webkit-animation-delay: -0.32s;
+ animation-delay: -0.32s;
+ }
+}
+
+.loading-section {
+ height: 70px;
+ margin: 40px 0 40px 40px;
+
+ @media #{$mobile-only} {
+ display: block;
+ position: relative;
+ margin: 45vh 0;
+ }
+}
+
+.loader {
+ text-indent: -9999em;
+ margin: 20px 20px;
+ position: relative;
+ font-size: 11px;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation-delay: -0.16s;
+ animation-delay: -0.16s;
+ &:after {
+ left: 1.5em;
+ }
+
+ @media #{$mobile-only} {
+ margin: 20px auto;
+ }
+}
+
+@-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 3em;
+ }
+}
+
+@keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 2em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 3em;
+ }
+}
+
+@media #{$mobile-only} {
+ @-webkit-keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 4em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 5em;
+ }
+ }
+
+ @keyframes load1 {
+ 0%,
+ 80%,
+ 100% {
+ box-shadow: 0 0;
+ height: 3em;
+ }
+ 40% {
+ box-shadow: 0 -2em;
+ height: 4em;
+ }
+ }
+}
diff --git a/react-app/src/components/Loader/Loader.tsx b/react-app/src/components/Loader/Loader.tsx
new file mode 100644
index 000000000..5b60d4849
--- /dev/null
+++ b/react-app/src/components/Loader/Loader.tsx
@@ -0,0 +1,11 @@
+import './Loader.scss';
+
+export function Loader() {
+ return (
+
+ navigate(-1)}>
+
+ {item.title}
+
+
+
+
+ {item.type === 'poll' && item.poll && (
+
+
+ + {hasUrl ? ( + + {item.title} + + ) : ( + {item.title} + )} + {item.domain && ({item.domain})} +
+
+ {item.points} points by{' '}
+ {item.user} {item.time_ago}
+
+
+ {item.poll.map((pollItem, index) => (
+
+ )}
+ {item.content && (
+
+ )}
+ {item.comments && item.comments.length > 0 && (
+
+
+
+ ))}
+ 0 ? (pollItem.points / item.poll_votes_count) * 100 : 0}%`,
+ }}
+ >
+ {pollItem.points} points
+-
+ {item.comments.map((comment) => (
+
-
+
+
+ ))}
+
+
+ );
+}
diff --git a/react-app/src/components/Settings/Settings.scss b/react-app/src/components/Settings/Settings.scss
new file mode 100644
index 000000000..06d582684
--- /dev/null
+++ b/react-app/src/components/Settings/Settings.scss
@@ -0,0 +1,74 @@
+@import "../../styles/media";
+@import "../../styles/theme_variables";
+
+.overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+ opacity: 1;
+ z-index: 1;
+}
+
+.popup {
+ margin: 70px auto;
+ padding: 30px;
+ border-radius: 5px;
+ width: 30%;
+ position: relative;
+ h1 {
+ margin-top: 0;
+ margin-bottom: 0px;
+ color: #fff;
+ text-align: center;
+ letter-spacing: 1px;
+ }
+ h2 {
+ padding-top: 10px;
+ }
+ hr {
+ width: 40%;
+ margin-bottom: 20px;
+ }
+ .close {
+ position: absolute;
+ top: 12px;
+ right: 20px;
+ font-size: 30px;
+ font-weight: bold;
+ text-decoration: none;
+ color: rgba(255,255,255,0.8);
+ &:hover {
+ color: #fff;
+ cursor: pointer;
+ }
+ }
+ .content {
+ max-height: 30%;
+ color: #fff;
+ letter-spacing: 1px;
+ overflow: auto;
+ }
+ input[type=number] {
+ display: block;
+ width: 80%;
+ height: 20px;
+ margin-bottom: 15px;
+ border-radius: 5px;
+ padding: 2px;
+ }
+}
+
+.control-section {
+ margin-bottom: 15px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid white;
+}
+
+@media screen and (max-width: 700px) {
+ .box, .popup {
+ width: 70%;
+ }
+}
diff --git a/react-app/src/components/Settings/Settings.tsx b/react-app/src/components/Settings/Settings.tsx
new file mode 100644
index 000000000..932138dea
--- /dev/null
+++ b/react-app/src/components/Settings/Settings.tsx
@@ -0,0 +1,93 @@
+import { useSettings } from '../../contexts/SettingsContext';
+import './Settings.scss';
+
+export function Settings() {
+ const { settings, toggleSettings, toggleOpenLinksInNewTab, setTheme, setFont, setSpacing } = useSettings();
+
+ return (
+
+ Loading...
+
+
+
+ );
+}
diff --git a/react-app/src/components/UserProfile/UserProfile.scss b/react-app/src/components/UserProfile/UserProfile.scss
new file mode 100644
index 000000000..7e2bf46f3
--- /dev/null
+++ b/react-app/src/components/UserProfile/UserProfile.scss
@@ -0,0 +1,99 @@
+@import "../../styles/media";
+@import "../../styles/theme_variables";
+
+pre {
+ white-space: pre-wrap;
+}
+
+.profile {
+ padding: 30px;
+}
+
+@media #{$mobile-only} {
+ .profile {
+ padding: 110px 15px 0 15px;
+ }
+ .title-block {
+ font-size: 15px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ margin: 0 75px;
+ }
+ .back-button {
+ position: absolute;
+ top: 52%;
+ width: 0.6rem;
+ height: 0.6rem;
+ background: transparent;
+ box-shadow: 0 0 0 lightgray;
+ transition: all 200ms ease;
+ left: 4%;
+ transform: translate3d(0, -50%, 0) rotate(-135deg);
+ cursor: pointer;
+ }
+ .item-header {
+ padding-bottom: 10px;
+ background-color: #fff;
+ padding: 10px 0 10px 0;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ top: 62px;
+ height: 20px;
+ }
+}
+
+@media #{$laptop-only} {
+ .mobile {
+ display: none;
+ }
+}
+
+.main-details {
+ .name {
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+ .age {
+ font-weight: bold;
+ color: #696969;
+ padding-bottom: 0;
+ }
+ .right {
+ float: right;
+ font-weight: bold;
+ font-size: 32px;
+ letter-spacing: 2px;
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details {
+ margin-top: 20px;
+ .name {
+ font-size: 18px;
+ }
+ }
+}
+
+@media #{$mobile-only} {
+ .main-details .right {
+ font-size: 18px;
+ }
+}
+
+.other-details {
+ word-wrap: break-word;
+}
+
+.main-content {
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ box-sizing: border-box;
+ padding: 8px 0;
+ z-index: 0;
+}
diff --git a/react-app/src/components/UserProfile/UserProfile.tsx b/react-app/src/components/UserProfile/UserProfile.tsx
new file mode 100644
index 000000000..c9207e8fe
--- /dev/null
+++ b/react-app/src/components/UserProfile/UserProfile.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import type { User } from '../../models/user';
+import { fetchUser } from '../../services/hackernews-api';
+import { Loader } from '../Loader/Loader';
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
+import './UserProfile.scss';
+
+export function UserProfile() {
+ const { id } = useParams<{ id: string }>();
+ const [user, setUser] = useState e.stopPropagation()}>
+ ×
+
+
+ Settings
++
+
+
+
+ Links
+ + {' '}Open links in a new tab +
+
+
+
+ Select a theme
+
+
+
+
+
+
+
+
+
+
+
+ Change Font
+
+
+
+
+
+
+
+
+ );
+ }
+
+ if (error || !user) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/react-app/src/contexts/SettingsContext.tsx b/react-app/src/contexts/SettingsContext.tsx
new file mode 100644
index 000000000..79847ee69
--- /dev/null
+++ b/react-app/src/contexts/SettingsContext.tsx
@@ -0,0 +1,94 @@
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
+import type { Settings } from '../models/settings';
+
+interface SettingsContextType {
+ settings: Settings;
+ toggleSettings: () => void;
+ toggleOpenLinksInNewTab: () => void;
+ setTheme: (theme: string) => void;
+ setFont: (fontSize: string) => void;
+ setSpacing: (listSpace: string) => void;
+}
+
+const SettingsContext = createContext
+ navigate(-1)}>
+
+ {user.id}
+
+
+
+ {user.id}
+ {user.karma}
+
+ Joined {user.created}
+ {user.about && ( + + )} +