- ([] as copDatum[]);
+ const [selectedCOP, setSelectedCOP] = useState(-1);
+
+ useEffect(() => {
+ setCopData(fetchAllCopData());
+ }, []);
+
+ const handleSelectCOP = (
+ e: React.MouseEvent,
+ cop: copDatum,
+ ) => {
+ e.stopPropagation();
+ setSelectedCOP(cop.id);
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export { QualifierPage1 };
diff --git a/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx b/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx
new file mode 100644
index 00000000..c88370f5
--- /dev/null
+++ b/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx
@@ -0,0 +1,51 @@
+// External Imports
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+// Internal Imports
+import Typography from "tw-components/Typography";
+import { Button, IconButton } from "components/components";
+import { iconArrowLeft } from "assets/images/images";
+import { QualifierNav } from "../components/QualifierNav";
+
+import { RadioButtonForm } from "../components/RadioButtonForm";
+// import { ChipsSelection } from "../components/ChipsSelection";
+
+function QualifierPage2() {
+ const navigate = useNavigate();
+
+ return (
+ <>
+
+ navigate("../1", { relative: "path" })}
+ />
+
+
+
+ );
+}
+
+export { QualifierPage2 };
diff --git a/frontend/src/router/Router.tsx b/frontend/src/router/Router.tsx
index 83e3e259..94575677 100644
--- a/frontend/src/router/Router.tsx
+++ b/frontend/src/router/Router.tsx
@@ -13,9 +13,7 @@ import HomeLayout from "layouts/HomeLayout";
import DefaultNavLayout from "layouts/DefaultNavLayout";
import PrivacyPolicyPage from "pages/PrivacyPolicyPage/PrivacyPolicyPage";
-const QualifierPage = lazy(
- () => import("../pages/QualifierPage/QualifierPage"),
-);
+const QualifierPage = lazy(() => import("../pages/QualifierPage"));
const router = createBrowserRouter([
{
diff --git a/frontend/src/tw-components/HeaderNav.tsx b/frontend/src/tw-components/HeaderNav.tsx
index 46ce641c..41019ee6 100644
--- a/frontend/src/tw-components/HeaderNav.tsx
+++ b/frontend/src/tw-components/HeaderNav.tsx
@@ -1,11 +1,11 @@
// External Imports
import React from "react";
+import { Link } from "react-router-dom";
// Internal Imports
import { logoHorizontal } from "assets/images/images";
import { IconHamburgerMenu } from "assets/images/images";
import { Button } from "../components/components";
-import { Link } from "react-router-dom";
interface menuObject {
name?: string;
@@ -23,13 +23,13 @@ const menuItems: menuObject[] = [
const Logo = () => {
return (
-
+
-
+
);
};
diff --git a/frontend/src/tw-components/StandardCard.tsx b/frontend/src/tw-components/StandardCard.tsx
index 85b59b8d..607c2396 100644
--- a/frontend/src/tw-components/StandardCard.tsx
+++ b/frontend/src/tw-components/StandardCard.tsx
@@ -10,7 +10,7 @@ function Card({ ...props }: CardProps) {
return (
-
+
+
);
}
diff --git a/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx b/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx
new file mode 100644
index 00000000..0093643b
--- /dev/null
+++ b/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx
@@ -0,0 +1,92 @@
+// External Imports
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import clsx from "clsx";
+
+// Internal Imports
+import { copDatum, fetchAllCopData } from "api_data/copData";
+import Typography from "tw-components/Typography";
+import { Button } from "components/components";
+import { QualifierNav } from "../components/QualifierNav";
+
+function QualifierPage1() {
+ const navigate = useNavigate();
+ const [copData, setCopData] = useState
+
-
+
+
+ What type of Practice Area are you looking for?
+
+
+ Select one practice area
+
+
+ {/* COP Cards */}
+
+
+ {copData.map((cop) => {
+ const isSelected = selectedCOP === cop.id;
+
+ return (
+
+ handleSelectCOP(e, cop)}
+ role="button"
+ tabIndex={0}
+ >
+
+ {cop.title}
+
+
+ {cop.subtitle}
+
+
+ );
+ })}
+
+
+
+
+
+ Skill Evaluation
+
+
+ Evaluate each skill based on your experience
+
+
+
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3f72b718..181b664f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -13,6 +13,7 @@ module.exports = {
"./src/pages/LandingPage/*.tsx",
"./src/pages/PrivacyPolicyPage/*",
"./src/pages/CreditsPage/*.tsx",
+ "./src/pages/QualifierPage/**/*.tsx",
], // Will change to "./src/**/*.{js,jsx,tsx}", "./templates/index.html"
theme: {
screens: {
@@ -23,6 +24,7 @@ module.exports = {
xl: "1201px",
},
colors: {
+ transparent: "transparent",
// Primary Colors
"blue-dark": "#3450a1",
"blue-darker": "#323d69",
diff --git a/frontend/tests/components/ProgressBar.test.tsx b/frontend/tests/components/ProgressBar.test.tsx
deleted file mode 100644
index b05740db..00000000
--- a/frontend/tests/components/ProgressBar.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// External imports
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-
-// Internal imports
-import { ProgressBar } from "components/components";
-
-describe("ProgressBar", () => {
- test("ProgressBar component", () => {
- render(