Improvements to content section in collectibles

src/components/ConditionalWrapper.astro

@@ -1,17 +1,18 @@
 ---
-interface Props {
+interface Props<T extends Record<string, any>> {
-  wrapper: (props?: any) => any;
+  wrapper: (props: T) => any;
+  props?: T;
   condition: boolean;
 }
 
-const { wrapper: Wrapper, condition } = Astro.props;
+const { wrapper: Wrapper, condition, props } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
 {
   condition ? (
-    <Wrapper>
+    <Wrapper {...props}>
       <slot />
     </Wrapper>
   ) : (

src/components/Link.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a href={href}><slot /></a>

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

@@ -4,6 +4,9 @@ import RichText from "components/RichText/RichText.astro";
 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 Link from "components/Link.astro";
 
 interface Props {
   content: EndpointCollectible["contents"][number];
@@ -13,19 +16,21 @@ const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.curren
 const {
   content: { content, range },
 } = Astro.props;
+
+const href =
+  content.relationTo === "pages" ? getLocalizedUrl(`/pages/${content.value.slug}`) : undefined;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div id="row">
+<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
+  <div id="row">
     <div id="title">
       {
         content.relationTo === "generic-contents" ? (
           <p>{getLocalizedMatch(content.value.translations).name}</p>
         ) : content.relationTo === "pages" ? (
-        <a href={getLocalizedUrl(`/pages/${content.value.slug}`)} class="pressable-link">
+          <p>{formatInlineTitle(getLocalizedMatch(content.value.translations))}</p>
-          {formatInlineTitle(getLocalizedMatch(content.value.translations))}
-        </a>
         ) : (
           <ErrorMessage
             title="Unknown content type"
@@ -57,27 +62,70 @@ const {
         )
       }
     </div>
-</div>
+
+    {
+      content.relationTo === "pages" && content.value.tagGroups.length > 0 && (
+        <div id="tags">
+          <InlineTagGroups tagGroups={content.value.tagGroups} />
+        </div>
+      )
+    }
+  </div>
+</ConditionalWrapper>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
 <style>
+  :global(a) > #row {
+    transition-duration: 150ms;
+    transition-property: border-color, box-shadow;
+
+    & > #title {
+      transition-duration: 150ms;
+      transition-property: text-decoration-color, color;
+
+      text-decoration: underline dotted 0.1em;
+      text-decoration-color: transparent;
+    }
+
+    &:hover {
+      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 {
+      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 {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 1em;
-    align-items: center;
-    padding: 1em;
     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-top: 1px solid var(--color-elevation-2);
+    border: 1px solid var(--color-base-300);
+    padding: 1.5em;
+
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 1em;
+    align-items: center;
 
     & > #title {
-      padding-bottom: 0.2em;
+      font-weight: 600;
     }
 
     & > #dots {
@@ -87,7 +135,8 @@ const {
       height: 0.6em;
     }
 
-    # > #range {
+    & > #tags {
+      grid-column: span 2;
     }
   }
 </style>

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

@@ -42,6 +42,6 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
   #contents {
     display: grid;
-    gap: 8px;
+    gap: 1em;
   }
 </style>