Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add beta site

Browse source
This commit is contained in:
Ategon 2025-01-15 11:35:37 -05:00
parent 10b92acfea
commit 7f5c15ab2f
11 changed files with 173 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/aelios.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 130 KiB

BIN
public/images/edikoyo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

29
src/app/app/page.tsx Normal file
View file

@ -0,0 +1,29 @@
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>
);
}

45
src/app/layout.tsx
View file

@ -1,8 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { NextUIProvider } from "@nextui-org/react";
import Navbar from "../components/navbar"; import Navbar from "../components/navbar";
import Providers from "./providers";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -19,54 +19,15 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<NextUIProvider> <Providers>
<div className="dark"> <div className="dark">
<div className="bg-zinc-100 dark:bg-zinc-950 min-h-screen"> <div className="bg-zinc-100 dark:bg-zinc-950 min-h-screen">
<Navbar /> <Navbar />
<div className="max-w-8xl mx-auto">{children}</div> <div className="max-w-8xl mx-auto">{children}</div>
</div> </div>
</div> </div>
</NextUIProvider> </Providers>
</body> </body>
</html> </html>
); );
} }
// import type { Metadata } from "next";
// import localFont from "next/font/local";
// import "./globals.css";
// import Providers from "./providers";
// const geistSans = localFont({
// src: "./fonts/GeistVF.woff",
// variable: "--font-geist-sans",
// weight: "100 900",
// });
// const geistMono = localFont({
// src: "./fonts/GeistMonoVF.woff",
// variable: "--font-geist-mono",
// weight: "100 900",
// });
// export const metadata: Metadata = {
// title: "Create Next App",
// description: "Generated by create next app",
// };
// export default function RootLayout({
// children,
// }: Readonly<{
// children: React.ReactNode;
// }>) {
// return (
// <html lang="en">
// <body
// className={`${geistSans.variable} ${geistMono.variable} antialiased`}
// >
// <Providers>
// {children}
// </Providers>
// </body>
// </html>
// );
// }

15
src/app/page.tsx
View file

@ -42,18 +42,3 @@ export default async function Home() {
</div> </div>
); );
} }
// export default function Home() {
// return (
// <div className="">
// <div>
// <Posts />
// </div>
// <div>
// <Timers />
// <Streams />
// <Announcements />
// </div>
// </div>
// );
// }

25
src/components/navbar/index.tsx
View file

