diff --git a/public/images/aelios.png b/public/images/aelios.png deleted file mode 100644 index 0ef78d7..0000000 Binary files a/public/images/aelios.png and /dev/null differ diff --git a/public/images/edikoyo.png b/public/images/edikoyo.png new file mode 100644 index 0000000..a4cd5da Binary files /dev/null and b/public/images/edikoyo.png differ diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx new file mode 100644 index 0000000..9959de7 --- /dev/null +++ b/src/app/app/page.tsx @@ -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 ( +
+
+ Home background +
+
+
+
+ +
+
+ +
+
+
+ ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4b797c6..0b4c82a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - +
{children}
- + ); } - -// 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 ( -// -// -// -// {children} -// -// -// -// ); -// } diff --git a/src/app/page.tsx b/src/app/page.tsx index d4cad8a..a583ee8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -42,18 +42,3 @@ export default async function Home() {
); } - -// export default function Home() { -// return ( -//
-//
-// -//
-//
-// -// -// -//
-//
-// ); -// } diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx index 97fd03b..7465e17 100644 --- a/src/components/navbar/index.tsx +++ b/src/components/navbar/index.tsx @@ -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" > - {/* + - + - */} + - {/* - - About - - - Setup + Beta Site - */} + diff --git a/src/components/posts/PostCard.tsx b/src/components/posts/PostCard.tsx index cd6a26e..e544fc4 100644 --- a/src/components/posts/PostCard.tsx +++ b/src/components/posts/PostCard.tsx @@ -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 ( - // - // - //

{post.title}

+export default function PostCard({ post }: { post: PostType }) { + return ( + + +

{post.title}

- // {post.flairs && - // Object.values(post.flairs).map((flair) => ( - //
- // {flair.name} - //
- // ))} +
+

By

+ + +

{post.author.name}

+ +

+ {formatDistance(new Date(post.createdAt), new Date(), { + addSuffix: true, + })} +

+
- //
- //

By

- // - // - // - //

- // {formatDistance(new Date(post.createdAt), new Date(), { - // addSuffix: true, - // })} - //

- //
+ - //

{post.content}

- //
- // - //
- // - // - // ); - return
; +

{post.content}

+ + + +
+ + +
+ + + ); } diff --git a/src/components/posts/index.tsx b/src/components/posts/index.tsx index bff5596..5715dfb 100644 --- a/src/components/posts/index.tsx +++ b/src/components/posts/index.tsx @@ -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(); - // 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 ( - //
- // {posts && - // posts.map((post) => ( - //
- // - //
- // ))} - //
- // ); + return ( +
+ {posts && + posts.map((post) => ( +
+ +
+ ))} +
+ ); return
; } diff --git a/src/components/timers/Timer.tsx b/src/components/timers/Timer.tsx new file mode 100644 index 0000000..d461b17 --- /dev/null +++ b/src/components/timers/Timer.tsx @@ -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 ( +
+

{name}

+

{formatTime(timeLeft)}

+
+ ); +} diff --git a/src/components/timers/index.tsx b/src/components/timers/index.tsx index d64318c..3f846ce 100644 --- a/src/components/timers/index.tsx +++ b/src/components/timers/index.tsx @@ -1,8 +1,12 @@ -"use client"; +import Timer from "./Timer"; export default function Timers() { - return ( -
- ); - } - \ No newline at end of file + return ( +
+ +
+ ); +} diff --git a/src/types/PostType.ts b/src/types/PostType.ts new file mode 100644 index 0000000..6aaaecf --- /dev/null +++ b/src/types/PostType.ts @@ -0,0 +1,12 @@ +export interface PostType { + id: number; + title: string; + content: string; + author: { + slug: string; + profilePicture: string; + name: string; + }; + createdAt: Date; + likers: []; +}