From f6d45f7b9374444ae1ab751a213d86827b64eb8f Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Sun, 13 Aug 2023 20:12:53 +0100
Subject: Adds Scotsoun

---
 src/components/Scotsoun.astro          | 65 ++++++++++++++++++++++++++++++++++
 src/components/ScotsounCdGallery.astro | 20 +++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/components/Scotsoun.astro
 create mode 100644 src/components/ScotsounCdGallery.astro

(limited to 'src/components')

diff --git a/src/components/Scotsoun.astro b/src/components/Scotsoun.astro
new file mode 100644
index 0000000..13c6fa9
--- /dev/null
+++ b/src/components/Scotsoun.astro
@@ -0,0 +1,65 @@
+---
+import translate from '$i18n/translate';
+import tSite from '$i18n/translations/site';
+import tComponent from '$i18n/translations/components/scotsoun';
+import type Locale from '$types/Locale';
+import type Scotsoun from '$types/Scotsoun';
+import PayPalButtons from './PayPalButtons.astro';
+
+interface Props {
+  locale: Locale;
+  scotsoun: Scotsoun;
+}
+
+const { locale, scotsoun } = Astro.props;
+const t = translate(locale);
+---
+
+<section class="section--full-width">
+  <div class="product__header-block">
+    <header>
+      <h1>{scotsoun.title}</h1>
+      {scotsoun?.subtitle && <p class="italic">{scotsoun.subtitle}</p>}
+      {
+        scotsoun?.author && (
+          <p>
+            {t(tSite, { key: 'by' })} {scotsoun.author}
+          </p>
+        )
+      }
+    </header>
+    <div class="product__action-block">
+      <img src={`/images/scotsoun/sscd${scotsoun.scotsounId}.jpg`} />
+      <PayPalButtons successPageUrl={`./${scotsoun.scotsounId}/payment-success-confirmation`} />
+    </div>
+  </div>
+
+  <section>
+    {scotsoun?.description && <p>{scotsoun.description[locale]}</p>}
+
+    {
+      scotsoun?.coverArtist && (
+        <p>{t(tComponent, { key: 'cover-artist', coverArtist: scotsoun.coverArtist })}</p>
+      )
+    }
+
+    {
+      scotsoun?.releaseDate && (
+        <p>{t(tComponent, { key: 'release-date', releaseDate: scotsoun.releaseDate })}</p>
+      )
+    }
+
+    {
+      scotsoun?.trackList && scotsoun.trackList.length > 1 && (
+        <>
+          <h2>Track list</h2>
+          <ol>
+            {scotsoun.trackList.map((track) => (
+              <li>{track}</li>
+            ))}
+          </ol>
+        </>
+      )
+    }
+  </section>
+</section>
diff --git a/src/components/ScotsounCdGallery.astro b/src/components/ScotsounCdGallery.astro
new file mode 100644
index 0000000..12bafb0
--- /dev/null
+++ b/src/components/ScotsounCdGallery.astro
@@ -0,0 +1,20 @@
+---
+import { getAllScotsoun } from '$data/scotsoun';
+
+const scotsoun = await getAllScotsoun();
+---
+
+<ul class="link-gallery link-gallery--scotsoun">
+  {
+    scotsoun.map((scotsounItem) => (
+      <li>
+        <a class="link link-gallery__container" href={`scotsoun/${scotsounItem.scotsounId}`}>
+          <div class="link-gallery__image">
+            <img src={`/images/scotsoun/sscd${scotsounItem.scotsounId}.jpg`} />
+          </div>
+          <p class="link-gallery__title">{scotsounItem.title}</p>
+        </a>
+      </li>
+    ))
+  }
+</ul>
-- 
cgit v1.2.3