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', 'PascalCase'],
     '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
@@ -1,12 +1,10 @@
 <template>
   <div :class="$style.container">
-    <header>Header</header>
     <div :class="$style['inner-container']">
       <main :class="$style.content">
-        <router-view />
+        <RouterView />
       </main>
     </div>
-    <footer>Footer</footer>
   </div>
 </template>
 

diff --git a/src/pages/DashBoard.vue b/src/pages/DashBoard.vue
@@ -1,7 +1,9 @@
 <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,28 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+defineProps<{
+  label: string;
+}>();
+</script>
+
+<template>
+  <Button class="button-color"
+    ><span>{{ label }}</span></Button
+  >
+</template>
+<style lang="scss" scoped>
+.button-color {
+  background-color: $color-primary;
+  border-color: $color-primary;
+  border-width: 2px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: normal;
+}
+.buton-color:active {
+  border-color: $color-border-hover;
+}
+.buton-color:hover {
+  background-color: $color-primary-hover;
+}
+</style>
diff --git a/src/shared/lib/components/ChipTag.vue b/src/shared/lib/components/ChipTag.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import Chip from 'primevue/chip';
+
+defineProps<{
+  label: string;
+}>();
+</script>
+<template>
+  <Chip class="p-chip">
+    <span>{{ label }}</span>
+  </Chip>
+</template>
diff --git a/src/shared/lib/components/IconAvatar.vue b/src/shared/lib/components/IconAvatar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Avatar from 'primevue/avatar';
+defineProps<{
+  name: string;
+}>();
+</script>
+<template>
+  <Avatar
+    :image="`https://q.trap.jp/api/v3/public/icon/${name}`"
+    class="mr-2"
+    size="32px"
+    shape="circle"
+  />
+</template>
diff --git a/src/shared/lib/components/MainHeader.vue b/src/shared/lib/components/MainHeader.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="box">
+    <div class="left-box">
+      <ServiceLogo />
+    </div>
+    <div class="right-box">
+      <ChipCard :label="chipLabel" />
+      <IconAvatar :name="userName" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconAvatar from '@/shared/lib/components/IconAvatar.vue';
+import ChipCard from '@/shared/lib/components/ChipCard.vue';
+import ServiceLogo from '@/shared/lib/components/ServiceLogo.vue';
+const userName = 'Pugma'; // 実際は指定のユーザーの名前を取得する
+const chipLabel = '物品を追加'; //ボタンのラベルをpropsで使えるようにして使いまわす
+</script>
+
+<style lang="scss" scoped>
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid $color-secondary;
+}
+
+.left-box {
+  margin-right: auto;
+}
+
+.right-box {
+  display: flex;
+  align-items: center;
+  padding: 16px, 32px;
+  gap: 16px;
+}
+</style>
diff --git a/src/shared/lib/components/ServiceIcon.vue b/src/shared/lib/components/ServiceIcon.vue
@@ -0,0 +1,46 @@
+<template>
+  <svg
+    version="1.0"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24.82pt"
+    height="32pt"
+    viewBox="0 0 700.000000 700.000000"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <metadata>
+      Created by potrace 1.11, written by Peter Selinger 2001-2013
+    </metadata>
+    <g
+      transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+      fill="#5cb860"
+      stroke="none"
+    >
+      <path
+        d="M1059 6977 c-86 -29 -160 -86 -196 -151 l-28 -51 -1 -3250 c-1 -2732
+1 -3258 13 -3297 34 -117 189 -208 360 -210 104 -2 146 6 218 42 33 17 209
+141 391 278 182 136 342 255 355 265 13 9 157 116 319 237 162 121 311 232
+330 246 19 14 122 91 229 170 205 154 247 179 323 200 61 16 195 16 256 0 72
+-20 119 -47 269 -159 76 -57 143 -106 150 -110 9 -6 12 143 12 659 0 605 -1
+665 -16 660 -194 -75 -324 -99 -533 -100 -220 0 -301 11 -485 70 -91 29 -250
+103 -313 145 -24 16 -47 29 -52 29 -4 0 -10 3 -12 8 -1 4 -21 20 -43 36 -270
+198 -480 513 -559 836 -44 181 -44 160 -44 1854 l0 1611 -439 2 c-431 3 -439
+2 -504 -20z"
+      />
+      <path
+        d="M2924 6135 c0 -608 3 -865 10 -863 6 2 56 18 111 36 152 49 294 69
+465 66 80 -1 154 -4 165 -7 11 -2 43 -8 70 -11 53 -8 164 -36 230 -59 207 -71
+391 -186 550 -342 117 -115 138 -141 210 -251 100 -153 163 -302 213 -501 l26
+-108 3 -1802 4 -1802 212 -159 c116 -87 246 -184 288 -215 122 -90 249 -120
+394 -92 128 24 248 109 278 199 11 34 13 554 13 3291 l-1 3250 -21 45 c-38 83
+-122 147 -229 174 -52 14 -233 16 -1525 16 l-1466 0 0 -865z"
+      />
+      <path
+        d="M3430 4579 c-216 -24 -374 -114 -500 -284 -64 -86 -97 -167 -126
+-305 -3 -14 -5 -59 -5 -100 -2 -284 170 -537 438 -645 32 -13 74 -27 93 -30
+19 -3 51 -9 70 -14 46 -10 167 -5 231 8 362 78 592 408 545 783 -37 298 -302
+555 -602 584 -33 3 -63 6 -69 8 -5 1 -39 -1 -75 -5z"
+      />
+    </g>
+  </svg>
+</template>
+<style lang="scss"></style>
diff --git a/src/shared/lib/components/ServiceLogo.vue b/src/shared/lib/components/ServiceLogo.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="content">
+    <ServiceLogo />
+    booQ
+  </div>
+</template>
+<script setup lang="ts">
+import ServiceLogo from '@/shared/lib/components/ServiceIcon.vue';
+</script>
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: $color-primary;
+}
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -8,6 +8,7 @@ $color-secondary: #e2e2e2;
 $color-secondary-hover: #f0f0f0;
 $color-secondary-disabled: #c9cac9;
 
+$color-border-hover: #2b2b2b;
 $color-error: #ff4500;
 
 $color-text-primary: #2b2b2b;