From 7ae3e093a4ce5bba030ffc798e54596d4d8c0254 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:48:29 +0100
Subject: [PATCH] Improve file preview

---
 .../Previews/CollectiblePreview.astro         |  66 ++-------
 src/components/Previews/GenericPreview.astro  | 132 ++++++++++++++++++
 src/components/Previews/PagePreview.astro     |  65 ++-------
 .../ContentsSection/InlineTagGroups.astro     |  52 +++++++
 4 files changed, 205 insertions(+), 110 deletions(-)
 create mode 100644 src/components/Previews/GenericPreview.astro
 create mode 100644 src/pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro

diff --git a/src/components/Previews/CollectiblePreview.astro b/src/components/Previews/CollectiblePreview.astro
index 35d4022..bb892fa 100644
--- a/src/components/Previews/CollectiblePreview.astro
+++ b/src/components/Previews/CollectiblePreview.astro
@@ -1,4 +1,5 @@
 ---
+import GenericPreview from "components/Previews/GenericPreview.astro";
 import { getI18n } from "src/i18n/i18n";
 import type { EndpointCollectiblePreview } from "src/shared/payload/payload-sdk";
 
@@ -9,7 +10,7 @@ interface Props {
 const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 
 const {
-  collectible: { slug, translations, thumbnail },
+  collectible: { slug, translations, thumbnail, tagGroups },
 } = Astro.props;
 
 const { title, pretitle, subtitle } = getLocalizedMatch(translations);
@@ -17,57 +18,12 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<a href={getLocalizedUrl(`/collectibles/${slug}`)} class="pressable">
-  {
-    thumbnail && (
-      <img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
-    )
-  }
-
-  <p>
-    {pretitle && <span id="pretitle">{pretitle}&nbsp;</span>}
-    <span id="title">{title}&nbsp;</span>
-    {subtitle && <span id="subtitle">{subtitle}</span>}
-  </p>
-</a>
-
-{/* ------------------------------------------- CSS -------------------------------------------- */}
-
-<style>
-  a {
-    padding: 1em;
-    border-radius: 1em;
-    color: var(--color-base-1000);
-  }
-
-  img {
-    width: 100%;
-    height: auto;
-    margin-bottom: 1em;
-  }
-
-  p {
-    line-height: 0.8;
-    display: grid;
-    overflow-wrap: anywhere;
-    font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
-    font-weight: 800;
-
-    & > #pretitle {
-      font-family: var(--font-sans-serifs);
-      font-weight: 400;
-      margin-bottom: 0.8em;
-    }
-
-    & > #title {
-      font-family: var(--font-serif);
-      font-size: 200%;
-    }
-
-    & > #subtitle {
-      font-family: var(--font-serif);
-      font-weight: 600;
-      margin-top: 0.5em;
-    }
-  }
-</style>
+<GenericPreview
+  title={title}
+  pretitle={pretitle}
+  subtitle={subtitle}
+  thumbnail={thumbnail}
+  href={getLocalizedUrl(`/collectibles/${slug}`)}
+  tagGroups={tagGroups}
+  disableRoundedTop
+/>
diff --git a/src/components/Previews/GenericPreview.astro b/src/components/Previews/GenericPreview.astro
new file mode 100644
index 0000000..15865b3
--- /dev/null
+++ b/src/components/Previews/GenericPreview.astro
@@ -0,0 +1,132 @@
+---
+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";
+
+interface Props {
+  thumbnail?: PayloadImage | undefined;
+  pretitle?: string | undefined;
+  title: string;
+  subtitle?: string | undefined;
+  href?: string | undefined;
+  tagGroups?: EndpointTagsGroup[];
+  disableRoundedTop?: boolean;
+}
+
+const {
+  thumbnail,
+  title,
+  pretitle,
+  subtitle,
+  href,
+  tagGroups = [],
+  disableRoundedTop = false,
+} = Astro.props;
+---
+
+<ConditionalWrapper condition={href !== undefined} wrapper={Link} props={{ href: href! }}>
+  <div id="card" class:list={{ "rounded-top": !disableRoundedTop }}>
+    {
+      thumbnail && (
+        <img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
+      )
+    }
+
+    <div>
+      <p>
+        {pretitle && <span id="pretitle">{pretitle}&nbsp;</span>}
+        <span id="title">{title}&nbsp;</span>
+        {subtitle && <span id="subtitle">{subtitle}</span>}
+      </p>
+
+      {
+        tagGroups.length > 0 && (
+          <>
+            {subtitle && <hr />}
+            <div id="tags">
+              <InlineTagGroups tagGroups={tagGroups} />
+            </div>
+          </>
+        )
+      }
+    </div>
+  </div>
+</ConditionalWrapper>
+
+<style>
+  #card {
+    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);
+
+    &.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;
+
+    &:hover {
+      border-color: var(--color-base-650);
+      box-shadow: 0 2px 2px var(--color-shadow-2);
+    }
+
+    &:active {
+      border-color: var(--color-base-1000);
+      box-shadow: 0 6px 12px 2px var(--color-shadow-2);
+    }
+
+    & > img {
+      width: 100%;
+      height: auto;
+    }
+
+    & > div {
+      padding: 1em;
+      padding-top: 1.5em;
+      display: flex;
+      flex-direction: column;
+      gap: 1.2em;
+
+      & > p {
+        line-height: 0.8;
+        display: grid;
+        overflow-wrap: anywhere;
+        font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
+        font-weight: 800;
+
+        & > #pretitle {
+          font-family: var(--font-sans-serifs);
+          font-weight: 400;
+          margin-bottom: 0.8em;
+        }
+
+        & > #title {
+          font-family: var(--font-serif);
+          font-size: 200%;
+        }
+
+        & > #subtitle {
+          font-family: var(--font-serif);
+          font-weight: 600;
+          margin-top: 0.5em;
+        }
+      }
+
+      & > hr {
+        border: none;
+        border-top: 2px dotted var(--color-base-500);
+        width: 100%;
+        margin: unset;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Previews/PagePreview.astro b/src/components/Previews/PagePreview.astro
index 929a8c2..0bc8518 100644
--- a/src/components/Previews/PagePreview.astro
+++ b/src/components/Previews/PagePreview.astro
@@ -1,4 +1,5 @@
 ---
+import GenericPreview from "components/Previews/GenericPreview.astro";
 import { getI18n } from "src/i18n/i18n";
 import type { EndpointPagePreview } from "src/shared/payload/payload-sdk";
 
@@ -9,7 +10,7 @@ interface Props {
 const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
 
 const {
-  page: { slug, translations, thumbnail },
+  page: { slug, translations, thumbnail, tagGroups },
 } = Astro.props;
 
 const { title, pretitle, subtitle } = getLocalizedMatch(translations);
@@ -17,57 +18,11 @@ const { title, pretitle, subtitle } = getLocalizedMatch(translations);
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<a href={getLocalizedUrl(`/pages/${slug}`)} class="pressable">
-  {
-    thumbnail && (
-      <img src={thumbnail.url} width={thumbnail.width} height={thumbnail.height} alt="" />
-    )
-  }
-
-  <p>
-    {pretitle && <span id="pretitle">{pretitle}&nbsp;</span>}
-    <span id="title">{title}&nbsp;</span>
-    {subtitle && <span id="subtitle">{subtitle}</span>}
-  </p>
-</a>
-
-{/* ------------------------------------------- CSS -------------------------------------------- */}
-
-<style>
-  a {
-    padding: 1em;
-    border-radius: 1em;
-    color: var(--color-base-1000);
-  }
-
-  img {
-    width: 100%;
-    height: auto;
-    margin-bottom: 1em;
-  }
-
-  p {
-    line-height: 0.8;
-    display: grid;
-    overflow-wrap: anywhere;
-    font-size: clamp(0.5em, 0.35em + 0.75vw, 1em);
-    font-weight: 800;
-
-    & > #pretitle {
-      font-family: var(--font-sans-serifs);
-      font-weight: 400;
-      margin-bottom: 0.8em;
-    }
-
-    & > #title {
-      font-family: var(--font-serif);
-      font-size: 200%;
-    }
-
-    & > #subtitle {
-      font-family: var(--font-serif);
-      font-weight: 600;
-      margin-top: 0.5em;
-    }
-  }
-</style>
+<GenericPreview
+  title={title}
+  pretitle={pretitle}
+  subtitle={subtitle}
+  thumbnail={thumbnail}
+  href={getLocalizedUrl(`/pages/${slug}`)}
+  tagGroups={tagGroups}
+/>
diff --git a/src/pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro b/src/pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro
new file mode 100644
index 0000000..edb73d1
--- /dev/null
+++ b/src/pages/[locale]/collectibles/_components/ContentsSection/InlineTagGroups.astro
@@ -0,0 +1,52 @@
+---
+import { Icon } from "astro-icon/components";
+import { getI18n } from "src/i18n/i18n";
+import type { EndpointTagsGroup } from "src/shared/payload/payload-sdk";
+
+interface Props {
+  tagGroups: EndpointTagsGroup[];
+}
+
+const { tagGroups } = Astro.props;
+const { getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<div id="tags">
+  {
+    tagGroups.map(({ icon, translations, tags }) => (
+      <div>
+        <Icon name={icon} />
+        <p>{getLocalizedMatch(translations).name}</p>
+        <div>{tags.map(({ translations }) => getLocalizedMatch(translations).name).join(", ")}</div>
+      </div>
+    ))
+  }
+</div>
+
+{/* ------------------------------------------- CSS -------------------------------------------- */}
+
+<style>
+  #tags {
+    display: flex;
+    gap: 0.5em 1.5em;
+    flex-wrap: wrap;
+
+    & > div {
+      font-weight: 400;
+      font-size: 80%;
+      display: flex;
+      gap: 0.5em;
+
+      & > p {
+        color: var(--color-base-750);
+      }
+
+      & > svg {
+        color: var(--color-base-750);
+        flex-shrink: 0;
+      }
+    }
+  }
+</style>