Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 24x 24x 24x 24x 16x 8x 24x 24x 24x 24x 24x 24x | import React from "react";
import { useCurrentUser } from "main/utils/currentUser";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
export default function HomePage() {
const { data: currentUser } = useCurrentUser();
const getPartOfDayGreeting = () => {
const hour = new Date().getHours();
if (hour <= 12) return "Good morning";
if (hour <= 18) return "Good afternoon";
return "Good evening";
};
const greeting = getPartOfDayGreeting();
const renderGreeting = (username) => (
<h1
data-testid="homePage-title"
style={{
fontSize: "75px",
borderRadius: "7px",
backgroundColor: "white",
opacity: ".9"
}}
className="text-center border-0 my-3"
>
{greeting}, {username}
</h1>
);
const renderInfoSection = () => (
<div data-testid="info-section" style={{ padding: "20px", borderRadius: "7px", marginTop: "20px" }}>
<h2>About Organic</h2>
<p>
Organic is a platform designed to equip students and instructors with a comprehensive suite of tools for efficiently managing GitHub organizations associated with computer science courses.
</p>
<p>
Users can input detailed course information, including the course name, term, start/end dates, and GitHub organization. Additionally, users can specify their institution's name and abbreviation, as well as the academic quarter or semester they are in.
</p>
<img
src="https://www.startyourlab.com/img/setup/github-organization.svg"
alt="CS156 Project"
style={{ width: "100%", borderRadius: "7px", marginTop: "20px" }}
/>
</div>
);
return (
<div data-testid={"HomePage-main-div"}>
<BasicLayout>
{renderGreeting(currentUser.loggedIn ? currentUser.root.user.githubLogin : "Please Sign In First to Proceed")}
{renderInfoSection()}
</BasicLayout>
</div>
);
}
|