feat: add VideoGame type, schema and query

martapanc · Jul 23, 2023 · ffbf797 · ffbf797
1 parent 56d8771
commit ffbf797
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 39 deletions.
diff --git a/sanity/deskStructure.js b/sanity/deskStructure.js
@@ -1,5 +1,5 @@
 const workSection = ['job', 'language', 'publication', 'school', 'skill'];
-const freeTimeSection = ['book', 'podcast'];
+const freeTimeSection = ['book', 'podcast', 'videoGame'];
 const sharedSection = ['shortText', 'skillIcon'];
 
 export const customStructure = (S) =>

diff --git a/sanity/schema.ts b/sanity/schema.ts
@@ -9,6 +9,7 @@ import school from '../src/schemas/school';
 import shortText from '../src/schemas/shortText';
 import skill from '../src/schemas/skill';
 import skillIcon from '../src/schemas/skillIcon';
+import videoGame from '../src/schemas/videoGame';
 
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [
@@ -21,5 +22,6 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     shortText,
     skill,
     skillIcon,
+    videoGame,
   ],
 };
diff --git a/src/app/(public)/about/free-time/page.tsx b/src/app/(public)/about/free-time/page.tsx
@@ -2,14 +2,17 @@ import * as React from 'react';
 
 import Books from '@/components/organisms/about-free-time/Books';
 import Podcasts from '@/components/organisms/about-free-time/Podcasts';
+import VideoGames from '@/components/organisms/about-free-time/VideoGames';
 
 import { booksQuery } from '@/queries/books';
 import { podcastsQuery } from '@/queries/podcasts';
+import { videoGamesQuery } from '@/queries/video-games';
 
 import { sanityClient } from '../../../../../sanity/lib/client';
 
 import { Book } from '@/types/Book';
 import { Podcast } from '@/types/Podcast';
