feat(UI): Course Page Info Card

Context

This PR addresses issue #88 and focuses on the implementation of the information component for the course page. The key features are as follows:

Unauthenticated Users: They will see a truncated version of the information (up to 3 lines) along with a login link that redirects them to the login page.
Authenticated Users: They will also see the truncated information, but with a see more link. Clicking this link will open a modal displaying the full course information.

Implementation Decisions

For the Information Card, I have chosen a composition design by allowing the card component to accept Log In Button and Modal as children. This approach was adopted for several reasons:

Minimise Prop Drilling: By passing these components as children, we avoid passing unnecessary props through multiple levels, reducing prop drilling.
Server Vs Client Components: Both the Log In Button and Modal are client-based components. By extracting these parts out of the parent InformationCard component, the card itself and the page that uses it can remain as server-based components.

Initially, I considered consolidating the rendering of the button and modal into a single component (e.g., placing the button within the modal component since both are client-based). However, this approach might violate separation of concerns and it does not address the issue of prop drilling. Additionally, it is inconsistent with our current component design, which favours a composition-based approach over a component-based one.

Changes

new parallel route @Information
information card components (including theme, skeleton, login button & modal)
new clipboard icon

Note

Course detail component will be implemented in a separate PR

Testing

all reviews for selected course: https://afterclass-io-v2-git-feat-course-page-info-section-afterclass.vercel.app/course/COR-IS1702

Preview

Unauthenticated

Authenticated

Modal

AfterClass-io / afterclass.io-v2