@ -1,11 +1,12 @@
import { import {
Navbar as NavbarBase, Navbar as NavbarBase,
NavbarBrand,
NavbarContent, NavbarContent,
NavbarItem, NavbarItem,
} from "@nextui-org/navbar"; } from "@nextui-org/navbar";
import { Link } from "@nextui-org/link"; import { Link } from "@nextui-org/link";
import { Divider } from "@nextui-org/divider"; import { Divider } from "@nextui-org/divider";
import { Tooltip } from "@nextui-org/react"; import { Image, Tooltip } from "@nextui-org/react";
import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons"; import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
export default function Navbar() { export default function Navbar() {
@ -15,31 +16,23 @@ export default function Navbar() {
maxWidth="2xl" maxWidth="2xl"
className="bg-transparent p-1" className="bg-transparent p-1"
> >
{/* <NavbarBrand> <NavbarBrand>
<Link <Link
href="/" href="/"
className="duration-500 ease-in-out transition-all transform hover:scale-110" className="duration-500 ease-in-out transition-all transform hover:scale-110"
> >
<Image src="/images/aelios.png" width={160} /> <Image src="/images/edikoyo.png" width={160} />
</Link> </Link>
</NavbarBrand> */} </NavbarBrand>
<NavbarContent> <NavbarContent>
{/* <NavbarItem>
<Link
href="/about"
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110 hover:text-blue-700"
>
About
</Link>
</NavbarItem>
<NavbarItem> <NavbarItem>
<Link <Link
href="/setup" href="/app"
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110 hover:text-blue-700" className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110"
> >
Setup Beta Site
</Link> </Link>
</NavbarItem> */} </NavbarItem>
</NavbarContent> </NavbarContent>
<NavbarContent justify="end"> <NavbarContent justify="end">
<NavbarItem> <NavbarItem>

81
src/components/posts/PostCard.tsx
View file

@ -1,41 +1,50 @@
// import { Button, Card, CardBody, Chip, User } from "@nextui-org/react"; import { Avatar, Button, Card, CardBody, Spacer } from "@nextui-org/react";
// import { Heart } from "lucide-react"; import { Heart, MessageCircle } from "lucide-react";
// import { formatDistance } from "date-fns"; import { formatDistance } from "date-fns";
// import Link from "next/link"; import Link from "next/link";
import { PostType } from "@/types/PostType";
export default function PostCard() { export default function PostCard({ post }: { post: PostType }) {
// return ( return (
// <Card> <Card className="bg-opacity-60">
// <CardBody> <CardBody>
// <p className="text-xl">{post.title}</p> <p className="text-2xl">{post.title}</p>
// {post.flairs && <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
// Object.values(post.flairs).map((flair) => ( <p>By</p>
// <div key={flair.id}> <Link
// <Chip>{flair.name}</Chip> href={`/u/${post.author.slug}`}
// </div> className="flex items-center gap-2"
// ))} >
<Avatar
size="sm"
className="w-6 h-6"
src={post.author.profilePicture}
/>
<p>{post.author.name}</p>
</Link>
<p>
{formatDistance(new Date(post.createdAt), new Date(), {
addSuffix: true,
})}
</p>
</div>
// <div className="flex items-center gap-3"> <Spacer y={4} />
// <p>By</p>
// <Link href={`/u/${post.author.slug}`}>
// <User name={post.author.name} />
// </Link>
// <p>
// {formatDistance(new Date(post.createdAt), new Date(), {
// addSuffix: true,
// })}
// </p>
// </div>
// <p>{post.content}</p> <p>{post.content}</p>
// <div className="flex justify-between">
// <Button> <Spacer y={4} />
// <Heart /> {post.likers.length}
// </Button> <div className="flex gap-3">
// </div> <Button size="sm">
// </CardBody> <Heart size={16} /> {post.likers.length}
// </Card> </Button>
// ); <Button size="sm">
return <div></div>; <MessageCircle size={16} /> {0}
</Button>
</div>
</CardBody>
</Card>
);
} }

41
src/components/posts/index.tsx
View file

@ -1,29 +1,30 @@
"use client"; "use client";
// import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
// import PostCard from "./PostCard"; import PostCard from "./PostCard";
import { PostType } from "@/types/PostType";
export default function Posts() { export default function Posts() {
// const [posts, setPosts] = useState(); const [posts, setPosts] = useState<PostType[]>();
// useEffect(() => { useEffect(() => {
// const fetchPosts = async () => { const fetchPosts = async () => {
// const response = await fetch("http://localhost:3005/api/v1/posts"); const response = await fetch("http://localhost:3005/api/v1/posts");
// setPosts(await response.json()); setPosts(await response.json());
// }; };
// fetchPosts(); fetchPosts();
// }, []); }, []);
// return ( return (
// <div className="flex flex-col gap-3 p-4"> <div className="flex flex-col gap-3 p-4">
// {posts && {posts &&
// posts.map((post) => ( posts.map((post) => (
// <div key={post.key}> <div key={post.id}>
// <PostCard post={post} /> <PostCard post={post} />
// </div> </div>
// ))} ))}
// </div> </div>
// ); );
return <div></div>; return <div></div>;
} }

44
src/components/timers/Timer.tsx Normal file
View file

@ -0,0 +1,44 @@
"use client";
import { useState, useEffect } from "react";
export default function Timer({
name,
targetDate,
}: {
name: String;
targetDate: Date;
}) {
const [timeLeft, setTimeLeft] = useState(targetDate.getTime() - Date.now());
useEffect(() => {
const interval = setInterval(() => {
const newTimeLeft = targetDate.getTime() - Date.now();
if (newTimeLeft <= 0) {
clearInterval(interval);
setTimeLeft(0);
} else {
setTimeLeft(newTimeLeft);
}
}, 1000);
return () => clearInterval(interval);
}, [targetDate]);
const formatTime = (milliseconds: number) => {
const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
// const minutes = Math.floor((totalSeconds % 3600) / 60);
// const seconds = totalSeconds % 60;
return `${days} days ${hours.toString()} hours`;
};
return (
<div>
<p>{name}</p>
<p className="text-4xl">{formatTime(timeLeft)}</p>
</div>
);
}

16
src/components/timers/index.tsx
View file

@ -1,8 +1,12 @@
"use client"; import Timer from "./Timer";
export default function Timers() { export default function Timers() {
return ( return (
<div></div> <div>
); <Timer
} name="Jam Start"
targetDate={new Date("2025-04-04T18:00:00-05:00")}
/>
</div>
);
}

12
src/types/PostType.ts Normal file
View file

@ -0,0 +1,12 @@
export interface PostType {
id: number;
title: string;
content: string;
author: {
slug: string;
profilePicture: string;
name: string;
};
createdAt: Date;
likers: [];
}