Адаптивный и многоязычный компонент футера для Vue 3: создание и использование

[danilovmy]

А не проще ли было поставить фильтр на передаваемые social:

function filterBy(social, type) {
return social.filter( item => item.tags.includes(type))
}

и после

<FooterDesktopOrMobile :lang="lang" :social="filterBy(social, width < 769 ? 'mobile' : 'desctop' )" />

а то копипаста же лютая.

[LinaRSH]

Ну ради публикации можно было бы и причесать кодстайл. Например линтером или линтером с преттиером:
- FooterMobile и FooterDesktop написаны в разном стиле, в одном варианте атрибуты написаны по одному на строку, в другом все в одной строке. Как можно исправить и автомотизировать можно посмотреть тут https://eslint.vuejs.org/rules/max-attributes-per-line.html
- Object.assign(socialMedia) в данном коде вообще бесполезен так как мутирует исходное значение
- Сортировка импортов отсутствует, деструктуризацию vue нужно объединить

[Karlen-ll]

Согласен c предыдущими комментаторами, и добавлю:

• Убери дублирующий код, как предложил danilovmy, но я бы ещё и lang в фильтр закинул:
  
  ```javascript
  function filterBy(social, tags) {
  return social.filter((item) => item.tags.some((tag) => (tag === 'all' || tags.includes(tag))))
  }
  
  const filteredSocial = computed(() => filterBy(social, [width < 769 ? 'mobile' : 'desctop' , lang]) )
  ```
  
  В результат:
  ```html
  <footer-desktop-or-mobile :social="filteredSocial" />
  ```
  И необходимости в defineAsyncComponent — нет.

• Где в теге nav ссылки?;

• Списки лучше сделать с помощью тегов ul & li;

• Сократи количество div-обёрток, например:
  ```html
  <div class="mr-3"> <navigation-language-select @lang="handleChangeLang" /> </div>
  ```
  переписать на:
  ```html
  <navigation-language-select class="mr-3" @lang="handleChangeLang" />
  ```