Hackathons/Bitcamp-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar Update

Browse Source
This commit is contained in:
GamerBoss101
2025-04-13 03:44:38 -04:00
parent beeac6b64a
commit 65248372d7
3 changed files with 133 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/app/(app)/posts/page.tsx
View File

@@ -1,156 +1,150 @@
"use client"; "use client";
import { useDevice } from "@/lib/context/DeviceContext";
// HELP NOT WORKING -> import { useDevice } from "@/lib/context/DeviceContext"; USERNAME!!
const useDevice = () => ({
isAuthenticated: true,
session: { username: "demo_user" },
});
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
export default function PostsPage() { export default function PostsPage() {
const [postText, setPostText] = useState(""); const [postText, setPostText] = useState("");
const [posts, setPosts] = useState<any[]>([]); const [posts, setPosts] = useState<any[]>([]);
const [userReactions, setUserReactions] = useState<{ const [userReactions, setUserReactions] = useState<{
[index: number]: { liked: boolean; warned: boolean }; [index: number]: { liked: boolean; warned: boolean };
}>({}); }>({});
const { isAuthenticated, session } = useDevice(); const { isAuthenticated, session } = useDevice();
useEffect(() => { useEffect(() => {
if (isAuthenticated && session?.username) { if (isAuthenticated && session?.username) {
fetch(`/api/user/${session.username}`).then((res) => res.json()); fetch(`/api/user/${session.username}`).then((res) => res.json());
} }
}, [isAuthenticated, session?.username]); }, [isAuthenticated, session?.username]);
const handlePostSubmit = (e: React.FormEvent) => { const handlePostSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
const newPost = { const newPost = {
text: postText, text: postText,
date: new Date().toLocaleString(), date: new Date().toLocaleString(),
likes: 0, likes: 0,
warnings: 0, warnings: 0,
imageUrl: "", // placeholder for image logick imageUrl: "", // placeholder for image logick
author: session.username, // add username to track authorship author: session.username, // add username to track authorship
}; };
setPosts([newPost, ...posts]); setPosts([newPost, ...posts]);
setPostText(""); setPostText("");
}; };
const handleLike = (index: number) => { const handleLike = (index: number) => {
const updatedPosts = [...posts]; const updatedPosts = [...posts];
const reactions = { ...userReactions }; const reactions = { ...userReactions };
const alreadyLiked = reactions[index]?.liked; const alreadyLiked = reactions[index]?.liked;
updatedPosts[index].likes += alreadyLiked ? -1 : 1; updatedPosts[index].likes += alreadyLiked ? -1 : 1;
reactions[index] = { reactions[index] = {
...reactions[index], ...reactions[index],
liked: !alreadyLiked, liked: !alreadyLiked,
}; };
setPosts(updatedPosts); setPosts(updatedPosts);
setUserReactions(reactions); setUserReactions(reactions);
}; };
const handleWarning = (index: number) => { const handleWarning = (index: number) => {
const updatedPosts = [...posts]; const updatedPosts = [...posts];
const reactions = { ...userReactions }; const reactions = { ...userReactions };
const alreadyWarned = reactions[index]?.warned; const alreadyWarned = reactions[index]?.warned;
updatedPosts[index].warnings += alreadyWarned ? -1 : 1; updatedPosts[index].warnings += alreadyWarned ? -1 : 1;
reactions[index] = { reactions[index] = {
...reactions[index], ...reactions[index],
warned: !alreadyWarned, warned: !alreadyWarned,
}; };
setPosts(updatedPosts); setPosts(updatedPosts);
setUserReactions(reactions); setUserReactions(reactions);
}; };
return ( return (
<div className="px-6 py-10 max-w-full lg:max-w-2xl mx-auto font-sans text-neutral-100"> <div className="px-6 py-10 max-w-full lg:max-w-2xl mx-auto font-sans text-neutral-100">
<div className="bg-[color:var(--color-surface-700)]/70 backdrop-blur-md rounded-xl px-6 py-5 mb-8 shadow-sm"> <div className="bg-[color:var(--color-surface-700)]/70 backdrop-blur-md rounded-xl px-6 py-5 mb-8 shadow-sm">
<h1 className="text-3xl sm:text-4xl font-bold mb-0 text-[color:var(--color-warning-300)]"> <h1 className="text-3xl sm:text-4xl font-bold mb-0 text-[color:var(--color-warning-300)]">
Posts Posts
</h1> </h1>
</div> </div>
<div className="bg-[color:var(--color-surface-600)]/70 backdrop-blur-md rounded-xl px-6 py-5 mb-8 shadow-sm"> <div className="bg-[color:var(--color-surface-600)]/70 backdrop-blur-md rounded-xl px-6 py-5 mb-8 shadow-sm">
<form onSubmit={handlePostSubmit} className="space-y-3"> <form onSubmit={handlePostSubmit} className="space-y-3">
<textarea <textarea
className="w-full p-3 rounded bg-neutral-800 text-white" className="w-full p-3 rounded bg-neutral-800 text-white"
placeholder="Share your beverage..." placeholder="Share your beverage..."
value={postText} value={postText}
onChange={(e) => setPostText(e.target.value)} onChange={(e) => setPostText(e.target.value)}
rows={4} rows={4}
/> />
<button <button
type="submit" type="submit"
className="px-4 py-2 bg-success-600 text-white rounded font-semibold" className="px-4 py-2 bg-success-600 text-white rounded font-semibold"
> >
Post Post
</button> </button>
</form> </form>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
{posts.map((post, index) => ( {posts.map((post, index) => (
<div <div
key={index} key={index}
className="bg-[color:var(--color-surface-600)]/80 rounded-xl px-6 py-5 shadow-md" className="bg-[color:var(--color-surface-600)]/80 rounded-xl px-6 py-5 shadow-md"
> >
<div className="flex items-center gap-4 mb-2"> <div className="flex items-center gap-4 mb-2">
<div className="w-10 h-10 rounded-full bg-neutral-800 border border-gray-300" /> <div className="w-10 h-10 rounded-full bg-neutral-800 border border-gray-300" />
<div> <div>
<p className="font-semibold text-[color:var(--color-warning-300)]"> <p className="font-semibold text-[color:var(--color-warning-300)]">
{post.author || "Anonymous"} {post.author || "Anonymous"}
</p> </p>
<p className="text-sm text-gray-400">{post.date}</p> <p className="text-sm text-gray-400">{post.date}</p>
</div> </div>
</div> </div>
{post.imageUrl && ( {post.imageUrl && (
<img <img
src={post.imageUrl} src={post.imageUrl}
alt="Post related" alt="Post related"
className="w-full max-h-64 object-cover rounded mb-4" className="w-full max-h-64 object-cover rounded mb-4"
/> />
)} )}
<p className="text-base text-neutral-100 mb-4">{post.text}</p> <p className="text-base text-neutral-100 mb-4">{post.text}</p>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<button <button
onClick={() => handleLike(index)} onClick={() => handleLike(index)}
className={`px-3 py-1 rounded text-sm ${ className={`px-3 py-1 rounded text-sm ${
userReactions[index]?.liked userReactions[index]?.liked
? "bg-success-800" ? "bg-success-800"
: "bg-success-600 hover:bg-primary-600" : "bg-success-600 hover:bg-primary-600"
} text-white`} } text-white`}
> >
👍 Like ({post.likes}) 👍 Like ({post.likes})
</button> </button>
<button <button
onClick={() => handleWarning(index)} onClick={() => handleWarning(index)}
className={`px-3 py-1 rounded text-sm ${ className={`px-3 py-1 rounded text-sm ${
userReactions[index]?.warned userReactions[index]?.warned
? "bg-red-800" ? "bg-red-800"
: "bg-primary-500 hover:bg-red-600" : "bg-primary-500 hover:bg-red-600"
} text-white`} } text-white`}
> >
😭 Stop drinking that ({post.warnings}) 😭 Stop drinking that ({post.warnings})
</button> </button>
</div> </div>
</div> </div>
))} ))}
</div> </div>
<div className="h-10" /> <div className="h-10" />
</div> </div>
); );
} }

