Port Card from Astro (hidden)

src/components/Card.module.scss

@@ -0,0 +1,44 @@
+.linkCard {
+  list-style: none;
+  display: flex;
+  padding: 0.25rem;
+  background-color: white;
+  background-image: none;
+  background-size: 400%;
+  border-radius: 0.6rem;
+  background-position: 100%;
+  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+  > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: 1rem 1.3rem;
+    border-radius: 0.35rem;
+    color: #111;
+    background-color: white;
+    opacity: 0.8;
+  }
+
+  &:is(:hover, :focus-within) {
+    background-position: 0;
+    background-image: var(--accent-gradient);
+
+    h2 {
+      color: rgb(var(--accent));
+    }
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    color: #444;
+  }
+}

src/components/Card.tsx

@@ -0,0 +1,21 @@
+import type {FunctionComponent} from "react";
+
+import styles from "./Card.module.scss";
+
+type CardProps = { href: string, title: string, body: string | JSX.Element };
+const Card: FunctionComponent<CardProps> = ({href, title, body}) => {
+    return (<li className={styles.linkCard}>
+        <a href={href}>
+            <h2>
+                {title}
+                <span>&rarr;</span>
+            </h2>
+            <p>
+                {body}
+            </p>
+        </a>
+    </li>);
+}
+
+export default Card;
+