From 86991ce9905eeea513635a340cda50f57296d896 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 11:25:20 +0100
Subject: [PATCH] stili e nuovo componente
---
10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue | 60 ++++++++++++++----------------
10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue | 34 +++++++++++++++++
2 files changed, 62 insertions(+), 32 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
index 5b78070..f710979 100644
--- a/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/App.vue
@@ -1,51 +1,47 @@
<template>
- <ul>
- <learning-resource v-for="res in storedResouces" :key="res.id" :title="res.title" :description="res.description"
- :link="res.link">
- </learning-resource>
- </ul>
+ <stored-resources :resources="storedResouces"> </stored-resources>
</template>
<script>
-import LearningResource from './components/learning-resource/LearningResource.vue';
+import StoredResources from './components/learning-resource/StoredResource.vue';
export default {
- components: {
- LearningResource: LearningResource,
- },
- data() {
- return {
- storedResouces: [
- {
- id: 'official-guide',
- title: 'Official Guide',
- description: 'The official Vue.js documentation',
- link: 'https://vuejs.org'
- },
- {
- id: 'google',
- title: 'Google',
- description: 'Learn to google...',
- link: 'https://google.com'
- },
- ]
- }
- }
-}
+ components: {
+ StoredResources: StoredResources,
+ },
+ data() {
+ return {
+ storedResouces: [
+ {
+ id: 'official-guide',
+ title: 'Official Guide',
+ description: 'The official Vue.js documentation',
+ link: 'https://vuejs.org',
+ },
+ {
+ id: 'google',
+ title: 'Google',
+ description: 'Learn to google...',
+ link: 'https://google.com',
+ },
+ ],
+ };
+ },
+};
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
html {
- font-family: 'Roboto', sans-serif;
+ font-family: 'Roboto', sans-serif;
}
body {
- margin: 0;
+ margin: 0;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue
new file mode 100644
index 0000000..f212502
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/learning-resource/StoredResource.vue
@@ -0,0 +1,34 @@
+<template>
+ <ul>
+ <learning-resource
+ v-for="res in resources"
+ :key="res.id"
+ :title="res.title"
+ :description="res.description"
+ :link="res.link"
+ >
+ </learning-resource>
+ </ul>
+</template>
+
+<script>
+import LearningResource from './LearningResource.vue';
+
+export default {
+ components: {
+ LearningResource: LearningResource,
+ },
+
+ props: ['resources'],
+};
+</script>
+
+<style>
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ margin: auto;
+ max-width: 40rem;
+}
+</style>
--
Gitblit v1.8.0