add base button

Cristiano Magro

2025-01-07 fceb27e1808492a949102d278fa1e4fb72be1c8c

add base button

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

New file
@@ -0,0 +1,39 @@
<template>
  <button :type="type" :class="mode">
    <slot></slot>
  </button>
</template>

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

<style scoped>
button {
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  background-color: #3a0061;
  border: 1px solid #3a0061;
  color: white;
  cursor: pointer;
}

button:hover,
button:active {
  background-color: #270041;
  border-color: #270041;
}

.flat {
  background-color: transparent;
  color: #3a0061;
  border: none;
}

.flat:hover,
.flat:active {
  background-color: #edd2ff;
}
</style>

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

@@ -3,7 +3,7 @@
    <base-card>
      <header>
        <h3>{{ title }}</h3>
        <button>Delete</button>
        <base-button mode="flat">Delete</base-button>
      </header>
      <p>{{ description }}</p>
      <nav>

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

@@ -2,10 +2,12 @@

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

const app = createApp(App);

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

app.mount('#app');