add music lists

Telefonica · Nov 25, 2024 · b7eecb7 · b7eecb7
1 parent c6e6f0d
commit b7eecb7
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 0 deletions.
diff --git a/src/pages/advent-calendar-2024/assets/images/chillmusic.png b/src/pages/advent-calendar-2024/assets/images/chillmusic.png
diff --git a/src/pages/advent-calendar-2024/assets/images/electronicmusic.png b/src/pages/advent-calendar-2024/assets/images/electronicmusic.png
diff --git a/src/pages/advent-calendar-2024/assets/images/punkmusic.png b/src/pages/advent-calendar-2024/assets/images/punkmusic.png
diff --git a/src/pages/advent-calendar-2024/components/static-content/music-list.jsx b/src/pages/advent-calendar-2024/components/static-content/music-list.jsx
@@ -0,0 +1,111 @@
+import {
+    Stack,
+    Image,
+    MediaCard,
+    useScreenSize,
+    ButtonLink,
+    Carousel,
+  } from "@telefonica/mistica";
+  import ContentWrapper from "../content-wrapper";
+
+  const MusicLists = () => {
+    const { isMobile } = useScreenSize();
+
+    return (
+      <ContentWrapper>
+        <Stack space={16}>
+          <Carousel
+            items={[
+              <MediaCard
+                asset={
+                  <svg
+                    width="40"
+                    height="40"
+                    viewBox="0 0 64 64"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="white"
+                  >
+                    <path d="M32 0C14.3 0 0 14.337 0 32C0 49.7 14.337 64 32 64C49.7 64 64 49.663 64 32C64 14.337 49.663 0 32 0ZM46.68 46.184C46.107 47.14 44.883 47.407 43.927 46.834C36.395 42.246 26.952 41.214 15.787 43.737C14.717 43.967 13.647 43.317 13.417 42.247C13.187 41.177 13.837 40.107 14.907 39.877C27.103 37.087 37.577 38.271 45.989 43.433C46.918 43.986 47.242 45.251 46.677 46.186L46.68 46.184ZM50.58 37.467C49.854 38.652 48.324 38.997 47.14 38.307C38.538 33.031 25.424 31.502 15.255 34.56C13.917 34.942 12.541 34.216 12.158 32.916C11.776 31.578 12.502 30.202 13.84 29.819C25.462 26.302 39.914 27.984 49.816 34.063C50.963 34.751 51.306 36.28 50.581 37.466L50.58 37.467ZM50.924 28.367C40.601 22.25 23.588 21.677 13.724 24.659C12.156 25.156 10.474 24.239 9.977 22.671C9.48 21.103 10.397 19.421 11.965 18.924C23.282 15.484 42.092 16.171 53.945 23.206C55.36 24.046 55.818 25.882 54.977 27.296C54.212 28.749 52.339 29.208 50.924 28.366V28.367Z" />
+                  </svg>
+                }
+                title="Christmas Chill"
+                media={
+                  <Image
+                    aspectRatio="1:1"
+                    src={require("../../assets/images/chillmusic.png")}
+                  />
+                }
+                buttonLink={
+                  <ButtonLink
+                    small
+                    href="https://open.spotify.com/playlist/37i9dQZF1DX2zhLcnFr1qI?si=c3bc02b6443441ee"
+                  >
+                    Listen
+                  </ButtonLink>
+                }
+              />,
+              <MediaCard
+                asset={
+                    <svg
+                    width="40"
+                    height="40"
+                    viewBox="0 0 64 64"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="white"
+                    >
+                    <path d="M32 0C14.3 0 0 14.337 0 32C0 49.7 14.337 64 32 64C49.7 64 64 49.663 64 32C64 14.337 49.663 0 32 0ZM46.68 46.184C46.107 47.14 44.883 47.407 43.927 46.834C36.395 42.246 26.952 41.214 15.787 43.737C14.717 43.967 13.647 43.317 13.417 42.247C13.187 41.177 13.837 40.107 14.907 39.877C27.103 37.087 37.577 38.271 45.989 43.433C46.918 43.986 47.242 45.251 46.677 46.186L46.68 46.184ZM50.58 37.467C49.854 38.652 48.324 38.997 47.14 38.307C38.538 33.031 25.424 31.502 15.255 34.56C13.917 34.942 12.541 34.216 12.158 32.916C11.776 31.578 12.502 30.202 13.84 29.819C25.462 26.302 39.914 27.984 49.816 34.063C50.963 34.751 51.306 36.28 50.581 37.466L50.58 37.467ZM50.924 28.367C40.601 22.25 23.588 21.677 13.724 24.659C12.156 25.156 10.474 24.239 9.977 22.671C9.48 21.103 10.397 19.421 11.965 18.924C23.282 15.484 42.092 16.171 53.945 23.206C55.36 24.046 55.818 25.882 54.977 27.296C54.212 28.749 52.339 29.208 50.924 28.366V28.367Z" />
+                    </svg>
+                }
+                title="Punk Christmas"
+                media={
+                  <Image
+                    aspectRatio="1:1"
+                    src={require("../../assets/images/punkmusic.png")}
+                  />
+                }
+                buttonLink={
+                  <ButtonLink
+                    small
+                    href="https://open.spotify.com/playlist/37i9dQZF1DX3N4mXY2MuSz?si=mFWaRSQVTp-dGUXdYTZmjw"
+                  >
+                    Listen
+                  </ButtonLink>
+                }
+              />,
+              <MediaCard
+                asset={
+                    <svg
+                    width="40"
+                    height="40"
+                    viewBox="0 0 64 64"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="white"
+                    >
+                  <path d="M32 0C14.3 0 0 14.337 0 32C0 49.7 14.337 64 32 64C49.7 64 64 49.663 64 32C64 14.337 49.663 0 32 0ZM46.68 46.184C46.107 47.14 44.883 47.407 43.927 46.834C36.395 42.246 26.952 41.214 15.787 43.737C14.717 43.967 13.647 43.317 13.417 42.247C13.187 41.177 13.837 40.107 14.907 39.877C27.103 37.087 37.577 38.271 45.989 43.433C46.918 43.986 47.242 45.251 46.677 46.186L46.68 46.184ZM50.58 37.467C49.854 38.652 48.324 38.997 47.14 38.307C38.538 33.031 25.424 31.502 15.255 34.56C13.917 34.942 12.541 34.216 12.158 32.916C11.776 31.578 12.502 30.202 13.84 29.819C25.462 26.302 39.914 27.984 49.816 34.063C50.963 34.751 51.306 36.28 50.581 37.466L50.58 37.467ZM50.924 28.367C40.601 22.25 23.588 21.677 13.724 24.659C12.156 25.156 10.474 24.239 9.977 22.671C9.48 21.103 10.397 19.421 11.965 18.924C23.282 15.484 42.092 16.171 53.945 23.206C55.36 24.046 55.818 25.882 54.977 27.296C54.212 28.749 52.339 29.208 50.924 28.366V28.367Z" />
+                </svg>
+              }
+                title="Electronic Christmas"
+                media={
+                  <Image
+                    aspectRatio="1:1"
+                    src={require("../../assets/images/electronicmusic.png")}
+                  />
+                }
+                buttonLink={
+                  <ButtonLink
+                    small
+                    href="https://open.spotify.com/playlist/0iQHZpckYQeEHluLqmGHRc?si=Ej-QL4_YQhVWlUlEMbuFA"
+                  >
+                    Listen
+                  </ButtonLink>
+                }
+              />,
+            ]}
+          />
+        </Stack>
+      </ContentWrapper>
+    );
+  };
+
+  export default MusicLists;
+
diff --git a/src/pages/advent-calendar-2024/utils/content-config.jsx b/src/pages/advent-calendar-2024/utils/content-config.jsx
@@ -25,6 +25,7 @@ import CandyCrush from "../components/games/candy";
 import AdventCalendarHistory from "../components/static-content/advent-calendar-history";
 import ChristmasGreetings from "../components/static-content/christmas-greetings";
 import TopContributors from "../components/static-content/top-contributors";
+import MusicLists from "../components/static-content/music-list";
 import {
   Illustration02,
   Illustration03,
@@ -292,7 +293,13 @@ const contentByDate = {
         </Text1>
       </>
     ),
+  },  "2024-12-24": {
+    repeatable: true,
+    content: <MusicLists />,
+    title: "Happy Christmas!",
+    description: "And a merry new year",
   },
+
   "2024-12-25": {
     repeatable: true,
     content: <ChristmasGreetings />,