Skip to content

Commit 4eeea1b

Browse files
brittneypostmabrittneypostma
committed
added component for Authors list with Link commented out to add in the future. I am getting that bug with the images not showing up again.
1 parent 455b4a6 commit 4eeea1b

File tree

2 files changed

+61
-32
lines changed

2 files changed

+61
-32
lines changed

‎frontend/main/src/components/authors/Authors.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { UserInfoExtended } from '@/models/user.model';
2+
// import Link from 'next/link';
3+
import Image from 'next/image';
4+
import AJPrimary from '@/components/global/icons/AJPrimary';
5+
6+
export default function Authors({
7+
authors,
8+
}: {
9+
authors: UserInfoExtended[];
10+
}): JSX.Element {
11+
return (
12+
<>
13+
<section className="max-w-2xl text-center">
14+
<h2 className="mb-2 text-4xl lg:text-5xl">Authors & Instructors</h2>
15+
<h3 className="font-sans text-2xl">
16+
Our wonderful team of humans who are here to help you become a{' '}
17+
<span className="font-heading text-secondary-600 dark:text-secondary-600">
18+
Purrfect
19+
</span>{' '}
20+
developer.
21+
</h3>
22+
</section>
23+
<section className="grid items-start content-center w-full gap-4 grid-cols-fit">
24+
{authors.map((author, i) => (
25+
// <Link href="/authors/author" key={i}>
26+
// <a>
27+
<article
28+
key={i}
29+
className="grid items-start max-w-md grid-cols-1 shadow-lg justify-self-center bg-basics-50 text-basics-900 hover:text-basics-900 hover:shadow-md"
30+
>
31+
{author?.displayName && author?.photoURL ? (
32+
<Image
33+
src={author.photoURL}
34+
alt={author.displayName}
35+
width="480"
36+
height="270"
37+
layout="responsive"
38+
/>
39+
) : (
40+
<div className="relative" style={{ paddingBottom: '56.25%' }}>
41+
<div className="absolute flex items-center flex-auto w-full h-full rounded-t-md bg-primary-900 dark:bg-primary-900">
42+
<AJPrimary className="w-full h-full p-4" />
43+
</div>
44+
</div>
45+
)}
46+
<div className="grid grid-cols-1 gap-2 p-4">
47+
<h3 className="font-sans text-3xl lg:text-4xl">
48+
{author.displayName}
49+
</h3>
50+
<p className="">{author.basicInfo?.about}</p>
51+
</div>
52+
</article>
53+
// </a>
54+
// </Link>
55+
))}
56+
</section>
57+
</>
58+
);
59+
}

‎frontend/main/src/pages/community.tsx

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NextSeo } from 'next-seo';
2-
import Link from 'next/link';
32
import Layout from '@/layout/Layout';
3+
import Authors from '@/components/authors/Authors';
44

55
import { getAuthorProfiles, getSite } from '@/services/serversideApi';
66
import { Site } from '@/models/site.model';
@@ -53,37 +53,7 @@ export default function Community({
5353
</a>
5454
</div>
5555
</section>
56-
<section className="max-w-2xl text-center">
57-
<h2 className="mb-2 text-4xl lg:text-5xl">Authors & Instructors</h2>
58-
<h3 className="font-sans text-2xl">
59-
Our wonderful team of humans who are here to help you become a{' '}
60-
<span className="font-heading text-secondary-600 dark:text-secondary-600">
61-
Purrfect
62-
</span>{' '}
63-
developer.
64-
</h3>
65-
</section>
66-
<section className="grid">
67-
{authors.map((author, i) => (
68-
<Link href="/authors/author" key={i}>
69-
<a>
70-
<article className="grid items-center h-full grid-cols-1 shadow-lg lg:flex bg-basics-50 text-basics-900 hover:text-basics-900 hover:shadow-md">
71-
{/* <img
72-
src={author.photoURL}
73-
alt={author.displayName}
74-
className="w-full h-full max-w-sm mx-auto"
75-
/> */}
76-
<div className="h-full max-h-full p-4 space-y-2 overflow-y-auto ">
77-
<h3 className="font-sans text-3xl lg:text-4xl">
78-
{author.displayName}
79-
</h3>
80-
<p className="">{author.basicInfo?.about}</p>
81-
</div>
82-
</article>
83-
</a>
84-
</Link>
85-
))}
86-
</section>
56+
<Authors authors={authors} />
8757
</section>
8858
</Layout>
8959
);

0 commit comments

Comments
 (0)