Generalized card element

TODO.md

@@ -2,8 +2,11 @@
 
 ## Short term
 
-- Translate new wording keys
+- [Collectibles] Create page for gallery
+- [Collectibles] Create page for scans
 
 ## Long term
 
+- Global search function
+  - Convert Rich text to simple text for indexing and open graph purposes
 - Anonymous comments

src/components/Card.astro

@@ -0,0 +1,52 @@
+---
+import ConditionalWrapper from "./ConditionalWrapper.astro";
+import Link from "./Link.astro";
+
+interface Props {
+  href?: string | undefined;
+  disableRoundedTop?: boolean;
+}
+
+const { href, disableRoundedTop = false } = Astro.props;
+---
+
+<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
+  <div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+    <slot />
+  </div>
+</ConditionalWrapper>
+
+<style>
+  #card {
+    backdrop-filter: blur(10px);
+
+    border-bottom-left-radius: 1em;
+    border-bottom-right-radius: 1em;
+
+    &.rounded-top {
+      border-radius: 1em;
+      overflow: hidden;
+    }
+
+    border: 1px solid var(--color-base-300);
+    box-shadow: 0 1px 2px 0 var(--color-shadow-2);
+    background-color: color-mix(in srgb, var(--color-elevation-2) 30%, transparent);
+  }
+
+  :global(a) > #card {
+    transition-duration: 150ms;
+    transition-property: border-color, box-shadow, background-color;
+
+    &:hover {
+      border-color: var(--color-base-650);
+      box-shadow: 0 2px 2px var(--color-shadow-2);
+      background-color: color-mix(in srgb, var(--color-elevation-2) 80%, transparent);
+    }
+
+    &:active {
+      border-color: var(--color-base-1000);
+      box-shadow: 0 6px 12px 2px var(--color-shadow-2);
+      background-color: var(--color-elevation-2);
+    }
+  }
+</style>

src/components/Previews/GenericPreview.astro

@@ -1,8 +1,7 @@
 ---
 import type { EndpointTagsGroup, PayloadImage } from "src/shared/payload/payload-sdk";
-import ConditionalWrapper from "../ConditionalWrapper.astro";
-import Link from "../Link.astro";
 import InlineTagGroups from "pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro";
+import Card from "components/Card.astro";
 
 interface Props {
   thumbnail?: PayloadImage | undefined;
@@ -25,8 +24,8 @@ const {
 } = Astro.props;
 ---
 
-<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
+<Card href={href} disableRoundedTop={disableRoundedTop}>
-  <div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+  <div id="card">
     {
       thumbnail && (
         <img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
@@ -52,38 +51,25 @@ const {
       }
     </div>
   </div>
-</ConditionalWrapper>
+</Card>
 
 <style>
-  #card {
+  :global(a > #card) {
-    box-shadow: 0 1px 2px 0 var(--color-shadow-2);
+    & > #card > div > p > #title {
-
-    backdrop-filter: blur(10px);
-    background-color: color-mix(in srgb, var(--color-elevation-2) 50%, transparent);
-
-    border: 1px solid var(--color-base-300);
-
-    &.rounded-top {
-      border-radius: 1em;
-      overflow: hidden;
-    }
-
-    border-bottom-left-radius: 1em;
-    border-bottom-right-radius: 1em;
-
       transition-duration: 150ms;
-    transition-property: border-color, box-shadow;
+      transition-property: color;
-
-    &:hover {
-      border-color: var(--color-base-650);
-      box-shadow: 0 2px 2px var(--color-shadow-2);
     }
 
-    &:active {
+    &:hover > #card > div > p {
-      border-color: var(--color-base-1000);
+      color: var(--color-base-750);
-      box-shadow: 0 6px 12px 2px var(--color-shadow-2);
     }
 
+    &:active > #card > div > p {
+      color: var(--color-base-1000);
+    }
+  }
+
+  #card {
     & > img {
       width: 100%;
       height: auto;

src/pages/[locale]/collectibles/_components/ContentsSection/ContentRow.astro

@@ -5,8 +5,7 @@ import { getI18n } from "src/i18n/i18n";
 import type { EndpointCollectible } from "src/shared/payload/payload-sdk";
 import { formatInlineTitle } from "src/utils/format";
 import InlineTagGroups from "./InlineTagGroups.astro";
-import ConditionalWrapper from "components/ConditionalWrapper.astro";
+import Card from "components/Card.astro";
-import Link from "components/Link.astro";
 
 interface Props {
   content: EndpointCollectible["contents"][number];
@@ -23,7 +22,7 @@ const href =
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
+<Card href={href}>
   <div id="row">
     <div id="title">
       {
@@ -71,15 +70,12 @@ const href =
       )
     }
   </div>
-</ConditionalWrapper>
+</Card>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
-  :global(a) > #row {
+  :global(a > #card) > #row {
-    transition-duration: 150ms;
-    transition-property: border-color, box-shadow;
-
     & > #title {
       transition-duration: 150ms;
       transition-property: text-decoration-color, color;
@@ -88,35 +84,18 @@ const href =
       text-decoration-color: transparent;
     }
 
-    &:hover {
+    &:hover > #title {
-      border-color: var(--color-base-650);
-      box-shadow: 0 2px 2px var(--color-shadow-2);
-
-      & > #title {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }
-    }
 
-    &:active {
+    &:active > #title {
-      border-color: var(--color-base-1000);
-      box-shadow: 0 6px 12px 2px var(--color-shadow-2);
-
-      & > #title {
       color: var(--color-base-1000);
       text-decoration-color: var(--color-base-1000);
     }
   }
-  }
 
   #row {
-    border-radius: 1em;
-    box-shadow: 0 1px 2px 0 var(--color-shadow-2);
-
-    backdrop-filter: blur(10px);
-    background-color: color-mix(in srgb, var(--color-elevation-2) 50%, transparent);
-
-    border: 1px solid var(--color-base-300);
     padding: 1.5em;
 
     display: grid;