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 { Inter } from "next/font/google";
import "./globals.css";
import { NextUIProvider } from "@nextui-org/react";
import Navbar from "../components/navbar";
import Providers from "./providers";
const inter = Inter({ subsets: ["latin"] });
@ -19,54 +19,15 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<NextUIProvider>
<Providers>
<div className="dark">
<div className="bg-zinc-100 dark:bg-zinc-950 min-h-screen">
<Navbar />
<div className="max-w-8xl mx-auto">{children}</div>
</div>
</div>
</NextUIProvider>
</Providers>
</body>
</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>
);
}
// 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 {
Navbar as NavbarBase,
NavbarBrand,
NavbarContent,
NavbarItem,
} from "@nextui-org/navbar";
import { Link } from "@nextui-org/link";
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";
export default function Navbar() {
@ -15,31 +16,23 @@ export default function Navbar() {
maxWidth="2xl"
className="bg-transparent p-1"
>
{/* <NavbarBrand>
<NavbarBrand>
<Link
href="/"
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>
</NavbarBrand> */}
</NavbarBrand>
<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>
<Link
href="/setup"
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110 hover:text-blue-700"
href="/app"
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110"
>
Setup
Beta Site
</Link>
</NavbarItem> */}
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem>

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

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

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

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