Skip to content

Commit b37b7e4

Browse files
Llewellyn500Llewellyn500
committed
refactor: update Authors page metadata, enhance NotFound page layout, and implement SkeletonCard component for loading states
1 parent 529b5ef commit b37b7e4

7 files changed

Lines changed: 193 additions & 69 deletions

File tree

‎app/authors/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { Suspense } from "react";
44
import Loading from "./loading";
55

66
export const metadata = {
7-
title: "Authors | Fyrre Magazine",
8-
description: "Our authors",
7+
title: "Team | L.A.P",
8+
description: "Our team",
99
};
1010

1111
export default function AuthorsPage() {

‎app/not-found.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ export default function NotFound() {
1515
imgSrc="/images/titles/NotFound.svg"
1616
imgAlt="The words 'Not Found' in bold uppercase lettering"
1717
>
18-
Not Found
18+
404 - Page Not Found
1919
</PageTitle>
20-
<h2>
20+
<h2 className="text-center">
2121
The page you&apos;re looking for does not exist. Click{" "}
22-
<Link className="font-semibold" href="/">
22+
<Link className="font-semibold text-[#8a2be2]" href="/">
2323
here to return home
2424
</Link>
2525
</h2>

‎components/AuthorList.tsx‎

Lines changed: 72 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
import formatString from "@/app/functions/formatString";
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
import { collection, getDocs } from "firebase/firestore";
5+
import { db } from "@/lib/firebase";
26
import Link from "next/link";
37
import Image from "next/image";
4-
import { db } from "@/lib/firebase";
5-
import { collection, getDocs, orderBy } from "firebase/firestore";
8+
import { RiArrowRightLine } from "react-icons/ri";
9+
import { Skeleton } from "./ui/skeleton";
10+
import SkeletonCard from "./Authors/SkeletonCard"; // Import the same SkeletonCard used in latest posts
611

12+
// Define the structure of an author
713
type AuthorType = {
814
uid: string;
915
name: string;
@@ -14,58 +20,73 @@ type AuthorType = {
1420
slug: string;
1521
};
1622

17-
export default async function AuthorsList() {
18-
// Fetch authors from Firestore
19-
const querySnapshot = await getDocs(
20-
collection(db, "authors")
21-
);
22-
23-
const authors = querySnapshot.docs.map(doc => ({
24-
uid: doc.id,
25-
...doc.data()
26-
})) as AuthorType[];
23+
export default function AuthorsList() {
24+
const [authors, setAuthors] = useState<AuthorType[]>([]);
25+
const [loading, setLoading] = useState(true);
26+
27+
useEffect(() => {
28+
const fetchAuthors = async () => {
29+
const querySnapshot = await getDocs(collection(db, "authors"));
30+
const fetchedAuthors = querySnapshot.docs.map((doc) => ({
31+
...(doc.data() as Omit<AuthorType, "uid">),
32+
uid: doc.id,
33+
}));
34+
35+
setAuthors(fetchedAuthors);
36+
setLoading(false);
37+
};
38+
39+
fetchAuthors();
40+
}, []);
2741

2842
return (
2943
<div className="flex flex-col max-w-[95rem] w-full mx-auto py-8 lg:pt-24 lg:pb-48">
30-
{authors.map((author, index) => (
31-
<div key={author.uid}>
32-
<article className="flex flex-col md:flex-row justify-between md:items-center gap-2 md:gap-0">
33-
<div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-16">
34-
<Image
35-
className="h-[9.375rem] w-[9.375rem]"
36-
src={author.avatar}
37-
alt={author.imgAlt}
38-
width={150}
39-
height={150}
40-
/>
41-
<h2 className="heading3-title">{author.name}</h2>
42-
</div>
43-
<div className="flex flex-col lg:flex-row gap-2 lg:gap-24">
44-
<div className="flex gap-2">
45-
<p className="font-semibold">Job</p>
46-
<p>{author.job}</p>
44+
{loading ? (
45+
// Skeleton Loader (Using the same structure as LatestPosts)
46+
<div className="grid gap-6">
47+
{[...Array(6)].map((_, index) => (
48+
<SkeletonCard key={index} />
49+
))}
50+
</div>
51+
) : (
52+
authors.map((author, index) => (
53+
<div key={author.uid}>
54+
<article className="flex flex-col md:flex-row justify-between md:items-center gap-4 ml-5">
55+
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-16">
56+
{/* Ensure image has a transparent background */}
57+
<Image
58+
className="h-[9.375rem] w-[9.375rem] object-cover rounded-full bg-transparent"
59+
src={author.avatar}
60+
alt={author.imgAlt}
61+
width={150}
62+
height={150}
63+
/>
64+
<Link href={`authors/${author.slug}`}>
65+
<h2 className="text-2xl font-semibold">{author.name}</h2>
66+
</Link>
4767
</div>
48-
<div className="flex gap-2">
49-
<p className="font-semibold">City</p>
50-
<p>{author.city}</p>
68+
<div className="flex flex-col lg:flex-row gap-4 lg:gap-24">
69+
<div className="flex gap-2">
70+
<p className="font-semibold">Job:</p>
71+
<p>{author.job}</p>
72+
</div>
73+
<div className="flex gap-2">
74+
<p className="font-semibold">City:</p>
75+
<p>{author.city}</p>
76+
</div>
77+
<Link
78+
className="flex items-center gap-2 text-white hover:text-[#8a2be2] transition ease-in-out duration-300"
79+
href={`authors/${author.slug}`}
80+
>
81+
<span className="uppercase font-semibold">About</span>
82+
<RiArrowRightLine className="text-2xl" />
83+
</Link>
5184
</div>
52-
<Link
53-
className="flex gap-2"
54-
href={`authors/${author.slug}`}
55-
>
56-
<span className="uppercase font-semibold">About</span>
57-
<img
58-
src="/icons/ri_arrow-right-line.svg"
59-
alt="An arrow pointing right"
60-
/>
61-
</Link>
62-
</div>
63-
</article>
64-
{index < authors.length - 1 && (
65-
<div className="border border-black my-6" />
66-
)}
67-
</div>
68-
))}
85+
</article>
86+
{index < authors.length - 1 && <div className="border border-gray-300 my-10" />}
87+
</div>
88+
))
89+
)}
6990
</div>
7091
);
71-
}
92+
}

‎components/Authors/SkeletonCard.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Skeleton } from "../ui/skeleton";
2+
3+
export default function SkeletonCard() {
4+
return (
5+
<div className="grid md:grid-cols-[0fr_1fr] gap-6 sm:gap-12 items-center mb-8">
6+
<Skeleton className="bg-[#a1a1a1] w-[10rem] h-[10rem] rounded-full"></Skeleton>
7+
<div className="flex flex-col justify-between">
8+
<Skeleton className="bg-[#a1a1a1] w-full h-10 rounded-none"></Skeleton>
9+
{/* <div className="flex flex-col gap-2 mb-2 sm:mb-0">
10+
<Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton>
11+
<Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton>
12+
{/* <Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton>
13+
<Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton> */}
14+
{/* </div> */}
15+
{/* <div className="flex flex-col w-[50%] sm:flex-row gap-2 sm:gap-6">
16+
<Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton> */}
17+
{/* <Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton>
18+
<Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton> */}
19+
{/* <div className="w-full h-6">
20+
<Skeleton className="bg-[#a1a1a1] w-full h-6 rounded-none"></Skeleton>
21+
</div> */}
22+
{/* </div> */}
23+
</div>
24+
</div>
25+
);
26+
}

‎components/Authors/loading.tsx‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,62 @@
1+
import { Skeleton } from "../ui/skeleton";
2+
import SkeletonCard from "./SkeletonCard";
3+
14
export default function Loading() {
2-
return <div>TEST</div>;
5+
return (
6+
<div>
7+
<div className="flex flex-col-reverse sm:flex-col gap-12 py-10 max-w-[95rem] w-full mx-auto">
8+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
9+
<Skeleton className="bg-[#a1a1a1] rounded-none box h-[10.625rem]"></Skeleton>
10+
<div className="flex flex-col gap-0.5 justify-between">
11+
<Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
12+
<Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
13+
<Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
14+
<Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
15+
<Skeleton className="bg-[#a1a1a1] w-full h-5 rounded-none"></Skeleton>
16+
<div className="flex justify-between sm:items-center gap-2 mt-2">
17+
<div className="flex flex-col lg:flex-row gap-2">
18+
<div className="flex gap-2">
19+
<Skeleton className="bg-[#a1a1a1] h-6 w-10 rounded-none" />
20+
<Skeleton className="bg-[#a1a1a1] h-6 w-24 rounded-none" />
21+
</div>
22+
<div className="flex gap-2">
23+
<Skeleton className="bg-[#a1a1a1] h-6 w-10 rounded-none" />
24+
<Skeleton className="bg-[#a1a1a1] h-6 w-24 rounded-none" />
25+
</div>
26+
<div className="flex gap-2">
27+
<Skeleton className="bg-[#a1a1a1] h-6 w-10 rounded-none" />
28+
<Skeleton className="bg-[#a1a1a1] h-6 w-24 rounded-none" />
29+
</div>
30+
</div>
31+
<div className="flex justify-end">
32+
<Skeleton className="bg-white h-[2.625rem] w-[3.5rem] border border-[#a1a1a1] rounded-full flex items-center justify-center">
33+
<Skeleton className="bg-[#a1a1a1] h-6 w-8 rounded-none" />
34+
</Skeleton>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
<Skeleton className="bg-[#a1a1a1] min-h-[10vh] sm:min-h-[30vh] lg:min-h-[50vh] w-full rounded-none"></Skeleton>
40+
</div>
41+
42+
<div className="flex flex-col lg:flex-row gap-6 lg:gap-12 xl:gap-24">
43+
<div className="lg:w-3/4">
44+
<div className="grid sm:gap-12">
45+
<SkeletonCard />
46+
<Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
47+
<SkeletonCard />
48+
<Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
49+
<SkeletonCard />
50+
<Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
51+
<SkeletonCard />
52+
<Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
53+
<SkeletonCard />
54+
<Skeleton className="bg-[#a1a1a1] w-full h-0.5 rounded-none"></Skeleton>
55+
<SkeletonCard />
56+
</div>
57+
</div>
58+
<Skeleton className="bg-[#a1a1a1] rounded-none lg:w-1/4"></Skeleton>
59+
</div>
60+
</div>
61+
);
362
}

‎public/images/titles/Authors.svg‎

Lines changed: 18 additions & 9 deletions
Loading

‎public/images/titles/NotFound.svg‎

Lines changed: 12 additions & 3 deletions
Loading

0 commit comments

Comments
 (0)