traPtitech · oER4 · Jul 22, 2024 · Jul 8, 2024 · Jul 8, 2024 · Jul 12, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,7 +26,7 @@ module.exports = {
       },
     ],
     'vue/component-api-style': ['error', ['script-setup']],
-    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+    'vue/component-name-in-template-casing': ['error', 'pascal-case'],
     'vue/custom-event-name-casing': ['error', 'camelCase'],
     'vue/v-on-event-hyphenation': ['error', 'always', { autofix: true }],
     'vue/v-on-function-call': 'error',

diff --git a/index.html b/index.html
@@ -22,7 +22,6 @@
     />
   </head>
   <body>
-    <div id="app"></div>
-    <script type="module" src="@/main.ts"></script>
+    <div id="app"><script type="module" src="/src/main.ts"></script></div>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -4,6 +4,7 @@
     <div :class="$style['inner-container']">
       <main :class="$style.content">
         <router-view />
+        <Avatar />
       </main>
     </div>
     <footer>Footer</footer>

diff --git a/src/pages/DashBoard.vue b/src/pages/DashBoard.vue
@@ -1,7 +1,10 @@
 <template>
   <div>Here is dashboard</div>
+  <div><MainHeader></MainHeader></div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import MainHeader from '@/shared/lib/components/MainHeader.vue';
+</script>
 
 <style lang="scss" module></style>
diff --git a/src/shared/components/.gitkeep b/src/shared/components/.gitkeep
diff --git a/src/shared/lib/components/Chipcard.vue b/src/shared/lib/components/Chipcard.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+</script>
+
+<template>
+  <div>
+    <div class="p-button p-button-rounded p-button-outlined">
+      <span class="p-button-label">物品を登録</span>
+    </div>
+  </div>
+</template>
diff --git a/src/shared/lib/components/Chiptag.vue b/src/shared/lib/components/Chiptag.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+defineProps<{
+  name: string;
+}>();
+</script>
+<template>
+  <div>
+    <div class="p-chip">
+      <span>{{ name }}</span>
+    </div>
+  </div>
+</template>
diff --git a/src/shared/lib/components/Iconavatar.vue b/src/shared/lib/components/Iconavatar.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Avatar from 'primevue/avatar';
+defineProps<{
+  name: string;
+}>();
+</script>
+<template>
+  <div>
+    <Avatar
+      :image="`https://q.trap.jp/api/v3/public/icon/${name}`"
+      class="mr-2"
+      size="xlarge"
+      shape="circle"
+    />
+  </div>
+</template>
diff --git a/src/shared/lib/components/MainHeader.vue b/src/shared/lib/components/MainHeader.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div class="header">
+      <Iconavatar :name="dynamicName" />
+    </div>
+    <div class="content">
+      <Chiptag :name="dynamicName2" />
+    </div>
+    <div class="content">
+      <Chipcard></Chipcard>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Iconavatar from '@/shared/lib/components/Iconavatar.vue';
+import Chipcard from '@/shared/lib/components/Chipcard.vue';
+import Chiptag from '@/shared/lib/components/Chiptag.vue';
+const dynamicName = 'o_ER4'; // 実際は指定のユーザーの名前を取得する
+const dynamicName2 = 'test1';
+</script>
+
+<style lang="scss" module>
+.header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 10px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  background-color: white;
+}
+
+.content {
+  padding: 20px;
+}
+</style>