Header用のchipcardとavatorの設定

traPtitech · Jul 8, 2024 · 5098e89 · 5098e89
1 parent 6956f2f
commit 5098e89
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 5 deletions.
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/components/chipCard.vue b/src/components/chipCard.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Buton from 'primevue/button';
+</script>
+
+<template>
+  <div>
+    <Buton label="物品を登録" />
+  </div>
+</template>
diff --git a/src/components/iconAvatar.vue b/src/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/pages/DashBoard.vue b/src/pages/DashBoard.vue
@@ -1,7 +1,39 @@
 <template>
-  <div>Here is dashboard</div>
+  <div>
+    <div class="header">
+      <chipCard></chipCard>
+      <iconAvatar :name="dynamicName"></iconAvatar>
+    </div>
+    <div class="content">
+      <div><v-divider></v-divider></div>
+      <div></div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import iconAvatar from '@/components/iconAvatar.vue';
+import chipCard from '@/components/chipCard.vue';
+import { ref } from 'vue';
+const dynamicName = 'o_ER4'; // 実際は指定のユーザーの名前を取得する
+</script>
 
-<style lang="scss" module></style>
+<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; /* 必要に応じて背景色を調整 */
+  z-index: 1000; /* 必要に応じてz-indexを調整 */
+}
+
+.content {
+  margin-top: 60px; /* ヘッダーの高さに合わせて調整 */
+  padding: 20px;
+}
+</style>
diff --git a/src/shared/components/.gitkeep b/src/shared/components/.gitkeep