move Namecard component from apps/web to packages/ui.

Author: totocalcio

apps/web/app/components/namecard/Namecard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import NamecardAvatar from './NamecardAvatar.vue'
+import NamecardAvatar from './NamecardAvatar23.vue'
 import type { NamecardUser } from '@vuejs-jp/model'
 import { defineAsyncComponent } from 'vue'
 
@@ -12,12 +12,22 @@ const props = withDefaults(defineProps<NamecardProps>(), {
   opacity: 1,
 })
 
-const SpBlock = defineAsyncComponent(() => import('../../assets/namecard/2023/pc/block.svg?component'))
+const SpBlock = defineAsyncComponent(
+  () => import('../../assets/namecard/2023/pc/block.svg?component'),
+)
 const Hook = defineAsyncComponent(() => import('../../assets/namecard/2023/hook.svg?component'))
-const Sponsor = defineAsyncComponent(() => import('../../assets/namecard/2023/sponsor.svg?component'))
-const NamecardTitle1 = defineAsyncComponent(() => import('../../assets/namecard/2023/title1.svg?component'))
-const NamecardTitle2 = defineAsyncComponent(() => import('../../assets/namecard/2023/title2.svg?component'))
-const VueFesLogo = defineAsyncComponent(() => import('../../assets/namecard/2023/vuefes_logo.svg?component'))
+const Sponsor = defineAsyncComponent(
+  () => import('../../assets/namecard/2023/sponsor.svg?component'),
+)
+const NamecardTitle1 = defineAsyncComponent(
+  () => import('../../assets/namecard/2023/title1.svg?component'),
+)
+const NamecardTitle2 = defineAsyncComponent(
+  () => import('../../assets/namecard/2023/title2.svg?component'),
+)
+const VueFesLogo = defineAsyncComponent(
+  () => import('../../assets/namecard/2023/vuefes_logo.svg?component'),
+)
 const SpBg = defineAsyncComponent(() => import('../../assets/namecard/2023/pc/wave.svg?component'))
 </script>
 

packages/ui/assets/namecard/bg_texture.png

@@ -4,6 +4,13 @@ import Namecard24 from './Namecard24.vue'
 export default {
   title: 'namecard/Namecard24',
   component: Namecard24,
+  args: {
+    user: {
+      display_name: 'jiyuujin',
+      avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+      role: 'attendee',
+    },
+  },
 }
 
 const Template: StoryFn<unknown> = (args, { argTypes }) => ({
@@ -16,3 +23,49 @@ const Template: StoryFn<unknown> = (args, { argTypes }) => ({
 })
 
 export const Default = Template.bind({})
+
+export const WithParty = Template.bind({})
+WithParty.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'attendee + party',
+  },
+}
+
+export const Speaker = Template.bind({})
+Speaker.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'speaker',
+  },
+}
+
+export const Sponsor = Template.bind({})
+Sponsor.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'sponsor',
+  },
+}
+
+export const Staff = Template.bind({})
+Staff.args = {
+  user: {
+    display_name: 'jiyuujin',
+    avatar_url: 'https://i.imgur.com/X0CcoU9.jpg',
+    role: 'staff',
+  },
+}
+
+export const NoAvatar = Template.bind({})
+NoAvatar.args = {
+  user: {
+    display_name: '山田　太郎',
+    avatar_url: '',
+    role: 'attendee',
+  },
+  isPlaceholder: true,
+}

packages/ui/assets/namecard/support.svg

@@ -1,3 +1,74 @@
+<script setup lang="ts">
+import NamecardAvatar from './NamecardAvatar24.vue'
+import type { NamecardUser } from '@vuejs-jp/model'
+import { useUserRole } from '@vuejs-jp/composable'
+
+type NamecardProps = {
+  user: NamecardUser
+  isPlaceholder?: boolean
+}
+
+defineProps<NamecardProps>()
+
+const { backgroundColor } = useUserRole()
+</script>
+
 <template>
-  Namecard 2024
+  <div class="namecard-root">
+    <NamecardAvatar :user="user" :is-placeholder="isPlaceholder" />
+    <div
+      class="namecard-role"
+      :style="{ '--background-color-role': backgroundColor(user.role ?? 'staff') }"
+    >
+      {{ user.role }}
+    </div>
+    <div class="namecard-sponsor">
+      <img src="../../assets/namecard/support.svg" alt="Supported by Stockmark" />
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.namecard-root {
+  width: 23.5rem;
+  background-color: var(--color-white);
+  border-radius: calc(var(--unit) * 1.25);
+  overflow: hidden;
+  box-shadow: 0px 8px 24px 0px hsla(0, 0%, 0%, 0.239);
+  border: 1px solid #000;
+  @media (width <= 480px) {
+    width: 18rem;
+  }
+}
+
+.namecard-role {
+  --background-color-role: color-mix(in srgb, var(--color-vue-blue), #000 20%);
+  font-size: 1.6875rem;
+  height: 2.625rem;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--color-white);
+  background-color: var(--background-color-role);
+  @media (width <= 480px) {
+    font-size: 1.3125rem;
+    height: 2.0625rem;
+  }
+}
+
+.namecard-sponsor {
+  display: grid;
+  place-items: center;
+  height: 3.75rem;
+  img {
+    width: 16.25rem;
+  }
+  @media (width <= 480px) {
+    height: 2.8125rem;
+    img {
+      width: 12.5rem;
+    }
+  }
+}
+</style>