feat: add language type, schema and query

sanity/schema.ts

@@ -1,11 +1,12 @@
 import { type SchemaTypeDefinition } from 'sanity';
 
 import job from '../src/schemas/job';
+import language from '../src/schemas/language';
 import school from '../src/schemas/school';
 import shortText from '../src/schemas/shortText';
 import skill from '../src/schemas/skill';
 import skillIcon from '../src/schemas/skillIcon';
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [job, school, shortText, skill, skillIcon],
+  types: [job, language, school, shortText, skill, skillIcon],
 };

src/app/(public)/about/page.tsx

@@ -3,16 +3,19 @@ import Image from 'next/image';
 import * as React from 'react';
 
 import Education from '@/components/organisms/Education/Education';
+import Languages from '@/components/organisms/Languages/Languages';
 import WorkExperience from '@/components/organisms/WorkExperience/WorkExperience';
 
 import { jobsQuery } from '@/queries/jobs';
+import { languageQuery } from '@/queries/languages';
 import { schoolsQuery } from '@/queries/schools';
 import { shortTextQuery } from '@/queries/short-texts';
 import { skillQuery } from '@/queries/skills';
 
 import { sanityClient } from '../../../../sanity/lib/client';
 
 import { Job } from '@/types/Job';
+import { Language } from '@/types/Language';
 import { School } from '@/types/School';
 import { ShortText } from '@/types/ShortText';
 import { Skill } from '@/types/Skill';
@@ -26,6 +29,8 @@ export const metadata = {
 const getData = async () => {
   const jobs: Job[] = await sanityClient.fetch(jobsQuery);
 
+  const languages: Language[] = await sanityClient.fetch(languageQuery);
+
   const schools: School[] = await sanityClient.fetch(schoolsQuery);
 
   const skills: Skill[] = await sanityClient.fetch(skillQuery);
@@ -34,14 +39,15 @@ const getData = async () => {
 
   return {
     jobs,
+    languages,
     schools,
     shortTexts,
     skills,
   };
 };
 
 const AboutPage = async () => {
-  const { jobs, schools, shortTexts, skills } = await getData();
+  const { jobs, languages, schools, shortTexts, skills } = await getData();
 
   const softwareDevelopment: ShortText | undefined = shortTexts.find(
     (item) => item.name === 'software-development'
@@ -115,6 +121,8 @@ const AboutPage = async () => {
           <WorkExperience jobs={jobs} />
 
           <Education schools={schools} />
+
+          <Languages languages={languages} />
         </div>
       </section>
     </main>

src/components/organisms/Languages/Languages.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import Image from 'next/image';
+import * as React from 'react';
+
+import { Language } from '@/types/Language';
+
+export interface LanguageProps {
+  languages: Language[];
+}
+
+const Languages = ({ languages }: LanguageProps) => {
+  return (
+    <div>
+      <div className='m-2 flex'>
+        <h2>Languages</h2>
+      </div>
+
+      <div className='flex flex-col md:w-full md:flex-row md:justify-between'>
+        {languages.map((language) => (
+          <div
+            key={language.id}
+            className='mb-4 flex flex-row items-center rounded-md p-4 shadow-md dark:bg-slate-900 md:w-64'
+          >
+            <Image
+              src={language.flagUrl}
+              alt={language.name}
+              width={40}
+              height={40}
+            />
+
+            <span className='ms-4 font-semibold'>{language.level}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Languages;

src/queries/languages.ts

@@ -0,0 +1,9 @@
+import { groq } from 'next-sanity';
+
+export const languageQuery = groq`
+*[_type == "language"] | order(id asc) {
+  _id,
+  name,
+  level,
+  "flagUrl": flag.asset->url
+}`;

src/schemas/language.ts

@@ -0,0 +1,36 @@
+import { defineField, defineType } from 'sanity';
+
+export default defineType({
+  name: 'language',
+  title: 'Language',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'id',
+      title: 'Id',
+      type: 'number',
+    }),
+    defineField({
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'level',
+      title: 'Level',
+      type: 'string',
+    }),
+    defineField({
+      name: 'flag',
+      title: 'Icons',
+      type: 'image',
+    }),
+  ],
+  orderings: [
+    {
+      title: 'Custom Order',
+      name: 'custom',
+      by: [{ field: 'id', direction: 'asc' }],
+    },
+  ],
+});

src/types/Language.ts

@@ -0,0 +1,6 @@
+export interface Language {
+  id: number;
+  name: string;
+  level: string;
+  flagUrl: string;
+}