+
+ );
+};
+
+export default Card;
diff --git a/frontend/src/pages/CreditsPage/CreditsPage.tsx b/frontend/src/pages/CreditsPage/CreditsPage.tsx
index a3f06b91..73b110d7 100644
--- a/frontend/src/pages/CreditsPage/CreditsPage.tsx
+++ b/frontend/src/pages/CreditsPage/CreditsPage.tsx
@@ -4,27 +4,23 @@ import React, { useState, FC } from "react";
import { logoHfLA, creditsPageHighFive } from "assets/images/images";
import { iconData } from "api_data/creditsIconData";
import { illustrationData } from "api_data/creditsIllustrationData";
-import Card from "tw-components/StandardCard";
+import Card from "./Card";
import TopSvg from "./TopSvg";
import BottomSvg from "./BottomSvg";
const CreditsPage: FC = () => {
const [activeData, setActiveData] = useState(illustrationData);
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const [imgSize, setImgSize] = useState("32");
const [activeButton, setActiveButton] = useState("illustrations");
const handleClickIllustrationButton = () => {
setActiveButton("illustrations");
setActiveData(illustrationData);
- setImgSize("32");
};
const handleClickIconButton = () => {
setActiveData(iconData);
setActiveButton("icons");
- setImgSize("2");
};
const styleClasses = {
diff --git a/frontend/src/pages/LandingPage/LandingPageCop.tsx b/frontend/src/pages/LandingPage/LandingPageCop.tsx
index 014f737c..78d1ba1b 100644
--- a/frontend/src/pages/LandingPage/LandingPageCop.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCop.tsx
@@ -2,13 +2,15 @@
import React, { useState, useEffect } from "react";
// Internal Imports
-import { Button, CircleCard, Dialog } from "components/components";
+import { Button, Dialog } from "components/components";
import { CopCard, InnerCopCard, InnerCopNavCard } from "./LandingPageCopCards";
import {
copDatum,
fetchAllCopData,
fetchCopDataById,
} from "../../api_data/copData";
+import { CircleCard } from "tw-components/CircleCard";
+import Typography from "tw-components/Typography";
function LandingPageCop() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -31,19 +33,19 @@ function LandingPageCop() {
+ 
+
+
+
+
+
+
+
+
+ | Name: | +{name} | +
|---|---|
| Used In: | +{usedIn} | +
| Provider: | +{provider} | +
+
+ Learn more
+
+
+ Communities of Practice (COP)
-
+
A Community of Practice (CoP) is a group of volunteers who share a
common interest in a topic and meet regularly to fulfill both individual
and group goals. We use CoPs to share effective practices and relevant
domain knowledge to help our members grow.
-
+
{copData.map((cop) => {
return (
{
handleCopData(cop.id);
setIsDialogOpen(true);
@@ -54,8 +56,8 @@ function LandingPageCop() {
-
@@ -84,7 +86,7 @@ function LandingPageCop() {
key={cop.id}
isActive={isActive}
onClick={() => handleCopData(cop.id)}
- addClass="flex-container justify-center align-center p-2"
+ className="flex-container align-center justify-center p-2"
>
-
- {cop.title}
-
+ {cop.title}
);
})}
- {cop.title}
+
+ {cop.title}
-
+
diff --git a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
index ae0eb6b5..e7d6a3b1 100644
--- a/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
+++ b/frontend/src/pages/LandingPage/LandingPageCopCards.tsx
@@ -1,10 +1,10 @@
// External Imports
import React from "react";
+import clsx from "clsx";
// Internal Imports
-import { combineClasses } from "components/Utility/utils";
import { IconButton } from "components/Buttons/IconButton";
-import { Card } from "components/Cards/StandardCard";
+import { Card } from "tw-components/StandardCard";
import { iconX } from "assets/images/images";
interface CopCardProps extends React.PropsWithChildren {
@@ -17,8 +17,8 @@ interface CopCardProps extends React.PropsWithChildren {
function CopCard({ isHidden = true, size = "sm", ...props }: CopCardProps) {
return (
-
+
);
}
interface InnerCopNavCardSharedProps extends React.PropsWithChildren {
- addClass?: string;
+ className?: string;
isActive?: boolean;
}
@@ -66,19 +73,17 @@ type InnerCopNavCardProps =
| InnerCopNavCardButtonProps;
function InnerCopNavCard({ isActive = false, ...props }: InnerCopNavCardProps) {
- const Tag = "href" in props ? "a" : "button"; // conditionally rendered tagss
-
return (
-
{props.children}
-
+
);
}
diff --git a/frontend/src/pages/LandingPage/_LandingPageCop.scss b/frontend/src/pages/LandingPage/_LandingPageCop.scss
index 2ee14bfe..59ef13fd 100644
--- a/frontend/src/pages/LandingPage/_LandingPageCop.scss
+++ b/frontend/src/pages/LandingPage/_LandingPageCop.scss
@@ -1,36 +1,9 @@
@use "@/components/Basics" as *;
-.landing-cop-circle-title {
- color: $color-blue-dark;
-
- .circle-card-button:hover & {
- text-decoration: $color-blue-dark underline;
- }
-}
-
-.landing-cop-description {
- max-width: 800px;
-}
-
-.landing-cop-circle-container {
- flex-wrap: wrap;
- justify-content: space-evenly;
-}
-
.landing-inner-cop-nav {
row-gap: 32px;
}
.landing-cop-nav-title {
inline-size: min-content;
-
- .inner-cop-nav-card:hover > & {
- text-decoration: underline;
- }
-}
-
-.landing-inner-cop-card-content > .inner-cop-card-content {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
}
diff --git a/frontend/src/pages/LandingPage/_LandingPageCopCards.scss b/frontend/src/pages/LandingPage/_LandingPageCopCards.scss
index c551502e..2242b407 100644
--- a/frontend/src/pages/LandingPage/_LandingPageCopCards.scss
+++ b/frontend/src/pages/LandingPage/_LandingPageCopCards.scss
@@ -61,46 +61,3 @@
left: 6.4vw;
}
}
-
-/**********************************
-*** Classes for Inner COP cards ***
-**********************************/
-
-.inner-cop-card {
- background-color: $color-white;
- height: 100%;
- max-width: 625px;
- min-height: 448px;
-}
-
-.inner-cop-card-content {
- box-sizing: border-box;
- height: 100%;
- padding: {
- top: 8px;
- right: 0.6vw;
- left: 0.6vw;
- bottom: 8px;
- }
-}
-
-/**************************************
-*** Classes for Inner COP Nav cards ***
-**************************************/
-
-.inner-cop-nav-card {
- background-color: $color-white;
- border: none;
- border-radius: 16px;
- max-width: 188px;
- min-height: 64px;
-
- &.active {
- background-color: $color-blue-dark;
- color: $color-white;
- }
-
- &:hover {
- cursor: pointer;
- }
-}
diff --git a/frontend/src/components/Cards/CircleCard.tsx b/frontend/src/tw-components/CircleCard.tsx
similarity index 51%
rename from frontend/src/components/Cards/CircleCard.tsx
rename to frontend/src/tw-components/CircleCard.tsx
index e837696b..2d6f83ef 100644
--- a/frontend/src/components/Cards/CircleCard.tsx
+++ b/frontend/src/tw-components/CircleCard.tsx
@@ -1,34 +1,38 @@
-// External Imports
-import React from "react";
-
-// Internal Imports
-import { combineClasses, onKey } from "../Utility/utils";
-
-interface CircleCardProps extends React.PropsWithChildren {
- addClass?: string;
- onClick?: React.MouseEventHandler;
- role?: string;
- size?: "lg" | "sm";
-}
-
-function CircleCard({ size = "sm", ...props }: CircleCardProps) {
- return (
- ;
+ role?: string;
+ size?: "lg" | "sm";
+}
+
+const cardSizes = {
+ sm: "size-[144px]",
+ lg: "size-[256px]",
+};
+
+function CircleCard({ size = "sm", ...props }: CircleCardProps) {
+ return (
+ = ({
- name,
- usedIn,
- provider,
- imgSrc,
- imgContainerStyleClasses,
- imgStyleClasses,
- learnMoreLink,
-}) => {
+function Card({ ...props }: CardProps) {
return (
-
{props.children}
+
+ {props.children}
+
-
- );
-}
-
-export { CircleCard };
+import React from "react";
+import clsx from "clsx";
+
+import { onKey } from "components/Utility/utils";
+
+interface CircleCardProps extends React.PropsWithChildren {
+ className?: string;
+ onClick?: React.MouseEventHandler
- {props.children}
-
-
+
+ );
+}
+
+export { CircleCard };
diff --git a/frontend/src/tw-components/StandardCard.tsx b/frontend/src/tw-components/StandardCard.tsx
index bbb13588..85b59b8d 100644
--- a/frontend/src/tw-components/StandardCard.tsx
+++ b/frontend/src/tw-components/StandardCard.tsx
@@ -1,60 +1,22 @@
+// External Imports
import React from "react";
+import clsx from "clsx";
-interface CardProps {
- key: number;
- name: string;
- usedIn: string;
- provider: string;
- imgSrc: string;
- imgContainerStyleClasses: string;
- imgStyleClasses: string;
- learnMoreLink: string;
+interface CardProps extends React.PropsWithChildren {
+ className?: string;
}
-const Card: React.FC
+ {props.children}
+
+
-
-
-
-
-
-
-
-
-
-
+ | Name: | -{name} | -
|---|---|
| Used In: | -{usedIn} | -
| Provider: | -{provider} | -
-
- Learn more
-
-
-
+ {props.children}
);
-};
+}
-export default Card;
+export { Card };