From fceb27e1808492a949102d278fa1e4fb72be1c8c Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 15:06:40 +0100
Subject: [PATCH] add base button
---
10 - course project/xno-prj-cmp-01-starting-setup/src/main.js | 2 ++
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue | 2 +-
10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseButton.vue | 39 +++++++++++++++++++++++++++++++++++++++
3 files changed, 42 insertions(+), 1 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseButton.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseButton.vue
new file mode 100644
index 0000000..1f22ecd
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseButton.vue
@@ -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>
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
index 6d23c5c..edfdd59 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/LearningResource.vue
+++ b/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>
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js b/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
index 169f497..f398b1d 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/main.js
+++ b/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');
--
Gitblit v1.8.0