From 0edd71fb709cfc1ff6806b63aa06d811beed381a Mon Sep 17 00:00:00 2001
From: jiyuujin <jiyuujinunite@gmail.com>
Date: Fri, 12 Jul 2024 17:09:07 +0900
Subject: [PATCH] update detail page (speaker, sponsor)

---
 apps/web/app/composables/useSponsor.ts        |  16 +
 apps/web/app/composables/useSupabase.ts       |   8 +-
 apps/web/app/pages/sessions/[id]/index.vue    | 264 ++++++++++++++
 apps/web/app/pages/sponsors/[id]/index.vue    | 325 ++++++++++++++++++
 apps/web/app/utils/constants.ts               |   4 +
 apps/web/nuxt.config.ts                       |  20 ++
 packages/model/lib/sponsor.ts                 |   7 +-
 packages/ui/components/sponsor/Tag.stories.ts |  36 ++
 packages/ui/components/sponsor/Tag.vue        |  29 ++
 9 files changed, 705 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/app/composables/useSponsor.ts
 create mode 100644 apps/web/app/pages/sessions/[id]/index.vue
 create mode 100644 apps/web/app/pages/sponsors/[id]/index.vue
 create mode 100644 packages/ui/components/sponsor/Tag.stories.ts
 create mode 100644 packages/ui/components/sponsor/Tag.vue

