Header and BaseCard

Cristiano Magro

2025-01-07 2757804c19ddba5a0c46092f9ec7c4a8981c8652

Header and BaseCard

 10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue

@@ -1,16 +1,20 @@
<template>
  <TheHeader :title="rememberMe"></TheHeader>
  <stored-resources :resources="storedResouces"> </stored-resources>
</template>

<script>
import StoredResources from './components/learning-resource/StoredResource.vue';
import TheHeader from './components/layouts/TheHeader.vue';

export default {
  components: {
    StoredResources: StoredResources,
    TheHeader: TheHeader,
  },
  data() {
    return {
      rememberMe: 'Remember Me',
      storedResouces: [
        {
          id: 'official-guide',

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseCard.vue

New file
@@ -0,0 +1,19 @@
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
div {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
  margin: 2rem auto;
  max-width: 40rem;
}
</style>

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/layouts/TheHeader.vue

New file
@@ -0,0 +1,27 @@
<template>
  <header>
    <h1>{{ title }}</h1>
  </header>
</template>

<script>
export default {
  props: ['title'],
};
</script>

<style scoped>
header {
  width: 100%;
  height: 5rem;
  background-color: #640032;
  display: flex;
  justify-content: center;
  align-items: center;
}

header h1 {
  color: white;
  margin: 0;
}
</style>

 10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue

@@ -1,22 +1,22 @@
<template>
    <li>
        <div>
            <header>
                <h3>{{ title }}</h3>
                <button>Delete</button>
            </header>
        </div>
        <p>{{ description }}</p>
        <nav>
            <a :href="link">View Resource</a>
        </nav>
    </li>
  <li>
    <base-card>
      <header>
        <h3>{{ title }}</h3>
        <button>Delete</button>
      </header>
      <p>{{ description }}</p>
      <nav>
        <a :href="link">View Resource</a>
      </nav>
    </base-card>
  </li>
</template>

<script>
export default {
    props: ['title', 'description', 'link']
}
  props: ['title', 'description', 'link'],
};
</script>

<style scoped>
@@ -49,4 +49,4 @@
a:active {
  color: #c89300;
}
</style>
</style>

 10 - course project/xno-prj-cmp-01-starting-setup/src/main.js

@@ -1,5 +1,11 @@
import { createApp } from 'vue';

import App from './App.vue';
import BaseCard from './components/UI/BaseCard.vue';

createApp(App).mount('#app');
const app = createApp(App);

app.component('base-card', BaseCard);

app.mount('#app');