Dynamic component, add resource, styling tabs

Cristiano Magro

2025-01-07 2c19b50d9eaacb5347f3e9f108d149948efa9490

Dynamic component, add resource, styling tabs

ristutturazione del codice per inserire la tabs bar e gestirla con dei button custom

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

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

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

export default {
  components: {
    StoredResources: StoredResources,
    TheHeader: TheHeader,
    TheResources: TheResources,
  },
  data() {
    return {
      rememberMe: 'Remember Me',
      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',
        },
      ],
    };
  },
};

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

New file
@@ -0,0 +1,7 @@
<template>
    <h2>Add Resource</h2>
</template>

<script>export default{}</script>

<style scoped></style>

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

@@ -18,8 +18,7 @@
  components: {
    LearningResource: LearningResource,
  },

  props: ['resources'],
  inject: ['resources'],
};
</script>


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

New file
@@ -0,0 +1,66 @@
<template>
  <base-card>
    <base-button
      @click="setSelectedTab('stored-resources')"
      :mode="storedResButtonMode"
      >Stored Resource</base-button
    >
    <base-button
      @click="setSelectedTab('add-resource')"
      :mode="addResButtonMode"
      >Add Resource</base-button
    >
  </base-card>
  <component :is="selectedTab"></component>
</template>

<script>
import StoredResources from './StoredResource.vue';
import AddResource from './AddResource.vue';

export default {
  components: {
    StoredResources: StoredResources,
    AddResource: AddResource,
  },
  data() {
    return {
      selectedTab: 'stored-resources',
      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',
        },
      ],
    };
  },
  computed: {
    storedResButtonMode() {
      return this.selectedTab === 'stored-resources' ? null : 'flat';
    },
    addResButtonMode() {
      return this.selectedTab === 'add-resource' ? null : 'flat';
    },
  },
  provide() {
    return {
      resources: this.storedResouces,
    };
  },
  methods: {
    setSelectedTab(tab) {
      this.selectedTab = tab;
    },
  },
};
</script>

<style scoped></style>