diff --git a/apps/web/app/composables/useSponsor.ts b/apps/web/app/composables/useSponsor.ts
new file mode 100644
index 00000000..7742ff1f
--- /dev/null
+++ b/apps/web/app/composables/useSponsor.ts
@@ -0,0 +1,16 @@
+import type { SponsorType, OptionSponsorType } from '@vuejs-jp/model'
+import { match } from 'ts-pattern'
+
+export function useSponsor() {
+  function color(tag: SponsorType | OptionSponsorType) {
+    return match(tag)
+      .with('platinum', () => '#93AF5E')
+      .with('gold', () => '#FFC408')
+      .with('silver', () => '#ADBFD4')
+      .with('bronze', () => '#F17C67')
+      .with('option', 'option-separate', 'name-card', 'special-naming-rights', 'after-party', 'simultaneous-interpretation', 'special-lunch', 'media', 'tool', () => '#546F89')
+      .exhaustive()
+  }
+
+  return { color }
+}
diff --git a/apps/web/app/composables/useSupabase.ts b/apps/web/app/composables/useSupabase.ts
index 57f9e6af..e78165ea 100644
--- a/apps/web/app/composables/useSupabase.ts
+++ b/apps/web/app/composables/useSupabase.ts
@@ -6,7 +6,13 @@ import type { FormSpeaker, FormSponsor, FormAttendee, FormStaff } from '~/types/
 export function useSupabase() {
   const client = useSupabaseClient<Database>()
 
-  async function fetchData(table: Table) {
+  async function fetchData(table: Table, options?: { id?: string; detailPageId?: 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)
+    }
     return await client.from(table).select()
   }
 
diff --git a/apps/web/app/pages/sessions/[id]/index.vue b/apps/web/app/pages/sessions/[id]/index.vue
new file mode 100644
index 00000000..5f870443
--- /dev/null
+++ b/apps/web/app/pages/sessions/[id]/index.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { createError, useAsyncData, useHead, useRoute } from '#imports'
+import type { Speaker } from '@vuejs-jp/model'
+import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useSupabase } from '~/composables/useSupabase'
+import { conferenceTitle, linkUrl, ogSpeakerDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+
+const route = useRoute()
+const id = route.params.id as string
+
+const { fetchData } = useSupabase()
+const { data: speakers } = await useAsyncData('speakers', async () => {
+  return await fetchData('speakers', { detailPageId: id })
+})
+const speakerData = speakers.value?.data as Speaker[]
+if (!speakerData) {
+  throw createError({ statusCode: 404, statusMessage: 'Speaker not found' })
+}
+
+if (!speakerData[0].detail_page_id) {
+  throw createError({ statusCode: 404, statusMessage: 'Speaker not found' })
+}
+
+const currentLocale = useLocaleCurrent().locale
+
+useHead({
+  titleTemplate: (titleChunk) => `${speakerData[0].session_title_ja} | ${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `${speakerData[0].session_title_ja} | ${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}sessions/${id}`,
+    }),
+    ...twitterOg({
+      title: `${speakerData[0].session_title_ja} | ${conferenceTitle}`,
+      description: ogSpeakerDescription,
+      url: `${linkUrl}sessions/${id}`,
+    }),
+  ],
+})
+</script>
+
+<template>
+  <VFPageHeading>{{ $t('speaker.title') }}</VFPageHeading>
+  <div class="session-detail">
+    <div class="session-detail-body">
+      <VFTitle id="sponsor-detail" class="detailbody-title">
+        {{ currentLocale === 'ja' ? (speakerData[0].session_title_ja ?? 'TBD') : (speakerData[0].session_title_en ?? 'TBD') }}
+      </VFTitle>
+
+      <div class="detailbody-explain">
+        {{ currentLocale === 'ja' ? (speakerData[0].session_description_ja ?? 'TBD') : (speakerData[0].session_description_en ?? 'TBD') }}
+      </div>
+
+      <div class="detailbody-persons">
+        <VFSpeaker
+          :image="speakerData[0].image_url"
+          :company="currentLocale === 'en' ? speakerData[0].caption_en : speakerData[0].caption_ja"
+          :division="currentLocale === 'en' ? speakerData[0].description_en : speakerData[0].description_ja"
+          :name="currentLocale === 'en' ? speakerData[0].name_en : speakerData[0].name_ja"
+          :github-id="speakerData[0].github_id"
+          :x-id="speakerData[0].x_id"
+        />
+        <div class="person-info">
+          {{ currentLocale === 'ja' ? speakerData[0].description_ja : speakerData[0].description_en }}
+        </div>
+      </div>
+
+      <div class="back">
+        <VFLinkButton
+          class="back-action"
+          background-color="white"
+          color="vue-blue"
+          target=""
+          :href="currentLocale === 'ja' ? '/' : `${currentLocale}/`"
+        >
+          {{ $t('back_to_top') }}
+        </VFLinkButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url('../../../assets/base.css');
+@import url('../../../assets/media.css');
+
+.session-detail {
+  margin: 0;
+  padding: 0 1.5%;
+  background-image: linear-gradient(#fff, #ebf0f5);
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+
+  @media (--tablet) {
+    padding: 0 6%;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('/form-bg.png');
+    background-size: auto;
+    background-repeat: repeat;
+    background-position: bottom left;
+    opacity: 0.8;
+    mix-blend-mode: overlay;
+    z-index: -1;
+  }
+}
+
+.session-detail-body {
+  --head-img-width: 475px;
+
+  margin: 0 auto;
+  padding: 60px 0 120px;
+  width: 100%;
+  max-width: 1280px;
+  display: grid;
+  gap: calc(var(--unit) * 8);
+
+  @media (--tablet) {
+    padding: 20px 0 60px;
+    max-width: 100%
+  }
+
+  .detailbody-title {
+    text-align: left;
+    font-size: 32px;
+    font-weight: 700;
+    margin-bottom: calc(var(--unit) * 3);
+  }
+
+  .detailbody-explain {
+    /* margin: 0 auto calc(var(--unit) * 8); */
+  }
+
+  .detailbody-explain ul {
+    list-style-type: square;
+    margin-left: calc(var(--unit) * 4);
+    margin-bottom: calc(var(--unit) * 2);
+  }
+
+  .detailbody-explain p {
+    color: var(--color-vue-blue);
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 1.8;
+  }
+
+  .detailbody-explain p a {
+    color: var(--color-vue-green);
+    text-decoration: underline;
+  }
+
+  .detailbody-explain p a:hover {
+    transition: 0.2s;
+  }
+
+  .detailbody-persons {
+    font-size: 18px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: calc(var(--unit) * 4);
+  }
+
+  .detailbody-persons ::v-deep(img) {
+    width: var(--head-img-width);
+  }
+
+  .person-info ::v-deep(ul) {
+    list-style-type: square;
+    margin-left: calc(var(--unit) * 4);
+    margin-bottom: calc(var(--unit) * 2);
+  }
+
+  .person-info ::v-deep(p) {
+    color: var(--color-vue-blue);
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 1.8;
+  }
+
+  .person-info ::v-deep(p a) {
+    color: var(--color-vue-green);
+    text-decoration: underline;
+  }
+
+  .person-info ::v-deep(p a:hover) {
+    transition: 0.2s;
+  }
+
+  .back {
+    margin: 40px auto 0;
+    width: 100%;
+    max-width: 260px;
+  }
+
+  .back-action {
+    --height-button: 66px;
+
+    height: var(--height-button);
+    border-radius: var(--height-button);
+    display: flex;
+  }
+
+  @media (--tablet) {
+    --head-img-width: 368px;
+
+    .back-action {
+      --height-button: 58px;
+    }
+  }
+
+  @media (--mobile) {
+    --head-img-width: 100%;
+
+    .detailbody {
+      display: block;
+    }
+
+    .detailbody-title {
+      font-size: 24px;
+    }
+
+    .detailbody-explain ::v-deep(p) {
+      font-size: 16px;
+    }
+
+    .detailbody-persons {
+      grid-template-columns: 1fr;
+      place-items: center;
+    }
+
+    .person-info ::v-deep(p) {
+      font-size: 16px;
+    }
+
+    .back {
+      width: 100%;
+      padding: 0 23.5px;
+      margin-top: 30px;
+      margin-bottom: 60px;
+    }
+
+    .back-action {
+      --height-button: 58px;
+    }
+  }
+
+  a {
+    border-radius: 12px;
+    overflow: hidden;
+    display: block;
+  }
+}
+</style>
diff --git a/apps/web/app/pages/sponsors/[id]/index.vue b/apps/web/app/pages/sponsors/[id]/index.vue
new file mode 100644
index 00000000..2c54b6dd
--- /dev/null
+++ b/apps/web/app/pages/sponsors/[id]/index.vue
@@ -0,0 +1,325 @@
+<script setup lang="ts">
+import { createError, useAsyncData, useHead, useRoute, useSponsor } from '#imports'
+import type { Speaker, Sponsor } from '@vuejs-jp/model'
+import { useLocaleCurrent } from '~/composables/useLocaleCurrent'
+import { useSupabase } from '~/composables/useSupabase'
+import { conferenceTitle, linkUrl, ogSponsorDescription } from '~/utils/constants'
+import { generalOg, twitterOg } from '~/utils/og.constants'
+
+const route = useRoute()
+const id = route.params.id as string
+
+const { fetchData } = useSupabase()
+const { data: sponsors } = await useAsyncData('sponsors', async () => {
+  return await fetchData('sponsors', { detailPageId: id })
+})
+const sponsorData = sponsors.value?.data as Sponsor[]
+if (!sponsorData) {
+  throw createError({ statusCode: 404, statusMessage: 'Sponsor not found' })
+}
+
+if (!sponsorData[0].detail_page_id) {
+  throw createError({ statusCode: 404, statusMessage: 'Sponsor not found' })
+}
+
+const { data: speakers } = await useAsyncData('speakers', async () => {
+  return await fetchData('speakers', { id: sponsorData[0].speaker_id })
+})
+
+const speakerData = speakers.value?.data as Speaker[]
+if (!speakerData) {
+  throw createError({ statusCode: 404, statusMessage: 'Speaker not found' })
+}
+
+if (!speakerData[0].detail_page_id) {
+  throw createError({ statusCode: 404, statusMessage: 'Speaker not found' })
+}
+
+const currentLocale = useLocaleCurrent().locale
+const { color } = useSponsor()
+
+useHead({
+  titleTemplate: (titleChunk) => `${sponsorData[0].name} | ${conferenceTitle}`,
+  meta: [
+    ...generalOg({
+      title: `${sponsorData[0].name} | ${conferenceTitle}`,
+      description: ogSponsorDescription,
+      url: `${linkUrl}sponsors/${id}`,
+    }),
+    ...twitterOg({
+      title: `${sponsorData[0].name} | ${conferenceTitle}`,
+      description: ogSponsorDescription,
+      url: `${linkUrl}sponsors/${id}`,
+    }),
+  ],
+})
+</script>
+
+<template>
+  <VFPageHeading>{{ $t('sponsor.title') }}</VFPageHeading>
+  <div class="sponsor-detail">
+    <div class="sponsor-detail-body">
+      <ul class="detailhead-tags">
+        <li v-for="tag in sponsorData[0].tag" :key="`category-${tag}`">
+          <VFTag :label="$t(`sponsor.${tag.replaceAll('-', '_')}`)" :background="color(tag)" />
+        </li>
+      </ul>
+
+      <div class="detailhead-body">
+        <div class="detailhead-left">
+          <p class="detailhead-img">
+            <img
+              :src="`${sponsorData[0].image_url}`"
+              :alt="sponsorData[0].name"
+              width="570"
+              height="322"
+              decoding="async"
+            />
+          </p>
+          <a
+            class="detailhead-sponsorname"
+            :href="sponsorData[0].link_url"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {{ $t(sponsorData[0].name) }}
+          </a>
+        </div>
+        <div class="detailhead-right">
+          {{ currentLocale === 'ja' ? sponsorData[0].description_ja : sponsorData[0].description_en }}
+        </div>
+      </div>
+
+      <div v-if="sponsorData[0].speaker_id" class="detailbody-persons">
+        <VFSpeaker
+          :image="speakerData[0].image_url"
+          :company="currentLocale === 'en' ? speakerData[0].caption_en : speakerData[0].caption_ja"
+          :division="currentLocale === 'en' ? speakerData[0].description_en : speakerData[0].description_ja"
+          :name="currentLocale === 'en' ? speakerData[0].name_en : speakerData[0].name_ja"
+          :github-id="speakerData[0].github_id"
+          :x-id="speakerData[0].x_id"
+        />
+        <div class="person-info">
+          {{ currentLocale === 'ja' ? speakerData[0].description_ja : speakerData[0].description_en }}
+        </div>
+      </div>
+
+      <div class="back">
+        <VFLinkButton
+          class="back-action"
+          background-color="white"
+          color="vue-blue"
+          target=""
+          :href="currentLocale === 'ja' ? '/' : `${currentLocale}/`"
+        >
+          {{ $t('back_to_top') }}
+        </VFLinkButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url('../../../assets/base.css');
+@import url('../../../assets/media.css');
+
+.sponsor-detail {
+  margin: 0;
+  padding: 0 1.5%;
+  background-image: linear-gradient(#fff, #ebf0f5);
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+
+  @media (--tablet) {
+    padding: 0 6%;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('/form-bg.png');
+    background-size: auto;
+    background-repeat: repeat;
+    background-position: bottom left;
+    opacity: 0.8;
+    mix-blend-mode: overlay;
+    z-index: -1;
+  }
+}
+
+.sponsor-detail-body {
+  --head-img-width: 475px;
+
+  margin: 0 auto;
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 4);
+  width: 100%;
+  max-width: 1280px;
+
+  @media (--tablet) {
+    padding: 20px 0 60px;
+    max-width: 100%
+  }
+
+  .detailhead-tags {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin-top: calc(var(--unit) * 8);
+    column-gap: calc(var(--unit) * 1.5);
+    gap: calc(var(--unit) * 0.5);
+  }
+
+  .detailhead-body {
+    display: flex;
+    margin-top: calc(var(--unit) * 4);
+    color: #292C33;
+    gap: calc(var(--unit) * 5);
+  }
+
+  .detailhead-body ::v-deep(a) {
+    color: var(--color-vue-green);
+    text-decoration: underline;
+  }
+
+  .detailhead-body ::v-deep(a:hover) {
+    opacity: 0.4;
+    transition: 0.2s;
+  }
+
+  .detailhead-left {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  .detailhead-right {
+    font-size: 18px;
+  }
+
+  .detailhead-right ::v-deep(a) {
+    text-decoration: underline;
+  }
+
+  .detailhead-right ::v-deep(a:hover) {
+    transition: 0.2s;
+  }
+
+  .detailhead-img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--head-img-width);
+    height: auto;
+    aspect-ratio: 690 / 388;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: calc(var(--space-8) * 1);
+  }
+
+  .detailhead-img img {
+    max-width: 60%;
+    max-height: 60%;
+    object-fit: contain;
+  }
+
+  .detailhead-sponsorname {
+    display: inline-block;
+    color: var(--color-vue-green);
+    text-decoration: underline;
+    margin-top: calc(var(--unit) * 2);
+    &:hover {
+      transition: .2s;
+    }
+  }
+
+  .detailbody-persons {
+    font-size: 18px;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: calc(var(--unit) * 4);
+  }
+
+  .detailbody-persons ::v-deep(img) {
+    width: var(--head-img-width);
+  }
+
+  .person-info ::v-deep(ul) {
+    list-style-type: square;
+    margin-left: calc(var(--unit) * 4);
+    margin-bottom: calc(var(--unit) * 2);
+  }
+
+  .person-info ::v-deep(p) {
+    color: var(--color-vue-blue);
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 1.8;
+  }
+
+  .person-info ::v-deep(p a) {
+    color: var(--color-vue-green);
+    text-decoration: underline;
+  }
+
+  .person-info ::v-deep(p a:hover) {
+    transition: 0.2s;
+  }
+
+
+  .back {
+    margin: 40px auto 0;
+    width: 100%;
+    max-width: 260px;
+  }
+
+  .back-action {
+    --height-button: 66px;
+
+    height: var(--height-button);
+    border-radius: var(--height-button);
+    display: flex;
+  }
+
+  @media (--tablet) {
+    --head-img-width: 368px;
+
+    .back-action {
+      --height-button: 58px;
+    }
+  }
+
+  @media (--mobile) {
+    --head-img-width: 100%;
+
+    .detailhead-body {
+      display: block;
+    }
+
+    .detailhead-right {
+      margin-top: calc(var(--unit) * 4);
+    }
+
+    .back {
+      width: 100%;
+      padding: 0 23.5px;
+      margin-top: 30px;
+      margin-bottom: 60px;
+    }
+
+    .back-action {
+      --height-button: 58px;
+    }
+  }
+
+  a {
+    border-radius: 12px;
+    overflow: hidden;
+    display: block;
+    color: var(--color-vue-green);
+  }
+}
+</style>
diff --git a/apps/web/app/utils/constants.ts b/apps/web/app/utils/constants.ts
index e8256e22..1e32b917 100644
--- a/apps/web/app/utils/constants.ts
+++ b/apps/web/app/utils/constants.ts
@@ -8,6 +8,10 @@ export const ogCoCDescription =
 
 export const ogPrivacyDescription = 'Vue Fes Japan 2024 のプライバシーポリシーです。'
 
+export const ogSpeakerDescription = 'Vue Fes Japan 2024 のスピーカー、セッション情報です。'
+
+export const ogSponsorDescription = 'Vue Fes Japan 2024 のスポンサー情報です。'
+
 export const ogJobboardDescription = 'Vue Fes Japan 2024 のジョブボードです。'
 
 export const linkUrl = 'https://vuefes.jp/2024/'
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index 331c9933..e25c7737 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -1,3 +1,4 @@
+import { createClient } from '@supabase/supabase-js'
 import svgLoader from 'vite-svg-loader'
 import { conferenceTitle } from './app/utils/constants'
 import { generalOg, twitterOg } from './app/utils/og.constants'
@@ -87,6 +88,7 @@ export default defineNuxtConfig({
   nitro: {
     prerender: {
       crawlLinks: true,
+      failOnError: false,
       routes: ['/'],
       ignore: ['/api'],
     },
@@ -105,6 +107,20 @@ export default defineNuxtConfig({
       const supabaseKey = process.env.SUPABASE_KEY
       const serviceKey = process.env.SERVICE_KEY
       if (!supabaseUrl || !supabaseKey || serviceKey) return
+
+      const client = createClient(supabaseUrl, supabaseKey, {})
+      const { data: speakers, error: error1 } = await client.from('speakers').select()
+      const { data: sponsors, error: error2 } = await client.from('sponsors').select()
+      if (error1 || error2) return
+
+      const speakerRoutes = speakers?.map((d) => `/sessions/${d.detail_page_id}`)
+      const speakerEnRoutes = speakers?.map((d) => `/en/sessions/${d.detail_page_id}`)
+      const sponsorRoutes = sponsors?.map((d) => `/sponsors/${d.detail_page_id}`)
+      const sponsorEnRoutes = sponsors?.map((d) => `/en/sponsors/${d.detail_page_id}`)
+      nitroConfig.prerender?.routes?.push(...(speakerRoutes || []))
+      nitroConfig.prerender?.routes?.push(...(speakerEnRoutes || []))
+      nitroConfig.prerender?.routes?.push(...(sponsorRoutes || []))
+      nitroConfig.prerender?.routes?.push(...(sponsorEnRoutes || []))
     },
     'prerender:routes': (context) => {
       for (const path of [...context.routes]) {
@@ -125,6 +141,10 @@ export default defineNuxtConfig({
       'postcss-custom-media': {},
     },
   },
+  routeRules: {
+    '/sessions/': { prerender: true },
+    '/sponsors/': { prerender: true },
+  },
   runtimeConfig: {
     public: {
       gtagId: process.env.NUXT_GTAG_ID,
diff --git a/packages/model/lib/sponsor.ts b/packages/model/lib/sponsor.ts
index b060f9c1..b83bbc55 100644
--- a/packages/model/lib/sponsor.ts
+++ b/packages/model/lib/sponsor.ts
@@ -1,4 +1,4 @@
-type SponsorType = 'platinum' | 'gold' | 'silver' | 'bronze' | 'option' | 'option-separate'
+export type SponsorType = 'platinum' | 'gold' | 'silver' | 'bronze' | 'option' | 'option-separate'
 
 export type SponsorCategory =
   | 'platinumSponsors'
@@ -14,7 +14,8 @@ export type SponsorCategory =
   | 'toolSponsors'
 
 
-type Tag = 'name-card'
+export type OptionSponsorType =
+  | 'name-card'
   | 'special-naming-rights'
   | 'after-party'
   | 'simultaneous-interpretation'
@@ -30,7 +31,7 @@ export type Sponsor = {
   description_en: string
   speaker_id?: string
   image_url: string
-  tag: Array<SponsorType | Tag>
+  tag: Array<SponsorType | OptionSponsorType>
   link_url: string
   is_open: boolean
   display_order?: number
diff --git a/packages/ui/components/sponsor/Tag.stories.ts b/packages/ui/components/sponsor/Tag.stories.ts
new file mode 100644
index 00000000..5c4fd957
--- /dev/null
+++ b/packages/ui/components/sponsor/Tag.stories.ts
@@ -0,0 +1,36 @@
+import { StoryFn } from '@storybook/vue3'
+import Tag from './Tag.vue'
+
+export default {
+  title: 'sponsor/Tag',
+  component: Tag,
+  args: {
+    background: '#93AF5E',
+    label: 'プラチナ',
+  },
+  argTypes: {
+    background: {
+      description: 'The background property',
+      control: {
+        type: 'text',
+      },
+    },
+    label: {
+      description: 'The label property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Tag },
+  setup() {
+    return { args }
+  },
+  template: '<Tag v-bind="args" />',
+})
+
+export const Default = Template.bind({})
diff --git a/packages/ui/components/sponsor/Tag.vue b/packages/ui/components/sponsor/Tag.vue
new file mode 100644
index 00000000..d19f9b20
--- /dev/null
+++ b/packages/ui/components/sponsor/Tag.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  background: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <span class="tag-root" :style="{ background }"> {{ label }} </span>
+</template>
+
+<style scoped>
+.tag-root {
+  display: inline-block;
+  padding: calc(var(--unit) * 1) calc(var(--unit) * 2);
+  font-family: DIN;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-white);
+  line-height: 1;
+  white-space: nowrap;
+}
+</style>