Skip to content

Commit

Permalink
Merge pull request #457 from mbeps/development
Browse files Browse the repository at this point in the history 
Update Education Pages
  • Loading branch information
@mbeps
mbeps authored Sep 16, 2024
2 parents 7221cfb + d58f526 commit ccda80b
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 71 deletions.
190 changes: 153 additions & 37 deletions app/education/[courseKey]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@ import { Metadata, ResolvingMetadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/shadcn/ui/accordion";
import { GrAppsRounded } from "react-icons/gr";
import Reader from "@/components/Reader/Reader";
import { IoReaderOutline } from "react-icons/io5";

type CoursesPageProps = {
params: { courseKey: string };
Expand Down Expand Up @@ -111,9 +120,9 @@ const CoursesPage: React.FC<CoursesPageProps> = ({ params, searchParams }) => {
notFound();
}

const courseImage = `${basePath}/${courseKey}.jpg`;

const showArchived: boolean = (searchParams.archived || "false") === "true";
const hasRelatedMaterials: boolean =
!!courseData.relatedMaterials && courseData.relatedMaterials.length > 0;

let filteredModules: ModuleDatabaseKeys[] = moduleDatabaseKeys;
filteredModules = filterMaterialByArchivedStatus<ModuleInterface>(
Expand Down Expand Up @@ -189,39 +198,66 @@ const CoursesPage: React.FC<CoursesPageProps> = ({ params, searchParams }) => {

<div
className="
grid grid-cols-1 lg:grid-cols-2 lg:grid-flow-col-reverse
space-x-0 lg:space-x-6"
>
{/* Left */}
<div
className="
rounded-xl
transition-all duration-500 ease-in-out
p-1 lg:p-3
bg-neutral-100 dark:bg-neutral-950
"
>
<AspectRatio ratio={1 / 1.4} className="overflow-hidden relative">
<Image
src={courseImage}
key={courseImage}
alt={`${courseData.name} cover image`}
fill={true}
loading="lazy"
quality={15}
className="
rounded-xl
object-cover
"
/>
</AspectRatio>
</div>

{/* Right */}
<div className="py-2">
<HeadingThree title={courseData.university} />
<div className="py-5 w-full">
{/* Logo and name section */}
<div
className="
flex
items-center justify-center
flex-col md:flex-row
"
>
{/* Logo */}
{courseData.logo && (
<div
className="
rounded-full
shadow-lg
transition-all duration-500 ease-in-out
w-[75px] h-[75px]
"
>
<AspectRatio
ratio={1 / 1}
className="overflow-hidden relative w-full bg-white rounded-full"
>
<Image
src={courseData.logo}
alt={`Logo for ${courseData.name}`}
fill={true}
className="
rounded-full
shadow-lg object-cover
transition-all duration-500 ease-in-out
"
quality={30}
priority
/>
</AspectRatio>
</div>
)}

<p className="text-2xl text-neutral-700 dark:text-neutral-200 -mt-4">
{/* University Name */}
<div
className="
h-full
flex items-center
"
>
<p
className="
text-left text-2xl font-bold
mt-4 lg:mt-0 lg:ml-8
text-neutral-600 dark:text-neutral-300
"
>
{courseData.university}
</p>
</div>
</div>
<p className="text-2xl text-neutral-700 dark:text-neutral-200 mt-8">
{courseData.category}
</p>
<p>{`${courseData.startYear} - ${courseData.endYear}`}</p>
Expand Down Expand Up @@ -274,11 +310,91 @@ const CoursesPage: React.FC<CoursesPageProps> = ({ params, searchParams }) => {
{/* Skills */}
<SkillTableSection allGroupedSkills={allGroupedSkills} />

{/* Related Materials */}
{courseData.relatedMaterials &&
courseData.relatedMaterials.length > 0 && (
<MaterialList materialKeys={courseData.relatedMaterials} />
)}
{!!courseData.certificate || hasRelatedMaterials ? (
<Accordion type="single" collapsible>
{/* Certificate Section */}
{!!courseData.certificate && (
<>
<AccordionItem value="item-2">
<AccordionTrigger>
<div className="flex items-center space-x-3">
<IoReaderOutline
size={26}
className="text-neutral-500"
/>
<p
className="
text-lg
text-neutral-600 dark:text-neutral-400
font-semibold
"
>
Certificate
</p>
</div>
</AccordionTrigger>
<AccordionContent className="px-2 flex items-center justify-center">
<div
className="
rounded-xl
w-full lg:w-1/2
transition-all duration-500 ease-in-out
p-1 lg:p-3
bg-neutral-100 dark:bg-neutral-950
"
>
<AspectRatio
ratio={1 / 1.4}
className="overflow-hidden relative"
>
<Image
src={courseData.certificate}
key={courseData.certificate}
alt={`${courseData.name} cover image`}
fill={true}
loading="lazy"
quality={15}
className="
rounded-xl
object-cover
"
/>
</AspectRatio>
</div>
</AccordionContent>
</AccordionItem>
</>
)}

{/* Related Materials Section */}
{hasRelatedMaterials && (
<>
<AccordionItem value="item-3">
<AccordionTrigger>
<div className="flex items-center space-x-3">
<GrAppsRounded size={25} className="text-neutral-500" />
<p
className="
text-lg
text-neutral-600 dark:text-neutral-400
font-semibold
"
>
Related Material
</p>
</div>
</AccordionTrigger>
<AccordionContent className="px-2">
<MaterialList
materialKeys={courseData.relatedMaterials!}
isCollapsible={false}
/>
</AccordionContent>
</AccordionItem>
</>
)}
</Accordion>
) : null}
</div>
</div>
</main>
Expand Down
64 changes: 31 additions & 33 deletions components/MaterialItems/CourseItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,17 @@ interface CourseItemProps {
courseKey: string;
}

/**
* Card representing a university course.
* Displays the course's certificate, name, grade, university, and a link to the course page.
*
* @param courseKey Key of the course to display
* @returns Card displaying the course's certificate, name, grade, university, and a link to the course page
*/
const CourseItem: React.FC<CourseItemProps> = ({ courseKey }) => {
const basePath: string = EDUCATION_PAGE.path;
let courseData: CourseInterface = courseDatabaseMap[courseKey];

courseData = {
...courseData,
certificate: `${basePath}/${courseKey}.jpg`,
};

return (
<div
className="
Expand All @@ -34,37 +36,33 @@ const CourseItem: React.FC<CourseItemProps> = ({ courseKey }) => {
"
>
{/* Certificate Image */}
{courseData.certificate && (
<Link href={`education/${courseKey}`}>
<div
className="
{courseData.logo && (
<div
className="
flex justify-center
rounded-xl
transform md:hover:scale-105
shadow-sm md:hover:shadow-lg
transition-all duration-500 ease-in-out
mb-6
w-full
overflow-hidden
"
>
<AspectRatio ratio={1 / 1.4} className="overflow-hidden relative">
<Image
key={courseKey}
src={courseData.certificate}
alt={`${courseData.name} certificate image`}
fill={true}
quality={20}
loading="lazy"
className="
rounded-xl
cursor-pointer
object-cover
"
>
<Link href={`${basePath}/${courseKey}`}>
<Image
key={courseKey}
src={courseData.logo}
alt={`${courseData.name} logo`}
width={160}
height={160}
quality={60}
loading="lazy"
className="
rounded-full
cursor-pointer
transform md:hover:scale-105
shadow-md md:hover:shadow-xl
transition-all duration-500 ease-in-out
"
/>
</AspectRatio>
</div>
</Link>
/>
</Link>
</div>
)}

<div
Expand All @@ -73,7 +71,7 @@ const CourseItem: React.FC<CourseItemProps> = ({ courseKey }) => {
gap-5 px-4 py-4"
>
{/* Certificate Title */}
<Link href={`education/${courseKey}`}>
<Link href={`${basePath}/${courseKey}`}>
<h1
className="
text-3xl md:text-4xl font-bold text-center
Expand Down
5 changes: 4 additions & 1 deletion database/Courses/CourseDatabaseMap.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ModuleDatabaseKeys from "@/database/Modules/ModuleDatabaseKeys";
import CourseInterface from "@/database/Courses/CourseInterface";
import aggregateRelatedMaterialsForCourses from "@/actions/material/course/aggregate/aggregateRelatedMaterialsForCourses";
import moduleDatabaseMap from "../Modules/ModuleDatabaseMap";
import { EDUCATION_PAGE } from "@/constants/pages";

/**
* Hashmap of the courses I have studied at university.
Expand All @@ -16,10 +17,12 @@ const courseMap: Database<CourseInterface> = {
name: "Computer Science",
university: "Royal Holloway, University of London",
grade: "First Class Honours",
category: "Bachelor of Science",
category: "Bachelor of Science (BSc)",
skills: [], // dynamically added from modules
startYear: 2020,
endYear: 2023,
certificate: `${EDUCATION_PAGE.path}/${CourseDatabaseKeys.RHUL_ComputerScience}/certificate.jpg`,
logo: `${EDUCATION_PAGE.path}/${CourseDatabaseKeys.RHUL_ComputerScience}/logo.png`,
modules: [
ModuleDatabaseKeys.RHUL_ObjectOrientedProgramming1,
ModuleDatabaseKeys.RHUL_ObjectOrientedProgramming2,
Expand Down
1 change: 1 addition & 0 deletions database/Courses/CourseInterface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,5 @@ export default interface CourseInterface extends MaterialInterface {
startYear: number;
endYear: number;
university: string;
logo: string;
}
0 public/education/rhul-computer-science.jpg → ...ion/rhul-computer-science/certificate.jpg
View file
File renamed without changes
Binary file added public/education/rhul-computer-science/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ccda80b

Please sign in to comment.