Last active
January 4, 2023 18:58
-
-
Save gvinson/79899b94d865f47a34ab4438291cfd4a to your computer and use it in GitHub Desktop.
Frontend Assessment (with Vue)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script setup> | |
| import LinkItem from './LinkItem'; | |
| const links = [ | |
| { | |
| url: 'https://google.com', | |
| text: 'Google', | |
| isDisabled: false, | |
| }, | |
| { | |
| url: 'https://clevyr.com', | |
| text: 'Clevyr', | |
| isDisabled: false, | |
| }, | |
| { | |
| url: 'https://aol.com', | |
| text: 'AOL', | |
| isDisabled: true, | |
| }, | |
| ]; | |
| </script> | |
| <template> | |
| <div class="container"> | |
| <ul class="link-list"> | |
| <li | |
| v-for="link in links" | |
| class="link-item" | |
| > | |
| <link-item | |
| :href="link.url" | |
| :class="{ 'disabled': link.isDisabled }" | |
| > | |
| {{ link.text }} | |
| </link-item> | |
| </li> | |
| </ul> | |
| </div> | |
| </template> | |
| <style lang="scss"> | |
| .container { | |
| display: block; | |
| width: 1100px; | |
| max-width: 95%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| opacity: 1; | |
| } | |
| .list-item { | |
| margin-top: 16px; | |
| margin-bottom: 16px; | |
| margin-left: 5%; | |
| margin-right: 5%; | |
| width: 100%; | |
| opacity: 1; | |
| } | |
| .link-item { | |
| margin-bottom: 8px; | |
| padding-bottom: 0.5rem; | |
| border: 1px solid #000; | |
| border-top: 0; | |
| border-left: 0; | |
| border-right: 0; | |
| a { | |
| opacity: unset; | |
| color: blue; | |
| transition: all 0.2s ease; | |
| flex: 1; | |
| @media screen and (min-width: 768px) { | |
| &:hover { | |
| color: red; | |
| } | |
| } | |
| } | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note: There are no syntax errors, and you can assume that this code will properly run as is.
You can expect the
LinkItemcomponent to render an<a>tag with the passed props and specified inner content.