| | |
| | | <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> |
| | | <base-button mode="flat" @click="deleteResource(id)" |
| | | >Delete</base-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: ['id', 'title', 'description', 'link'], |
| | | inject: ['deleteResource'], |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | li { |
| | | margin: auto; |
| | | max-width: 40rem; |
| | | } |
| | | </script> |
| | | |
| | | header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | h3 { |
| | | font-size: 1.25rem; |
| | | margin: 0.5rem 0; |
| | | } |
| | | |
| | | p { |
| | | margin: 0.5rem 0; |
| | | } |
| | | |
| | | a { |
| | | text-decoration: none; |
| | | color: #ce5c00; |
| | | } |
| | | |
| | | a:hover, |
| | | a:active { |
| | | color: #c89300; |
| | | } |
| | | </style> |