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>