first commit

src/components/home/MenuItem.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+import AppCircle from 'components/app/AppCircle.vue';
+
+defineProps<{
+  list: {
+    icon: string;
+    title: string;
+    caption: string;
+    color:
+      | 'green'
+      | 'red'
+      | 'orange'
+      | 'cyan'
+      | 'camo'
+      | 'purple'
+      | 'violet'
+      | 'indigo'
+      | 'lime';
+  }[];
+}>();
+</script>
+
+<template>
+  <div class="menu-container">
+    <AppBox
+      class="column inline-flex items-center"
+      v-for="(v, i) in list"
+      :key="i"
+      :bordered="$q.dark.isActive"
+    >
+      <AppCircle
+        :class="`q-pa-sm menu-icon menu-icon__${v.color}${($q.dark.isActive && ' dark') || ''}`"
+        :bordered="$q.dark.isActive"
+      >
+        <q-icon size="3rem" :name="v.icon" />
+      </AppCircle>
+      <div class="column items-center q-mt-md text-center">
+        <span style="font-weight: var(--font-weight-8)">{{ v.title }}</span>
+        <span style="color: rgba(130 130 130 / 0.7)">{{ v.caption }}</span>
+      </div>
+    </AppBox>
+  </div>
+</template>
+
+<style scoped>
+.menu-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--size-6);
+  & > * {
+    transition: 100ms border-color ease-in-out;
+    border: 1px solid transparent;
+
+    &:hover {
+      border-color: var(--brand-1);
+    }
+  }
+}
+
+.menu-icon {
+  --_color: var(--gray-7-hsl);
+  --_color-dark: var(--_color);
+  color: hsl(var(--_color)) !important;
+  background-color: hsla(var(--_color) / 0.1) !important;
+
+  &.dark {
+    color: hsl(--_color-dark) !important;
+    background-color: transparent !important;
+  }
+
+  &.menu-icon__green {
+    --_color: var(--green-6-hsl);
+  }
+
+  &.menu-icon__red {
+    --_color: var(--red-8-hsl);
+  }
+
+  &.menu-icon__orange {
+    --_color: var(--orange-6-hsl);
+    --_color-dark: var(--orange-5-hsl);
+  }
+
+  &.menu-icon__cyan {
+    --_color: var(--cyan-5-hsl);
+    --_color-dark: var(--cyan-4-hsl);
+  }
+
+  &.menu-icon__camo {
+    --_color: var(--camo-5-hsl);
+    --_color-dark: var(--cyan-4-hsl);
+  }
+
+  &.menu-icon__purple {
+    --_color: var(--purple-3-hsl);
+    --_color-dark: var(--purple-5-hsl);
+  }
+
+  &.menu-icon__violet {
+    --_color: var(--violet-5-hsl);
+  }
+
+  &.menu-icon__indigo {
+    --_color: var(--indigo-9-hsl);
+  }
+
+  &.menu-icon__lime {
+    --_color: var(--lime-11-hsl);
+  }
+}
+</style>

src/components/home/PersonCard.vue

@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import AppBox from 'components/app/AppBox.vue';
+import AppCircle from '../app/AppCircle.vue';
+
+defineProps<{
+  list: {
+    name: string;
+    badge: string;
+    detail: { label: string; value: string }[];
+    male?: boolean;
+    female?: boolean;
+    disabled?: boolean;
+  }[];
+}>();
+</script>
+
+<template>
+  <div class="person-container">
+    <AppBox
+      :bordered="$q.dark.isActive"
+      class="column"
+      style="padding: 0"
+      v-for="(v, i) in list"
+      :key="i"
+    >
+      <div class="q-pa-md column items-center">
+        <AppCircle class="surface-2 avatar q-mb-md" bordered>Avatar</AppCircle>
+
+        <span>{{ v.name }}</span>
+        <span
+          class="badge"
+          :class="{
+            'bg-gender': v.male || v.female,
+            'bg-gender__male': v.male,
+            'bg-gender__female': v.female,
+          }"
+        >
+          {{ v.badge }}
+        </span>
+      </div>
+      <q-separator />
+      <div
+        class="q-py-sm q-px-xl person-detail rounded-b"
+        :class="{
+          'bg-gender': v.male || v.female,
+          'bg-gender__light': v.male || v.female,
+          'bg-gender__male': v.male,
+          'bg-gender__female': v.female,
+        }"
+      >
+        <div v-for="(d, j) in v.detail" :key="j">
+          <span>{{ d.label }}</span>
+          <span>{{ d.value }}</span>
+        </div>
+      </div>
+    </AppBox>
+  </div>
+</template>
+
+<style scoped>
+.person-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--size-6);
+}
+
+.avatar {
+  block-size: 7rem;
+}
+
+.badge {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--surface-2);
+  padding: 0 var(--size-6);
+}
+
+.person-detail {
+  display: grid;
+  flex-grow: 1;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--size-2);
+
+  & > * {
+    display: flex;
+    flex-direction: column;
+
+    & > :first-child {
+      font-size: var(--font-size-0);
+    }
+  }
+}
+.bg-gender {
+  color: hsla(var(--_fg));
+  background-color: hsl(var(--_bg));
+
+  &.bg-gender__light {
+    color: unset;
+    background-color: hsla(var(--_bg) / 0.1);
+  }
+
+  &.bg-gender__male {
+    --_fg: 0 100 100%;
+    --_bg: var(--blue-5-hsl);
+  }
+
+  &.bg-gender__female {
+    --_fg: 0 100 100%;
+    --_bg: var(--pink-7-hsl);
+  }
+}
+</style>