diff --git a/package-lock.json b/package-lock.json index 0d8171f..513957b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "product-design-roadmap", "version": "1.0.0", "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", @@ -2183,6 +2186,51 @@ "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz", + "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz", + "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz", + "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.4.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz", diff --git a/package.json b/package.json index 09ae4c3..df4247b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Cards.js b/src/components/Cards.js index 2ecb786..65dbd9d 100644 --- a/src/components/Cards.js +++ b/src/components/Cards.js @@ -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 = ; const cardContainer = { display: "flex", @@ -31,177 +33,60 @@ const cardStyle = { maxWidth: 500, }; -function CourseCard(props) { +// cards for the computer science DASHBOARD +function CSCourseCard(props) { return (
- +
-

- -

{props.courseNumber}: {props.courseName} + {console.log(props.cardNumber)} + {console.log(props.iconClass)}

- See More - -

-
- ); -} - -function FieldCard1(props) { - return ( -
-
- -
-

- -

-

Computer Science Major

-

- - {" "} - See Courses - -

-
- ); -} - -function FieldCard2(props) { - return ( -
-
- -
-

- -

-

Data Science Major

-

- - {" "} - See Courses - -

-
- ); -} - -function FieldCard3(props) { - return ( -
-
- -
-

- -

-

Informatics Major

-

- - {" "} - See Courses - -

-
- ); -} - -function FieldCard4(props) { - return ( -
-
- -
-

- -

-

Software Engineering Major

-

- - See Courses - -

-
- ); -} - -function MinorCard5(props) { - return ( -
-
- -
-

- -

-

Computer Science Minor

-

- - See Courses + See More

); } -function MinorCard6(props) { - return ( -
-
- -
-

- -

-

Data Science Minor

-

- - See Courses - -

-
- ); -} - -function MinorCard7(props) { +function CourseCard(props) { return ( -
+
- +
-

- -

-

Informatics Minor

+

+ {props.courseNumber}: {props.courseName} + {console.log(props.cardNumber)} + {console.log(props.iconClass)} +

- See Courses + See More

); } -function MinorCard8(props) { +function FieldCard1(props) { return ( -
+
+ {" "}
- +
-

- -

-

Software Engineering Minor

+

{props.name}

- + + {" "} See Courses - +

); @@ -209,14 +94,7 @@ function MinorCard8(props) { export { FieldCard1, - FieldCard2, - FieldCard3, - FieldCard4, CourseCard, - MinorCard5, - MinorCard6, - MinorCard7, - MinorCard8, cardContainer, HomePageCardContainer, cardStyle, diff --git a/src/pages/Home.js b/src/pages/Home.js index b649df6..be7a00f 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -6,17 +6,70 @@ import "../styles/styles.css"; export default function Home() { return (
-
- - - - + +
+
+ + + + +
-
- - - - + + +
+
+ + + + +
{/* Other content for the home page */}
diff --git a/src/pages/dashboard/BoardCS.js b/src/pages/dashboard/BoardCS.js index bfd914e..175b0a1 100644 --- a/src/pages/dashboard/BoardCS.js +++ b/src/pages/dashboard/BoardCS.js @@ -8,15 +8,23 @@ import { csMajorProject, } from "./logic"; -const FoundationCards = (cardNumber) => { +const FoundationCards = (cardNumber, iconClass) => { return (
+

FOUNDATION COURSES

{csMajorFoundation.map((sdagici, index) => ( { ); }; -const CoreCards = (cardNumber) => { +const CoreCards = (cardNumber, iconClass) => { return (
@@ -50,6 +58,7 @@ const CoreCards = (cardNumber) => {
{csMajorCore.map((sdagici, index) => ( { ); }; -const ElectiveCards = (cardNumber) => { +const ElectiveCards = (cardNumber, iconClass) => { return (
@@ -84,6 +93,7 @@ const ElectiveCards = (cardNumber) => {
{csMajorElective.map((sdagici, index) => ( { ); }; -const ProjectCards = (cardNumber) => { +const ProjectCards = (cardNumber, iconClass) => { return (

Project

+
{csMajorProject.map((sdagici, index) => ( { const CSDashboardPage = () => { return ( -
+

COMPUTER SCIENCE MAJOR COURSES

- +
- +
- +
- +
); diff --git a/src/pages/dashboard/BoardDS.js b/src/pages/dashboard/BoardDS.js index 7b7889a..18bd9b2 100644 --- a/src/pages/dashboard/BoardDS.js +++ b/src/pages/dashboard/BoardDS.js @@ -2,7 +2,7 @@ import React from "react"; import * as Card from "../../components/Cards"; import { dsMajorCourses } from "./logic"; -const DScourseCards = (cardNumber) => { +const DScourseCards = (cardNumber, iconClass) => { return (
@@ -12,6 +12,7 @@ const DScourseCards = (cardNumber) => { {dsMajorCourses.map((course, index) => ( { const DSDashboardPage = () => { return (
+ + ;
- +
);