Add CRC Card component

components.d.ts

@@ -1,23 +1,20 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+// Read more: https://github.com/vuejs/vue-next/pull/3399
 
-export {}
-
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     AboutMe: typeof import('./src/components/presentation/about-me.vue')['default']
     AppHeader: typeof import('./src/components/app-header.vue')['default']
     BlogPosts: typeof import('./src/components/posts/blog-posts.vue')['default']
+    CrcCard: typeof import('./src/components/architecture/crc-card.vue')['default']
     ForgettingCurve: typeof import('./src/components/smart-notes/forgetting-curve.vue')['default']
-    Island: typeof import('./node_modules/.pnpm/iles@0.8.7_sass@1.56.1/node_modules/iles/dist/client/app/components/Island.vue')['default']
     JulienCalixte: typeof import('./src/components/core/julien-calixte.vue')['default']
     MyBooks: typeof import('./src/components/presentation/my-books.vue')['default']
     MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
     ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
     Welcome: typeof import('./src/components/Welcome.vue')['default']
   }
 }
+
+export { }

src/app.ts

@@ -11,7 +11,7 @@ export default defineApp({
       link: [
         {
           rel: "stylesheet",
-          href: "https://fonts.googleapis.com/css2?family=Gulzar&family=Meow+Script&display=swap",
+          href: "https://fonts.googleapis.com/css2?family=Gulzar&family=Meow+Script&family=Cousine&display=swap",
         },
       ],
     }

src/components/architecture/crc-card.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+interface Props {
+  name: string,
+  responsabilities?: string[]
+  collaborators?: string[]
+}
+
+withDefaults(defineProps<Props>(), {
+  responsabilities: () => [],
+  collaborators: () => []
+})
+</script>
+
+<template>
+  <div class="crc-card">
+    <h3>{{ name }}</h3>
+    <section>
+      <div class="responsabilities">
+        <hr>
+        <ol>
+          <li v-for="responsability in responsabilities" :key="responsability">
+            {{ responsability }}
+          </li>
+        </ol>
+      </div>
+      <div class="collaborators" v-if="collaborators.length">
+        <hr>
+        <ol>
+          <li v-for="collaborator in collaborators" :key="collaborator">
+            {{ collaborator }}
+          </li>
+        </ol>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.crc-card {
+  min-height: 200px;
+  background-color: #561b00;
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 15px;
+  font-family: 'Cousine', monospace;
+
+  hr {
+    margin-bottom: 1rem;
+  }
+
+  section {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  ol {
+    margin: 1rem;
+    font-size: 12pt;
+  }
+
+  .responsabilities {
+    hr {
+      margin: 0 1rem;
+    }
+  }
+
+  .collaborators {
+    border-left: 2px groove white;
+    padding-left: 1rem;
+
+    hr {
+      visibility: hidden;
+    }
+  }
+}
+</style>