From a879690129cc697929db352cd151a703a28c93bb Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Thu, 16 Jan 2025 03:19:35 -0500
Subject: [PATCH] Move forum to main page
---
src/app/app/page.tsx | 29 ----
src/app/page.tsx | 51 +++++-
src/components/navbar/index.tsx | 288 ++++++++++++++++++++++++++++----
src/components/timers/index.tsx | 3 +
4 files changed, 305 insertions(+), 66 deletions(-)
delete mode 100644 src/app/app/page.tsx
diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
deleted file mode 100644
index 9959de7..0000000
--- a/src/app/app/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import Posts from "@/components/posts";
-import Timers from "@/components/timers";
-import { Image } from "@nextui-org/react";
-
-export default function Home() {
- return (
- <div>
- <div className="absolute left-0 top-0 w-full h-full z-0">
- <Image
- src="/images/bg.jpg"
- alt="Home background"
- className="object-cover w-full h-full"
- radius="none"
- loading="eager"
- removeWrapper
- />
- <div className="absolute left-0 top-0 w-full h-full bg-gradient-to-r from-black/50 to-transparent z-10" />
- </div>
- <div className="z-10 relative flex">
- <div>
- <Posts />
- </div>
- <div className="w-1/3 flex justify-end">
- <Timers />
- </div>
- </div>
- </div>
- );
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5e03a71..fc90ece 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,11 +2,13 @@ import { Image } from "@nextui-org/image";
import { Button } from "@nextui-org/button";
import { SiDiscord } from "@icons-pack/react-simple-icons";
import { Link } from "@nextui-org/react";
+import Posts from "@/components/posts";
+import Timers from "@/components/timers";
export default async function Home() {
return (
- <div>
- <div className="absolute left-0 top-0 w-full h-full z-0">
+ <div className="w-full">
+ <div className="fixed left-0 top-0 w-full h-full z-0">
<Image
src="/images/bg.jpg"
alt="Home background"
@@ -17,9 +19,9 @@ export default async function Home() {
/>
<div className="absolute left-0 top-0 w-full h-full bg-gradient-to-r from-black/50 to-transparent z-10" />
</div>
- <div className="relative left-0 top-0 z-10 px-8">
- <div className="flex gap-20">
- <div className="flex flex-col gap-4 py-16 sm:py-36 md:py-72">
+ <div className="z-10 relative flex w-full flex-wrap">
+ <div>
+ <div className="flex flex-col gap-4 py-4 sm:py-8 md:py-12 pl-16">
<h1 className="text-3xl sm:text-4xl md:text-5xl">Dare2Jam</h1>
<p className="text-lg sm:text-xl">April 4th - 7th</p>
<div className="flex gap-2">
@@ -34,8 +36,47 @@ export default async function Home() {
</Link>
</div>
</div>
+ <Posts />
+ </div>
+ <div className="w-1/3 flex justify-end py-4 sm:py-8 md:py-12 flex-grow">
+ <Timers />
</div>
</div>
</div>
);
}
+
+{
+ /* <div>
+<div className="absolute left-0 top-0 w-full h-full z-0">
+ <Image
+ src="/images/bg.jpg"
+ alt="Home background"
+ className="object-cover w-full h-full"
+ radius="none"
+ loading="eager"
+ removeWrapper
+ />
+ <div className="absolute left-0 top-0 w-full h-full bg-gradient-to-r from-black/50 to-transparent z-10" />
+</div>
+<div className="relative left-0 top-0 z-10 px-8">
+ <div className="flex gap-20">
+ <div className="flex flex-col gap-4 py-16 sm:py-36 md:py-72">
+ <h1 className="text-3xl sm:text-4xl md:text-5xl">Dare2Jam</h1>
+ <p className="text-lg sm:text-xl">April 4th - 7th</p>
+ <div className="flex gap-2">
+ <Link href="https://discord.gg/rfmKzM6ASw" target="_blank">
+ <Button
+ variant="bordered"
+ className="border-white/50 text-white"
+ startContent={<SiDiscord />}
+ >
+ Join the Discord
+ </Button>
+ </Link>
+ </div>
+ </div>
+ </div>
+</div>
+</div> */
+}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 3593e08..ee12809 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -20,7 +20,7 @@ import {
Tooltip,
} from "@nextui-org/react";
import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
-import { LogInIcon, NotebookPen, SquarePen } from "lucide-react";
+import { LogInIcon, Menu, NotebookPen, SquarePen } from "lucide-react";
import { useEffect, useState } from "react";
import { hasCookie, getCookie } from "@/helpers/cookie";
import { usePathname } from "next/navigation";
@@ -29,6 +29,7 @@ import { UserType } from "@/types/UserType";
export default function Navbar() {
const [user, setUser] = useState<UserType>();
const pathname = usePathname();
+ const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
loadUser();
@@ -55,6 +56,15 @@ export default function Navbar() {
}
}, [pathname]);
+ useEffect(() => {
+ const handleResize = () => {
+ setIsMobile(window.innerWidth <= 768); // Adjust breakpoint as needed
+ };
+ handleResize();
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
return (
<NavbarBase
shouldHideOnScroll
@@ -69,18 +79,248 @@ export default function Navbar() {
<Image src="/images/dare2jam.png" alt="Dare2Jam logo" width={80} />
</Link>
</NavbarBrand>
- <NavbarContent>
- <NavbarItem>
- <Link
- href="/app"
- className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110"
- >
- Beta Site
- </Link>
- </NavbarItem>
- </NavbarContent>
<NavbarContent justify="end">
- {user && (
+ {isMobile ? (
+ user ? (
+ <Dropdown>
+ <DropdownTrigger>
+ <Avatar src={user.profilePicture} />
+ </DropdownTrigger>
+ <DropdownMenu className="text-black">
+ <DropdownItem key="create-post" href="/create-post">
+ Create Post
+ </DropdownItem>
+ <DropdownItem
+ key="github"
+ href="https://github.com/Ategon/Jamjar"
+ >
+ GitHub
+ </DropdownItem>
+ <DropdownItem
+ key="forgejo"
+ href="https://git.edikoyo.com/Ategon/Jamjar"
+ >
+ Forgejo
+ </DropdownItem>
+ <DropdownItem
+ key="discord"
+ href="https://discord.gg/rfmKzM6ASw"
+ >
+ Discord
+ </DropdownItem>
+ <DropdownItem key="logout" color="danger" href="/logout">
+ Logout
+ </DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ ) : (
+ <Dropdown>
+ <DropdownTrigger>
+ <Menu />
+ </DropdownTrigger>
+ <DropdownMenu className="text-black">
+ <DropdownItem
+ key="github"
+ href="https://github.com/Ategon/Jamjar"
+ >
+ GitHub
+ </DropdownItem>
+ <DropdownItem
+ key="forgejo"
+ href="https://git.edikoyo.com/Ategon/Jamjar"
+ >
+ Forgejo
+ </DropdownItem>
+ <DropdownItem
+ key="discord"
+ href="https://discord.gg/rfmKzM6ASw"
+ >
+ Discord
+ </DropdownItem>
+ <DropdownItem key="login" href="/login">
+ Log In
+ </DropdownItem>
+ <DropdownItem key="signup" href="/signup">
+ Sign Up
+ </DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ )
+ ) : (
+ <div className="flex gap-3 items-center">
+ {user && (
+ <NavbarItem>
+ <Link href="/create-post">
+ <Button
+ endContent={<SquarePen />}
+ className="text-white border-white/50 hover:border-green-100/50 hover:text-green-100 hover:scale-110 transition-all transform duration-500 ease-in-out"
+ variant="bordered"
+ >
+ Create Post
+ </Button>
+ </Link>
+ <Spacer x={32} />
+ </NavbarItem>
+ )}
+ <NavbarItem>
+ <Tooltip
+ delay={1000}
+ content={
+ <div className="px-1 py-2 text-black text-center">
+ <div className="text-small font-bold">GitHub</div>
+ <div className="text-tiny">Source Code</div>
+ </div>
+ }
+ >
+ <Link
+ href="https://github.com/Ategon/Jamjar"
+ className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-red-100"
+ isExternal
+ >
+ <SiGithub title="" />
+ </Link>
+ </Tooltip>
+ </NavbarItem>
+ <NavbarItem>
+ <Tooltip
+ delay={1000}
+ content={
+ <div className="px-1 py-2 text-black text-center">
+ <div className="text-small font-bold">Forgejo</div>
+ <div className="text-tiny">Source Code</div>
+ </div>
+ }
+ >
+ <Link
+ href="https://git.edikoyo.com/Ategon/Jamjar"
+ className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-red-100"
+ isExternal
+ >
+ <SiForgejo title="" />
+ </Link>
+ </Tooltip>
+ </NavbarItem>
+ <NavbarItem>
+ <Link
+ href="https://discord.gg/rfmKzM6ASw"
+ className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-indigo-100"
+ isExternal
+ >
+ <SiDiscord />
+ </Link>
+ </NavbarItem>
+ <Divider orientation="vertical" className="h-1/2" />
+ {!user ? (
+ <div className="flex gap-3 items-center">
+ <NavbarItem>
+ <Link href="/login">
+ <Button
+ endContent={<LogInIcon />}
+ className="text-white border-white/50 hover:border-green-100/50 hover:text-green-100 hover:scale-110 transition-all transform duration-500 ease-in-out"
+ variant="bordered"
+ >
+ Log In
+ </Button>
+ </Link>
+ </NavbarItem>
+ <NavbarItem>
+ <Link href="/signup">
+ <Button
+ endContent={<NotebookPen />}
+ className="text-white border-white/50 hover:border-green-100/50 hover:text-green-100 hover:scale-110 transition-all transform duration-500 ease-in-out"
+ variant="bordered"
+ >
+ Sign up
+ </Button>
+ </Link>
+ </NavbarItem>
+ </div>
+ ) : (
+ <Dropdown>
+ <DropdownTrigger>
+ <Avatar src={user.profilePicture} />
+ </DropdownTrigger>
+ <DropdownMenu>
+ {/* <DropdownItem
+ key="profile"
+ className="text-black"
+ href="/profile"
+ >
+ Profile
+ </DropdownItem>
+ <DropdownItem
+ showDivider
+ key="settings"
+ className="text-black"
+ href="/settings"
+ >
+ Settings
+ </DropdownItem> */}
+ <DropdownItem
+ key="logout"
+ color="danger"
+ className="text-danger"
+ href="/logout"
+ >
+ Logout
+ </DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ )}
+ </div>
+ )}
+ </NavbarContent>
+ </NavbarBase>
+ );
+}
+/*
+
+{isMobile ? (
+ // Mobile view
+ user ? (
+ <Dropdown>
+ <DropdownTrigger>
+ <Avatar src={user.profilePicture} />
+ </DropdownTrigger>
+ <DropdownMenu>
+ <DropdownItem key="create-post" href="/create-post">
+ Create Post
+ </DropdownItem>
+ <DropdownItem key="logout" color="danger" href="/logout">
+ Logout
+ </DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ ) : (
+ <Dropdown>
+ <DropdownTrigger>
+ <Button auto flat className="text-white">
+ ☰
+ </Button>
+ </DropdownTrigger>
+ <DropdownMenu>
+ <DropdownItem key="github" href="https://github.com/Ategon/Jamjar" isExternal>
+ GitHub
+ </DropdownItem>
+ <DropdownItem key="forgejo" href="https://git.edikoyo.com/Ategon/Jamjar" isExternal>
+ Forgejo
+ </DropdownItem>
+ <DropdownItem key="discord" href="https://discord.gg/rfmKzM6ASw" isExternal>
+ Discord
+ </DropdownItem>
+ <DropdownItem key="login" href="/login">
+ Log In
+ </DropdownItem>
+ <DropdownItem key="signup" href="/signup">
+ Sign Up
+ </DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ )
+ ) : (
+
+
+ user && (
<NavbarItem>
<Link href="/create-post">
<Button
@@ -93,7 +333,7 @@ export default function Navbar() {
</Link>
<Spacer x={32} />
</NavbarItem>
- )}
+ )
<NavbarItem>
<Tooltip
delay={1000}
@@ -173,21 +413,7 @@ export default function Navbar() {
<Avatar src={user.profilePicture} />
</DropdownTrigger>
<DropdownMenu>
- {/* <DropdownItem
- key="profile"
- className="text-black"
- href="/profile"
- >
- Profile
- </DropdownItem>
- <DropdownItem
- showDivider
- key="settings"
- className="text-black"
- href="/settings"
- >
- Settings
- </DropdownItem> */}
+
<DropdownItem
key="logout"
color="danger"
@@ -199,7 +425,5 @@ export default function Navbar() {
</DropdownMenu>
</Dropdown>
)}
- </NavbarContent>
- </NavbarBase>
- );
-}
+ )
+ </NavbarContent> */
diff --git a/src/components/timers/index.tsx b/src/components/timers/index.tsx
index 3f846ce..300f5c3 100644
--- a/src/components/timers/index.tsx
+++ b/src/components/timers/index.tsx
@@ -1,3 +1,4 @@
+import { Spacer } from "@nextui-org/react";
import Timer from "./Timer";
export default function Timers() {
@@ -7,6 +8,8 @@ export default function Timers() {
name="Jam Start"
targetDate={new Date("2025-04-04T18:00:00-05:00")}
/>
+ <Spacer y={8} />
+ <p>Site under construction</p>
</div>
);
}