iNocturnis/NullTranslationWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logo swap, layour changes so the night mode button stays on top. Change src images to Image from next otherwise lint will complain. Api changes to accomendate the new Strapi. Same for type changes to fit into the new Strapi.

Browse Source
This commit is contained in:
Hieuhuy Pham
2025-01-12 04:12:17 -05:00
parent 3fed14c353
commit 7a0ec01a39
11 changed files with 109 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/page.tsx
View File

@@ -1,6 +1,6 @@
import { Book } from "@/lib/types";
import { fetchBooks } from "@/lib/api";
import Image from "next/image";
export default async function HomePage() {
let books: Book[] = [];
@@ -17,7 +17,6 @@ export default async function HomePage() {
return (
<div className="mx-auto p-6 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
{/* Patreon Advertisement */}
<div className="hidden md:block bg-yellow-500 text-black py-2 px-4 rounded-lg hover:bg-yellow-600 transition duration-200 mb-6">
<a
href="https://patreon.com/NullTranslationGroup"
@@ -29,28 +28,29 @@ export default async function HomePage() {
</a>
</div>
{/* Books Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-6">
{books.map((book: Book) => (
{books.map((book: Book) => {
const cover = book.cover?.at(0);
return (
<div
key={book.id}
className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition flex flex-col"
>
{book.Cover?.url && (
{book.cover?.at(0)?.url && (
<div className="relative w-full aspect-w-3 aspect-h-4 mb-4">
<img
src={`${process.env.NEXT_PUBLIC_API_URL}${book.Cover.url}`}
alt={book.Cover.alternativeText || `Cover of ${book.Name}`}
className="rounded-lg object-cover"
src={`${process.env.NEXT_PUBLIC_API_URL}${cover?.url}`}
alt={cover?.alternativeText || `Cover of ${book.title}`}
className="rounded-lg object-cover w-full h-full"
/>
</div>
)}
<h2 className="text-2xl font-semibold mb-2">{book.Name}</h2>
<h2 className="text-2xl font-semibold mb-2">{book.title}</h2>
<p className="text-sm text-gray-500 dark:text-gray-400">
<strong>Author:</strong> {book.Author}
<strong>Author:</strong> {book.author}
</p>
<p className="text-sm mt-2 line-clamp-3">{book.Description}</p>
<p className="text-sm mt-2 line-clamp-3">{book.description}</p>
<a
className="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold px-4 py-2 rounded text-center"
@@ -59,7 +59,7 @@ export default async function HomePage() {
Read Book
</a>
</div>
))}
)})}
</div>
</div>
);