3
src/app/(app)/profile/page.tsx
View File

@@ -98,9 +98,6 @@ function Mobile() {
Don't forget you have a 400mg caffeine limit and 30.5g sugar limit! Don't forget you have a 400mg caffeine limit and 30.5g sugar limit!
</p> </p>
</div> </div>
<div className="h-6" />
<div className="h-6" />
</div> </div>
); );
} }

12
src/lib/components/MobileNav.jsx
View File

@@ -6,6 +6,7 @@ import {
Home as IconHome, Home as IconHome,
BookText as BookImage, BookText as BookImage,
User as UserImage, User as UserImage,
Plus as PlusImage,
} from "lucide-react"; } from "lucide-react";
import { useDevice } from "@/lib/context/DeviceContext"; import { useDevice } from "@/lib/context/DeviceContext";
@@ -23,9 +24,14 @@ const MobileNav = () => {
<BookImage /> <BookImage />
</Navigation.Tile> </Navigation.Tile>
{isAuthenticated ? ( {isAuthenticated ? (
<Navigation.Tile label="Profile" href="/profile" className="flex flex-col items-center"> <div>
<UserImage /> <Navigation.Tile label="Profile" href="/posts" className="flex flex-col items-center">
</Navigation.Tile> <PlusImage />
</Navigation.Tile>
<Navigation.Tile label="Profile" href="/profile" className="flex flex-col items-center">
<UserImage />
</Navigation.Tile>
</div>
) : null} ) : null}
</Navigation.Bar> </Navigation.Bar>
</div> </div>