+import { VideoGame } from '@/types/VideoGame';
 
 export const metadata = {
   title: 'About my Free Time | MartaCodes.it',
@@ -21,14 +24,17 @@ const getData = async () => {
 
   const podcasts: Podcast[] = await sanityClient.fetch(podcastsQuery);
 
+  const videoGames: VideoGame[] = await sanityClient.fetch(videoGamesQuery);
+
   return {
     books,
     podcasts,
+    videoGames,
   };
 };
 
 const AboutFreeTimePage = async () => {
-  const { books, podcasts } = await getData();
+  const { books, podcasts, videoGames } = await getData();
 
   return (
     <main className='min-h-main'>
@@ -48,6 +54,8 @@ const AboutFreeTimePage = async () => {
           <Books books={books} />
 
           <Podcasts podcasts={podcasts} />
+
+          <VideoGames videoGames={videoGames} />
         </div>
       </section>
     </main>

diff --git a/src/components/organisms/about-free-time/Books.tsx b/src/components/organisms/about-free-time/Books.tsx
@@ -11,27 +11,35 @@ export interface BookProps {
 
 const Books = ({ books }: BookProps) => {
   return (
-    <div className=''>
+    <div className='mb-6'>
       <div className='m-2 flex'>
         <h2>Best books ever written</h2>
       </div>
 
-      <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-4 overflow-x-auto px-4 pb-14 md:mx-0 md:w-full md:px-0'>
-        {books.map((book) => (
-          <li
-            key={book._id}
-            className='h-[128px] w-[100px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-blue-400 hover:to-blue-700'
-          >
-            <a
-              href={book.goodreadsLink}
-              target='_blank'
-              rel='noopener noreferrer'
+      <div className='rounded p-3 dark:bg-slate-900'>
+        <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-4 overflow-x-auto px-4 pb-6 md:mx-0 md:w-full md:px-0'>
+          {books.map((book) => (
+            <li
+              key={book._id}
+              className='h-[128px] w-[100px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-blue-400 hover:to-blue-700'
             >
-              <Image alt={book.title} src={book.cover} width={90} height={90} />
-            </a>
-          </li>
-        ))}
-      </ul>
+              <a
+                href={book.goodreadsLink}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Image
+                  className='rounded-md'
+                  alt={book.title}
+                  src={book.cover}
+                  width={90}
+                  height={90}
+                />
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };

diff --git a/src/components/organisms/about-free-time/Podcasts.tsx b/src/components/organisms/about-free-time/Podcasts.tsx
@@ -11,32 +11,35 @@ export interface PodcastProps {
 
 const Podcasts = ({ podcasts }: PodcastProps) => {
   return (
-    <div className=''>
+    <div className='mb-6'>
       <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'
+      <div className='rounded p-3 dark:bg-slate-900'>
+        <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 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'
             >
-              <Image
-                alt={podcast.name}
-                src={podcast.cover}
-                width={130}
-                height={130}
-              />
-            </a>
-          </li>
-        ))}
-      </ul>
+              <a
+                href={podcast.mediaLink}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Image
+                  className='rounded-md'
+                  alt={podcast.name}
+                  src={podcast.cover}
+                  width={130}
+                  height={130}
+                />
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };

diff --git a/src/components/organisms/about-free-time/VideoGames.tsx b/src/components/organisms/about-free-time/VideoGames.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import Image from 'next/image';
+import * as React from 'react';
+
+import { VideoGame } from '@/types/VideoGame';
+
+export interface VideoGameProps {
+  videoGames: VideoGame[];
+}
+
+const VideoGames = ({ videoGames }: VideoGameProps) => {
+  return (
+    <div className='mb-6'>
+      <div className='m-2 flex'>
+        <h2>Games I'm addicted to</h2>
+      </div>
+
+      <div className='rounded p-3 dark:bg-slate-900'>
+        <ul className='scroll-mandatory relative -mx-4 flex w-[100vw] snap-x gap-3 overflow-x-auto px-4 pb-6 md:mx-0 md:w-full md:px-0'>
+          {videoGames.map((game) => (
+            <li
+              key={game._id}
+              className='h-[180px] w-[136px] shrink-0 snap-center overflow-hidden rounded-lg bg-transparent p-1 transition-all hover:bg-gradient-to-r hover:from-purple-300 hover:to-purple-700'
+            >
+              <a
+                href={game.mediaLink}
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                <Image
+                  className='rounded-md'
+                  alt={game.title}
+                  src={game.cover}
+                  width={130}
+                  height={130}
+                />
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default VideoGames;
diff --git a/src/pages/api/hobbies.ts b/src/pages/api/hobbies.ts
@@ -2,20 +2,25 @@ import { NextApiRequest, NextApiResponse } from 'next';
 
 import { booksQuery } from '@/queries/books';
 import { podcastsQuery } from '@/queries/podcasts';
+import { videoGamesQuery } from '@/queries/video-games';
 
 import { sanityClient } from '../../../sanity/lib/client';
 
 import { Book } from '@/types/Book';
 import { Podcast } from '@/types/Podcast';
+import { VideoGame } from '@/types/VideoGame';
 
 const hobbiesApi = async (req: NextApiRequest, res: NextApiResponse) => {
   const books: Book[] = await sanityClient.fetch(booksQuery);
 
   const podcasts: Podcast[] = await sanityClient.fetch(podcastsQuery);
 
+  const videoGames: VideoGame[] = await sanityClient.fetch(videoGamesQuery);
+
   res.status(200).json({
     books,
     podcasts,
+    videoGames,
   });
 };
 

diff --git a/src/queries/video-games.ts b/src/queries/video-games.ts
@@ -0,0 +1,10 @@
+import { groq } from 'next-sanity';
+
+export const videoGamesQuery = groq`
+*[_type == "videoGame"] | order(year desc) {
+  _id,
+  title,
+  year,
+  "cover": cover.asset->url,
+  mediaLink,
+}`;
diff --git a/src/schemas/videoGame.ts b/src/schemas/videoGame.ts
@@ -0,0 +1,36 @@
+import { defineField, defineType } from 'sanity';
+
+export default defineType({
+  name: 'videoGame',
+  title: 'Video Game',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'year',
+      title: 'Year',
+      type: 'number',
+    }),
+    defineField({
+      name: 'cover',
+      title: 'Cover',
+      type: 'image',
+    }),
+    defineField({
+      name: 'mediaLink',
+      title: 'Media Link',
+      type: 'string',
+    }),
+  ],
+  orderings: [
+    {
+      title: 'Year',
+      name: 'yearDesc',
+      by: [{ field: 'year', direction: 'desc' }],
+    },
+  ],
+});
diff --git a/src/types/VideoGame.ts b/src/types/VideoGame.ts
@@ -0,0 +1,7 @@
+export interface VideoGame {
+  _id: string;
+  title: string;
+  year: number;
+  cover: string;
+  mediaLink: string;
+}