add jobboard to sponsor detail

Author: jiyuujin

apps/web/app/composables/useSupabase.ts

@@ -6,13 +6,16 @@ import type { FormSpeaker, FormSponsor, FormAttendee, FormStaff, FormJob } from
 export function useSupabase() {
   const client = useSupabaseClient<Database>()
 
-  async function fetchData(table: Table, options?: { id?: string; detailPageId?: string }) {
+  async function fetchData(table: Table, options?: { id?: string; detailPageId?: string; sponsorId?: string }) {
     if (options?.id) {
       return await client.from(table).select().eq('id', options.id)
     }
     if (options?.detailPageId) {
       return await client.from(table).select().eq('detail_page_id', options.detailPageId)
     }
+    if (options?.sponsorId) {
+      return await client.from(table).select().eq('sponsor_id', options.sponsorId)
+    }
     return await client.from(table).select()
   }
 

apps/web/app/pages/sponsors/[id]/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { createError, useAsyncData, useHead, useRoute, useSponsor } from '#imports'
-import type { Speaker, Sponsor } from '@vuejs-jp/model'
+import type { Job, Speaker, Sponsor } from '@vuejs-jp/model'
 import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
 import { useSupabase } from '~/composables/useSupabase'
 import { conferenceTitle, linkUrl, ogSponsorDescription } from '~/utils/constants'
@@ -28,6 +28,12 @@ const { data: speakers } = await useAsyncData('speakers', async () => {
 
 const speakerData = speakers.value?.data as Speaker[]
 
+const { data: jobs } = await useAsyncData('jobs', async () => {
+  return await fetchData('jobs', { sponsorId: sponsorData[0].id })
+})
+
+const jobData = jobs.value?.data as Job[]
+
 const currentLocale = useLocaleCurrent().locale
 const { color, borderColor } = useSponsor()
 
@@ -84,6 +90,9 @@ useHead({
       </div>
 
       <div v-if="sponsorData[0].speaker_id" class="detailbody-persons">
+        <h3 class="sponsor-subtitle">
+          {{ `${sponsorData[0].name}のスポンサーセッション` }}
+        </h3>
         <VFSpeaker
           :image="speakerData[0].image_url"
           :company="currentLocale === 'en' ? speakerData[0].caption_en : speakerData[0].caption_ja"
@@ -97,6 +106,15 @@ useHead({
         </div>
       </div>
 
+      <div v-if="jobData.length !== 0" class="detailbody-jobboard">
+        <h3 class="sponsor-subtitle">
+          {{ `${sponsorData[0].name}のジョブボード` }}
+        </h3>
+        <nuxt-link :to="jobData[0].link_url" target="_blank">
+          <img :src="jobData[0].image_url" :alt="jobData[0].image_alt" />
+        </nuxt-link>
+      </div>
+
       <div class="back">
         <VFLinkButton
           class="back-action"
@@ -173,6 +191,7 @@ useHead({
     margin-top: calc(var(--unit) * 4);
     color: #292C33;
     gap: calc(var(--unit) * 5);
+    padding: calc(var(--unit) * 2.5) 0 calc(var(--unit) * 5);
   }
 
   .detailhead-body ::v-deep(a) {
@@ -245,11 +264,25 @@ useHead({
     }
   }
 
+  .sponsor-subtitle {
+    --sponsor-subtitle-font-size: 2rem;
+    --sponsor-subtitle-font-weight: 700;
+
+    font-size: var(--sponsor-subtitle-font-size);
+    font-weight: var(--sponsor-subtitle-font-weight);
+    line-height: normal;
+    background: var(--color-vue-green-gradation);
+    background-clip: text;
+    color: transparent;
+  }
+
   .detailbody-persons {
     font-size: 18px;
     display: grid;
     grid-template-columns: auto 1fr;
     gap: calc(var(--unit) * 4);
+    padding: calc(var(--unit) * 5) 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
   }
 
   .detailbody-persons ::v-deep(img) {
@@ -278,6 +311,20 @@ useHead({
     transition: 0.2s;
   }
 
+  .detailbody-jobboard {
+    display: grid;
+    gap: calc(var(--unit) * 2.5);
+    padding: calc(var(--unit) * 5) 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  .detailbody-jobboard ::v-deep(a) {
+    width: 460px;
+
+    @media(--mobile) {
+      width: 100%;
+    }
+  }
 
   .back {
     margin: 40px auto 0;