Skip to content

Commit

Permalink
Add logo to the Dashboard and edit card function
Browse files Browse the repository at this point in the history
  • Loading branch information
@tuduun
tuduun committed Aug 14, 2023
1 parent 7aa1933 commit d8ae1e7
Show file tree
Hide file tree
Showing 6 changed files with 171 additions and 168 deletions.
48 changes: 48 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
"version": "1.0.0",
"private": false,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"bootstrap": "^5.3.1",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
Expand Down
172 changes: 25 additions & 147 deletions src/components/Cards.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from "react";
import { Outlet, Link } from "react-router-dom";
import Button from "react-bootstrap/Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const bolt = <FontAwesomeIcon icon="fas fa-bolt" />;

const cardContainer = {
display: "flex",
Expand Down Expand Up @@ -31,192 +33,68 @@ const cardStyle = {
maxWidth: 500,
};

function CourseCard(props) {
// cards for the computer science DASHBOARD
function CSCourseCard(props) {
return (
<div class={"card card-" + props.cardNumber["cardNumber"].toString()}>
<div class="card__icon">
<i class="fas fa-bolt"></i>
<i class={props.cardNumber["iconClass"]}></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">
{props.courseNumber}: {props.courseName}
{console.log(props.cardNumber)}
{console.log(props.iconClass)}
</h2>
<p class="card__apply">
<a class="card__link" href="#">
See More<i class="fas fa-arrow-right"></i>
</a>
</p>
</div>
);
}

function FieldCard1(props) {
return (
<div class="card card-1">
<div class="card__icon">
<i class="fas fa-bolt"></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Computer Science Major</h2>
<p class="card__apply">
<Link to="/computersciencemajor" class="card__link">
{" "}
See Courses <i class="fas fa-arrow-right"></i>
</Link>
</p>
</div>
);
}

function FieldCard2(props) {
return (
<div class="card card-2">
<div class="card__icon">
<i class="fas fa-bolt"></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Data Science Major</h2>
<p class="card__apply">
<Link to="/datasciencemajor" class="card__link">
{" "}
See Courses <i class="fas fa-arrow-right"></i>
</Link>
</p>
</div>
);
}

function FieldCard3(props) {
return (
<div class="card card-3">
<div class="card__icon">
<i class="fas fa-bolt"></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Informatics Major</h2>
<p class="card__apply">
<Link to="/informaticsmajor" class="card__link">
{" "}
See Courses <i class="fas fa-arrow-right"></i>
</Link>
</p>
</div>
);
}

function FieldCard4(props) {
return (
<div class="card card-4">
<div class="card__icon">
<i class="fas fa-bolt"></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Software Engineering Major</h2>
<p class="card__apply">
<a class="card__link" href="#">
See Courses <i class="fas fa-arrow-right"></i>
</a>
</p>
</div>
);
}

function MinorCard5(props) {
return (
<div class="card card-5">
<div class="card__icon">
<i class="fas fa-bolt"></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Computer Science Minor</h2>
<p class="card__apply">
<a class="card__link" href="#">
See Courses <i class="fas fa-arrow-right"></i>
See More <i class="fas fa-arrow-right"></i>
</a>
</p>
</div>
);
}

function MinorCard6(props) {
return (
<div class="card card-3">
<div class="card__icon">
<i class="fas fa-bolt"></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Data Science Minor</h2>
<p class="card__apply">
<a class="card__link" href="#">
See Courses <i class="fas fa-arrow-right"></i>
</a>
</p>
</div>
);
}

function MinorCard7(props) {
function CourseCard(props) {
return (
<div class="card card-2">
<div class={"card card-" + props.cardNumber["cardNumber"].toString()}>
<div class="card__icon">
<i class="fas fa-bolt"></i>
<i class={props.cardNumber["iconClass"]}></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Informatics Minor</h2>
<h2 class="card__title">
{props.courseNumber}: {props.courseName}
{console.log(props.cardNumber)}
{console.log(props.iconClass)}
</h2>
<p class="card__apply">
<a class="card__link" href="#">
See Courses <i class="fas fa-arrow-right"></i>
See More <i class="fas fa-arrow-right"></i>
</a>
</p>
</div>
);
}

function MinorCard8(props) {
function FieldCard1(props) {
return (
<div class="card card-1">
<div class={"card card-" + props.cardNumber.toString()}>
{" "}
<div class="card__icon">
<i class="fas fa-bolt"></i>
<i class={props.iconClass}></i>
</div>
<p class="card__exit">
<i class="fas fa-times"></i>
</p>
<h2 class="card__title">Software Engineering Minor</h2>
<h2 class="card__title">{props.name}</h2>
<p class="card__apply">
<a class="card__link" href="#">
<Link to={props.link} class="card__link">
{" "}
See Courses <i class="fas fa-arrow-right"></i>
</a>
</Link>
</p>
</div>
);
}

export {
FieldCard1,
FieldCard2,
FieldCard3,
FieldCard4,
CourseCard,
MinorCard5,
MinorCard6,
MinorCard7,
MinorCard8,
cardContainer,
HomePageCardContainer,
cardStyle,
Expand Down
73 changes: 63 additions & 10 deletions src/pages/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,70 @@ import "../styles/styles.css";
export default function Home() {
return (
<section>
<div class="majors" style={Card.HomePageCardContainer}>
<Card.FieldCard1 />
<Card.FieldCard2 />
<Card.FieldCard3 />
<Card.FieldCard4 />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<div style={{ paddingTop: 50, paddingBottom: 20 }}>
<div class="majors" style={Card.HomePageCardContainer}>
<Card.FieldCard1
name={"Computer Science Major"}
link={"/computersciencemajor"}
cardNumber={1}
iconClass={"fa-solid fa-code"}
/>
<Card.FieldCard1
name={"Data Science Major"}
link={"/datasciencemajor"}
cardNumber={2}
iconClass={"fa-solid fa-database"}
/>
<Card.FieldCard1
name={"Informatics Major"}
link={"/informaticsmajor"}
cardNumber={3}
iconClass={"fa-solid fa-computer"}
/>
<Card.FieldCard1
name={"Software Engineering Major"}
link={"/softwareengineeringmajor"}
cardNumber={5}
iconClass={"fa-brands fa-react"}
/>
</div>
</div>
<div class="minors" style={Card.HomePageCardContainer}>
<Card.MinorCard5 />
<Card.MinorCard6 />
<Card.MinorCard7 />
<Card.MinorCard8 />

<i class="fa-brands fa-react"></i>
<div style={{ padding: 20 }}>
<div class="minors" style={Card.HomePageCardContainer}>
<Card.FieldCard1
name={"Computer Science Minor"}
link={"/computerscienceminor"}
cardNumber={4}
iconClass={"fa-solid fa-code"}
/>
<Card.FieldCard1
name={"Data Science Minor"}
link={"/datascienceminor"}
cardNumber={3}
iconClass={"fa-solid fa-database"}
/>
<Card.FieldCard1
name={"Informatics Minor"}
link={"/informaticsminor"}
cardNumber={2}
iconClass={"fa-solid fa-computer"}
/>
<Card.FieldCard1
name={"Software Engineering Minor"}
link={"/softwareengineeringminor"}
cardNumber={1}
iconClass={"fa-brands fa-react"}
/>
</div>
</div>
{/* Other content for the home page */}
</section>
Expand Down
Loading

0 comments on commit d8ae1e7

Please sign in to comment.