feat: add Spotify Music widget

src/app/(public)/about/free-time/page.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import Books from '@/components/organisms/about-free-time/Books';
+import Music from '@/components/organisms/about-free-time/Music';
 import Podcasts from '@/components/organisms/about-free-time/Podcasts';
 import TvSeries from '@/components/organisms/about-free-time/TvSeries';
 import VideoGames from '@/components/organisms/about-free-time/VideoGames';
@@ -64,6 +65,8 @@ const AboutFreeTimePage = async () => {
           <VideoGames videoGames={videoGames} />
 
           <TvSeries tvSeries={tvSeries} />
+
+          <Music />
         </div>
       </section>
     </main>

src/components/organisms/about-free-time/Books.tsx

@@ -12,7 +12,7 @@ export interface BookProps {
 const Books = ({ books }: BookProps) => {
   return (
     <div className='mb-6'>
-      <div className='m-2 flex'>
+      <div className='my-2 flex'>
         <h2>Best books ever written</h2>
       </div>
 

src/components/organisms/about-free-time/Music.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+
+const Music = () => {
+  const { theme } = useTheme();
+  const playlistId = '7Any464BbUACFDQUm6bFhf';
+
+  const widgetTheme = theme === 'dark' ? '&theme=0' : '';
+
+  return (
+    <div className='mb-6'>
+      <div className='mb-6 mt-2 flex'>
+        <h2>Very old music I listen to</h2>
+      </div>
+
+      <div className='rounded dark:bg-slate-900'>
+        <iframe
+          src={`https://open.spotify.com/embed/playlist/${playlistId}?utm_source=generator${widgetTheme}`}
+          style={{ borderRadius: 8 }}
+          width='100%'
+          height='440'
+          frameBorder={0}
+          allow='autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture'
+          loading='lazy'
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default Music;

src/components/organisms/about-free-time/Podcasts.tsx

@@ -12,7 +12,7 @@ export interface PodcastProps {
 const Podcasts = ({ podcasts }: PodcastProps) => {
   return (
     <div className='mb-6'>
-      <div className='m-2 flex'>
+      <div className='my-2 flex'>
         <h2>Podcasts I follow</h2>
       </div>
 

src/components/organisms/about-free-time/TvSeries.tsx

@@ -12,7 +12,7 @@ export interface TvSeriesProps {
 const TvSeries = ({ tvSeries }: TvSeriesProps) => {
   return (
     <div className='mb-6'>
-      <div className='m-2 flex'>
+      <div className='my-2 flex'>
         <h2>Favourite TV Series</h2>
       </div>
 

src/components/organisms/about-free-time/VideoGames.tsx

@@ -12,7 +12,7 @@ export interface VideoGameProps {
 const VideoGames = ({ videoGames }: VideoGameProps) => {
   return (
     <div className='mb-6'>
-      <div className='m-2 flex'>
+      <div className='my-2 flex'>
         <h2>Games I'm addicted to</h2>
       </div>