Fix frontend issues on resources page (#103)

* fix: backend description text overflow

* feat: new ResourceCard component

removed unused assets

* fix: key prop error

* fix: remove unused components

* fix: references to unused images

* refactor: short-circuit and color fixes

* Fix transformed filter glitches for webkit

- Include `translateZ(0)` when applying transform to drop shadow filter

---------

Co-authored-by: Taesung Hwang <[email protected]>

apps/site/src/views/Resources/components/ApiGroup/ApiGroup.module.scss → apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss

@@ -1,8 +1,10 @@
+@use "zothacks-theme" as theme;
+
 .group {
 	margin-top: 50px;
 	width: 344px;
-	height: 500px;
 	position: relative;
+	padding: 1rem 0;
 	box-shadow: 0 6px 5px -2px rgba(gray, 0.5);
 }
 
@@ -11,7 +13,7 @@
 	width: 238px;
 	height: 60px;
 	position: absolute;
-	top: -5%;
+	top: -12.5%;
 }
 
 .container {
@@ -21,20 +23,31 @@
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
-	height: 450px;
+	height: 350px;
 }
 
 .tag {
-	position: absolute;
-	left: -5%;
-	bottom: 5%;
+	background-image: url("~@/assets/images/resource-link.svg");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+	background-position: left;
+	display: inline-block;
+	padding: 1rem;
+	padding-right: 3rem;
+	margin-left: -6px;
+	margin-bottom: 0.5rem;
 	transition:
 		filter 0.13s ease,
 		transform 0.13s ease,
 		filter 0.13s ease;
 
-	&:hover {
-		transform: translateX(-5px);
+	color: theme.$black;
+	text-decoration: none;
+	font-weight: bold;
+
+	&:hover,
+	&:focus {
+		transform: translateX(-5px) translateZ(0);
 		filter: drop-shadow(1px 0px 0px black) drop-shadow(-2px 0px 0px black)
 			drop-shadow(0px 2px 0px black) drop-shadow(0px -2px 0px black);
 	}

apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx

@@ -0,0 +1,61 @@
+import Image from "next/image";
+
+import openNewWindow from "@/assets/icons/open-new-window.svg";
+import styles from "./ResourceCard.module.scss";
+
+type Tag = {
+	text: string;
+	link: string;
+};
+
+interface ResourceCardProps {
+	title: string;
+	description: JSX.Element;
+	stickerSrc?: string;
+	links: Tag[];
+	stickyNoteColor: string;
+}
+
+export default function ResourceCard({
+	title,
+	description,
+	stickerSrc,
+	links,
+	stickyNoteColor,
+}: ResourceCardProps) {
+	return (
+		<div
+			className={styles.group}
+			style={{
+				backgroundColor: `${stickyNoteColor}`,
+			}}
+		>
+			<div className={styles.container + " text-center px-3"}>
+				<div className={styles.tape}></div>
+				{stickerSrc && <img src={stickerSrc} alt="Resource logo" width="100" />}
+				<h3>{title}</h3>
+				{description}
+			</div>
+
+			{links.map(({ text, link }) => (
+				<a
+					key={link}
+					href={link}
+					target="_blank"
+					rel="noopener noreferrer"
+					className={styles.tag}
+				>
+					{text}
+					<div className="d-inline ms-1 vertical-align-middle">
+						<Image
+							src={openNewWindow}
+							width="20"
+							height="20"
+							alt="Open link in new window"
+						/>
+					</div>
+				</a>
+			))}
+		</div>
+	);
+}

apps/site/src/views/Resources/sections/ApiResources/ApiResources.tsx

@@ -3,7 +3,7 @@ import imageUrlBuilder from "@sanity/image-url";
 
 import styles from "./ApiResources.module.scss";
 
-import { ApiGroup } from "../../components/ApiGroup/ApiGroup";
+import ResourceCard from "../../components/ResourceCard/ResourceCard";
 import { getResources } from "../../getResources";
 import { client } from "@/lib/sanity/client";
 
@@ -27,11 +27,11 @@ async function ApiResources() {
 				{resources.map(
 					({ _id, title, description, link, logo, stickyNoteColor }) => (
 						<div className={styles.column + " col"} key={_id}>
-							<ApiGroup
+							<ResourceCard
 								title={title}
 								description={<PortableText value={description} />}
 								stickerSrc={imageUrlBuilder(client).image(logo).url()}
-								tagLink={link}
+								links={[{ text: "API Reference", link: link }]}
 								stickyNoteColor={stickyNoteColor.hex}
 							/>
 						</div>