const iconsArea = document.querySelector(".icons");

const icons = [
  {
    key: 0,
    href: "https://web.telegram.org/k/",
    img: "img/telegram-icon.jpeg",
    alt: "telegram-icon",
    text: "Telegram",
  },
  {
    key: 1,
    href: "https://github.com",
    img: "img/github-icon.png",
    alt: "github-icon",
    text: "github.com",
  },
  {
    key: 0,
    href: "https://gitea.home.com:3000",
    img: "img/gitea-icon.png",
    alt: "gitea-icon",
    text: "gitea.home.com",
  },
  {
    key: 1,
    href: "http://jellyfin.home.com:8096",
    img: "img/jellyfin.png",
    alt: "jellyfin-icon",
    text: "jellyfin.home.com",
  },
  {
    key: 2,
    href: "http://immich.home.com:2283",
    img: "img/immich-icon.png",
    alt: "immich-icon",
    text: "immich.home.com",
  },
  {
    key: 3,
    href: "http://navidrome.home.com:4533",
    img: "img/navidrome-icon.png",
    alt: "navidrome-icon",
    text: "navidrome.home.com",
  },
  {
    key: 4,
    href: "https://portainer.home.com:9443",
    img: "img/portainer-icon.webp",
    alt: "portainer-icon",
    text: "portainer.home.com",
  },
  {
    key: 5,
    href: "https://dns.home.com",
    img: "img/dnsmasq-icon.jpeg",
    alt: "dnsmasq-icon",
    text: "dns.home.com",
  },
];

icons.map((icon) => {
  iconsArea.innerHTML += `<div class="icon">
                <a href="${icon.href}">
                    <img src="${icon.img}" alt="${icon.alt}" />
                </a>
            </div>`;
});