Moved priceinfo to its own component

src/components/Metadata.astro

@@ -41,7 +41,7 @@ if (values.length === 0) return;
       flex-wrap: wrap;
       gap: 6px;
       place-items: center;
-      translate: 0px 3px;
+      translate: 0px 2px;
 
       &.with-border {
         & > div,

src/pages/[locale]/collectibles/[slug]/_components/PageInfo.astro

@@ -54,20 +54,15 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
 <style>
   #container {
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
     gap: 0.5em 1em;
-    align-items: start;
-
-    @media (max-width: 35em) {
-      grid-template-columns: 1fr;
-    }
+    flex-wrap: wrap;
 
     & > #values {
       display: flex;
       flex-direction: column;
-      gap: 0.5em;
-      margin-top: 0.5em;
+      gap: 6px;
+      translate: 0px 6px;
     }
   }
 </style>

src/pages/[locale]/collectibles/[slug]/_components/PriceInfo.astro

@@ -0,0 +1,37 @@
+---
+import Metadata from "components/Metadata.astro";
+import { getI18n } from "src/i18n/i18n";
+import { convert } from "src/utils/currencies";
+
+interface Props {
+  price: {
+    amount: number;
+    currency: string;
+  };
+}
+
+const { price } = Astro.props;
+const { formatPrice, t } = await getI18n(Astro.locals.currentLocale);
+
+const preferredCurrency = Astro.locals.currentCurrency;
+
+const convertedPrice = {
+  amount: convert(price.currency, preferredCurrency, price.amount),
+  currency: preferredCurrency,
+};
+
+let priceText = price.amount === 0 ? t("collectibles.price.free") : formatPrice(price);
+
+if (price.amount > 0 && price.currency !== convertedPrice.currency) {
+  priceText += ` (${formatPrice(convertedPrice)})`;
+}
+---
+
+{/* ------------------------------------------- HTML ------------------------------------------- */}
+
+<Metadata
+  icon="material-symbols:sell-outline"
+  title={t("collectibles.price")}
+  values={[{ name: priceText }]}
+  withBorder={false}
+/>

src/pages/[locale]/collectibles/[slug]/_components/SizeInfo.astro

@@ -47,14 +47,10 @@ const { formatInches, formatMillimeters, t } = await getI18n(Astro.locals.curren
 
 <style>
   #size {
-    display: grid;
-    grid-template-columns: auto 1fr;
+    display: flex;
+    gap: 0.5em 1em;
+    flex-wrap: wrap;
     gap: 1em 2em;
-    align-items: start;
-
-    @media (max-width: 35em) {
-      grid-template-columns: 1fr;
-    }
 
     & > #values {
       display: flex;

src/pages/[locale]/collectibles/[slug]/_components/WeightInfo.astro

@@ -1,5 +1,5 @@
 ---
-import TitleIcon from "components/TitleIcon.astro";
+import Metadata from "components/Metadata.astro";
 import { getI18n } from "src/i18n/i18n";
 
 interface Props {
@@ -12,26 +12,9 @@ const { formatPounds, formatGrams, t } = await getI18n(Astro.locals.currentLocal
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<div id="container">
-  <TitleIcon title={t("collectibles.weight")} icon="material-symbols:scale" />
-  <p>{formatGrams(weight)}{" "}({formatPounds(weight)})</p>
-</div>
-
-{/* ------------------------------------------- CSS -------------------------------------------- */}
-
-<style>
-  #container {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5em 1em;
-    align-items: center;
-
-    @media (max-width: 35em) {
-      grid-template-columns: 1fr;
-    }
-
-    & > p {
-      margin-top: 0.5em;
-    }
-  }
-</style>
+<Metadata
+  icon="material-symbols:scale"
+  title={t("collectibles.weight")}
+  values={[{ name: `${formatGrams(weight)} (${formatPounds(weight)})` }]}
+  withBorder={false}
+/>

src/pages/[locale]/collectibles/[slug]/index.astro

@@ -13,16 +13,16 @@ import SubitemSection from "./_components/SubitemSection.astro";
 import ContentsSection from "./_components/ContentsSection/ContentsSection.astro";
 import { formatInlineTitle, formatLocale, formatRichTextToString } from "src/utils/format";
 import AsideLayout from "components/AppLayout/AsideLayout.astro";
-import { convert } from "src/utils/currencies";
 import Attributes from "components/Attributes.astro";
 import type { Attribute } from "src/utils/attributes";
 import { payload } from "src/utils/payload";
 import { sizesToSrcset } from "src/utils/img";
 import RichText from "components/RichText/RichText.astro";
 import SubFilesSection from "./_components/SubFilesSection.astro";
+import PriceInfo from "./_components/PriceInfo.astro";
 
 const slug = Astro.params.slug!;
-const { getLocalizedMatch, getLocalizedUrl, t, formatDate, formatPrice } = await getI18n(
+const { getLocalizedMatch, getLocalizedUrl, t, formatDate } = await getI18n(
   Astro.locals.currentLocale
 );
 
@@ -116,28 +116,6 @@ if (languages.length > 0) {
     withBorder: true,
   });
 }
-
-if (price) {
-  const preferredCurrency = Astro.locals.currentCurrency;
-
-  const convertedPrice = {
-    amount: convert(price.currency, preferredCurrency, price.amount),
-    currency: preferredCurrency,
-  };
-
-  let priceText = price.amount === 0 ? t("collectibles.price.free") : formatPrice(price);
-
-  if (price.amount > 0 && price.currency !== convertedPrice.currency) {
-    priceText += ` (${formatPrice(convertedPrice)})`;
-  }
-
-  additionalAttributes.push({
-    title: t("collectibles.price"),
-    icon: "material-symbols:sell-outline",
-    values: [{ name: priceText }],
-    withBorder: false,
-  });
-}
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
@@ -211,6 +189,8 @@ if (price) {
 
       <div id="attributes">
         <Attributes attributes={[...attributes, ...additionalAttributes]}>
+          {price && <PriceInfo price={price} />}
+
           <AvailabilityInfo urls={urls} price={price !== undefined} releaseDate={releaseDate} />
 
           {size && <SizeInfo size={size} />}