feat: add Podcast type, schema and query

sanity/deskStructure.js

@@ -1,5 +1,5 @@
 const workSection = ['job', 'language', 'publication', 'school', 'skill'];
-const freeTimeSection = ['book'];
+const freeTimeSection = ['book', 'podcast'];
 const sharedSection = ['shortText', 'skillIcon'];
 
 export const customStructure = (S) =>

sanity/schema.ts

@@ -3,6 +3,7 @@ import { type SchemaTypeDefinition } from 'sanity';
 import book from '../src/schemas/book';
 import job from '../src/schemas/job';
 import language from '../src/schemas/language';
+import podcast from '../src/schemas/podcast';
 import publication from '../src/schemas/publication';
 import school from '../src/schemas/school';
 import shortText from '../src/schemas/shortText';
@@ -14,6 +15,7 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     book,
     job,
     language,
+    podcast,
     publication,
     school,
     shortText,

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
 
 import Books from '@/components/organisms/about-free-time/Books';
+import Podcasts from '@/components/organisms/about-free-time/Podcasts';
 
 import { booksQuery } from '@/queries/books';
+import { podcastsQuery } from '@/queries/podcasts';
 
 import { sanityClient } from '../../../../../sanity/lib/client';
 
 import { Book } from '@/types/Book';
+import { Podcast } from '@/types/Podcast';
 
 export const metadata = {
   title: 'About my Free Time | MartaCodes.it',
@@ -16,13 +19,16 @@ export const metadata = {
 const getData = async () => {
   const books: Book[] = await sanityClient.fetch(booksQuery);
 
+  const podcasts: Podcast[] = await sanityClient.fetch(podcastsQuery);
+
   return {
     books,
+    podcasts,
   };
 };
 
 const AboutFreeTimePage = async () => {
-  const { books } = await getData();
+  const { books, podcasts } = await getData();
 
   return (
     <main className='min-h-main'>
@@ -40,6 +46,8 @@ const AboutFreeTimePage = async () => {
           </div>
 
           <Books books={books} />
+
+          <Podcasts podcasts={podcasts} />
         </div>
       </section>
     </main>

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

@@ -0,0 +1,44 @@
+'use client';
+
+import Image from 'next/image';
+import * as React from 'react';
+
+import { Podcast } from '@/types/Podcast';
+
+export interface PodcastProps {
+  podcasts: Podcast[];
+}
+
+const Podcasts = ({ podcasts }: PodcastProps) => {
+  return (
+    <div className=''>
+      <div className='m-2 flex'>
+        <h2>Podcasts I follow</h2>
+      </div>
+
+      <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-14 md:mx-0 md:w-full md:px-0'>
+        {podcasts.map((podcast) => (
+          <li
+            key={podcast._id}
+            className='h-[136px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-orange-400 hover:to-orange-700'
+          >
+            <a
+              href={podcast.mediaLink}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              <Image
+                alt={podcast.name}
+                src={podcast.cover}
+                width={130}
+                height={130}
+              />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Podcasts;

src/pages/api/hobbies.ts

@@ -1,16 +1,21 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { booksQuery } from '@/queries/books';
+import { podcastsQuery } from '@/queries/podcasts';
 
 import { sanityClient } from '../../../sanity/lib/client';
 
 import { Book } from '@/types/Book';
+import { Podcast } from '@/types/Podcast';
 
 const hobbiesApi = async (req: NextApiRequest, res: NextApiResponse) => {
   const books: Book[] = await sanityClient.fetch(booksQuery);
 
+  const podcasts: Podcast[] = await sanityClient.fetch(podcastsQuery);
+
   res.status(200).json({
     books,
+    podcasts,
   });
 };
 

src/queries/podcasts.ts

@@ -0,0 +1,11 @@
+import { groq } from 'next-sanity';
+
+export const podcastsQuery = groq`
+*[_type == "podcast"] | order(author asc) {
+  _id,
+  name,
+  author,
+  language,
+  "cover": cover.asset->url,
+  mediaLink,
+}`;

src/schemas/podcast.ts

@@ -0,0 +1,47 @@
+import { defineField, defineType } from 'sanity';
+
+export default defineType({
+  name: 'podcast',
+  title: 'Podcast',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'author',
+      title: 'Author',
+      type: 'string',
+    }),
+    defineField({
+      name: 'language',
+      title: 'language',
+      type: 'string',
+      options: {
+        list: [
+          { title: 'En', value: 'en' },
+          { title: 'It', value: 'it' },
+        ],
+      },
+    }),
+    defineField({
+      name: 'cover',
+      title: 'Cover',
+      type: 'image',
+    }),
+    defineField({
+      name: 'mediaLink',
+      title: 'Media Link',
+      type: 'string',
+    }),
+  ],
+  orderings: [
+    {
+      title: 'Author',
+      name: 'authorAsc',
+      by: [{ field: 'author', direction: 'asc' }],
+    },
+  ],
+});

src/types/Podcast.ts

@@ -0,0 +1,8 @@
+export interface Podcast {
+  _id: string;
+  name: string;
+  author: string;
+  language: string;
+  cover: string;
+  mediaLink: string;
+}