init: add code

app/components/navbar.tsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router";
+
+export default function Navbar() {
+  return (
+    <div className="flex w-full justify-between">
+      <div className="flex-col w-fit ml-6 mb-8">
+        <div className="flex items-baseline py-2 pb-0 mb-1 px-5 my-1 mx-3 pl-0 ml-1 transition delay-150 duration-200">
+          <h1 className="text-3xl pr-5">anum</h1>
+          <a className="pr-2 text-[#74c7ec] hover:text-[#89dceb] hover:text-shadow-lg/10 hover:text-shadow-[#89dceb] transition duration-100" href="/">feed</a>
+          <a className="pr-2 text-[#74c7ec] hover:text-[#89dceb] hover:text-shadow-lg/10 hover:text-shadow-[#89dceb] transition duration-100" href="/create">create</a>
+        </div>
+        <hr />
+      </div>
+      <Link to="/login" className="h-fit px-4 py-2 m-4 bg-[#eeeeee] text-black font-black rounded-2xl hover:scale-125 transition-all duration-400 ease-in-out shadow-2xl">Login</Link>
+    </div>
+  )
+}

app/components/post.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import StaticPost from "./staticPost";
+
+export interface PostContent {
+  id: number,
+  title: string,
+  content: string,
+  userId: number,
+  parentId: number,
+  createdAt: string,
+  author: {
+    name: string,
+    display_name: string,
+    id: number
+  },
+  replies: any[];
+  _count: {
+    replies: number;
+  };
+}
+
+export interface PostProps {
+  postId: number;
+}
+
+
+export default function Post({ postId }: PostProps) {
+  const [postContent, setPostContent] = useState<PostContent>();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      const response = await fetch(`http://localhost:8787/posts/${postId}/view`);
+      const jsonContent: Array<PostContent> = await response.json();
+
+      let newPostContent: PostContent = jsonContent[0] as PostContent;
+
+      if (newPostContent) {
+        setPostContent(newPostContent);
+        setIsLoading(false);
+      }
+    };
+    fetchPost();
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!postContent) {
+    return <p>Failed to load!</p>;
+  }
+
+
+  return (
+    <StaticPost postContent={postContent} />
+  )
+}

app/components/staticPost.tsx

@@ -0,0 +1,44 @@
+import type { PostContent } from "./post";
+import { Link } from "react-router";
+
+export interface StaticPostProps {
+  postContent: PostContent
+}
+
+// This is a version of Post without logic that just takes the content directly.
+// Doing this cuts down on loading time since we don't have to manually view every reply.
+export default function StaticPost({ postContent }: StaticPostProps) {
+  let name = "";
+  if (postContent.author?.display_name) {
+    name = postContent.author?.display_name
+  } else {
+    name = postContent.author?.name
+  }
+  console.debug(postContent.author?.name);
+
+  return (
+    <div className="flex-col w-fit">
+      <div className="bg-[#151515] rounded-2xl ring-1 ring-[#333] hover:ring-[#ddd] shadow-black/10 shadow-md transition duration-300 ease-in-out hover:-translate-y-1 hover:scale-102 hover:ring-1 p-4 m-5 w-fit">
+        <div className="flex items-baseline pb-2">
+          <p className="text-[10px] pr-2">#{postContent.id}</p>
+          <p className="text-xl font-bold pr-2">{postContent.title}</p>
+          <p className="pr-2">{name}</p>
+          <p className="text-[10px] pr-2">Created at: {postContent.createdAt}</p>
+          <p className="text-[10px] pr-2">Parent: #{postContent.parentId}</p>
+        </div>
+        <p className="text-md">{postContent.content}</p>
+        <div className="mb-2 my-4 flex gap-4">
+          <Link to="/create" state={{ parentId: postContent.id }} className="p-2 px-3 bg-[#151515] text-white rounded-lg font-medium shadow-lg hover:bg-[#f0f0f0] hover:text-[#151515] hover:ring-[#f0f0f0] ring-1 ring-[#7f7f7f] transition ease-in-out duration-250">Reply</Link>
+          <Link to="/view" state={{ parentId: postContent.id }} className="p-2 px-3 bg-[#151515] text-white rounded-lg font-medium shadow-lg hover:bg-[#f0f0f0] hover:text-[#151515] hover:ring-[#f0f0f0] ring-1 ring-[#7f7f7f] transition ease-in-out duration-250">View</Link>
+        </div>
+      </div>
+      <div className="ml-8">
+        {postContent.replies && postContent.replies.length > 0 && (
+          postContent.replies.map((reply) => (
+            <StaticPost postContent={reply} />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}