feat: added memo base

components/Memo.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="memo">
+    <ToolHeader :config="memoConfig" />
+
+    Warning: le style/aspect est toujours en wip, so focus on content <br><br>
+
+    <v-row>
+      <v-col cols="12" sm="12" md="6" lg="4" v-for="item in items" :key="item.section" class="memo-section">
+        <v-card class="mb-5">
+          <v-card-title>{{ item.section }}</v-card-title>
+          <v-card-text>
+            <div v-for="tip in item.items" :key="tip.text" class="memo-item">
+              <div class="memo-item-title">
+                {{ tip.text }}
+              </div>
+              <div v-if="tip.subtitle" class="memo-item-subtitle">
+                {{ tip.subtitle }}
+              </div>
+              <div v-if="tip.code" class="memo-item-code" @click="copy(tip.code)">
+                <pre>{{ tip.code }}</pre>
+                <v-icon>mdi-content-copy</v-icon>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component} from 'nuxt-property-decorator'
+import Tool from './Tool.vue'
+import type {ToolConfig} from '~/types/ToolConfig'
+import {CopyableMixin} from '~/mixins/copyable.mixin'
+import ToolHeader from '~/components/ToolHeader.vue'
+
+type MemoItems = { section: string, items: { text: string, code?: string, subtitle?: string }[] }[];
+
+@Component({
+  mixins: [CopyableMixin],
+  components: {ToolHeader}
+})
+export default class Memo extends Tool {
+  private memoConfig: ToolConfig = this.config();
+  private items: MemoItems = this.$t('memo') as unknown as MemoItems
+}
+</script>
+
+<style lang="less">
+.memo {
+  h1 {
+    font-weight: 300;
+    font-size: 50px;
+    margin: 0;
+    padding: 0;
+  }
+
+  h2 {
+    font-weight: 400;
+  }
+
+  .memo-item {
+    margin-bottom: 20px;
+
+    .memo-item-title {
+      font-weight: bold;
+      font-size: 16px;
+      color: var(--v-primary-base);
+    }
+
+    .memo-item-subtitle {
+      padding-bottom: 5px;
+    }
+
+    .memo-item-code {
+      cursor: pointer;
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      padding: 8px 15px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+
+      pre {
+        flex: 1;
+        overflow-x: auto;
+      }
+
+      .v-icon {
+        opacity: 0;
+      }
+
+      &:hover {
+        .v-icon {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>