LinkIcon

import css from "./LinkIcon.module.css";

type Size = "sm" | "md" | "lg";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface LinkIconProps {
  size: Size | ResponsiveSize;
  icon: string;
  href: string;
  target?: string;
  "aria-label": string;
}

function getSizeClasses(size: Size | ResponsiveSize): string {
  if (typeof size === "string") {
    return css[size];
  }

  const classes = [css[`${size.base}_base`]];

  if (size.mobile) classes.push(css[`${size.mobile}_mobile`]);
  if (size.tablet) classes.push(css[`${size.tablet}_tablet`]);
  if (size.desktop) classes.push(css[`${size.desktop}_desktop`]);
  if (size.wide) classes.push(css[`${size.wide}_wide`]);

  return classes.join(" ");
}

export default function LinkIcon({
  size,
  icon,
  href,
  target,
  "aria-label": ariaLabel,
}: LinkIconProps) {
  return (
    <a
      className={`
        ${css.link}
        ${getSizeClasses(size)}
      `}
      href={href}
      target={target}
      rel={target === "_blank" ? "noopener noreferrer" : undefined}
      aria-label={ariaLabel}
    >
      <img src={icon} alt="" className={css.link_icon} />
    </a>
  );
}

.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--link-size);
  height: var(--link-size);
  /* Only the keyboard ring reads it: the box itself paints nothing. */
  border-radius: var(--radius-4);
  -webkit-tap-highlight-color: transparent;

  /* The click target never drops under 24; logos are wider than tall, so only its min-width is
     set. */
  &.sm {
    --link-size: var(--size-24);
    --link-icon: 16px;
  }

  &.md {
    --link-size: var(--size-32);
    --link-icon: 20px;
  }

  &.lg {
    --link-size: var(--size-40);
    --link-icon: 24px;
  }

  &.sm_base {
    --link-size: var(--size-24);
    --link-icon: 16px;
  }

  &.md_base {
    --link-size: var(--size-32);
    --link-icon: 20px;
  }

  &.lg_base {
    --link-size: var(--size-40);
    --link-icon: 24px;
  }

  @media (min-width: 480px) {
    &.sm_mobile {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_mobile {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_mobile {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  @media (min-width: 768px) {
    &.sm_tablet {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_tablet {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_tablet {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  @media (min-width: 1024px) {
    &.sm_desktop {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_desktop {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_desktop {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  @media (min-width: 1440px) {
    &.sm_wide {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_wide {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_wide {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  .link_icon {
    width: auto;
    height: var(--link-icon);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

<script setup lang="ts">
import { computed } from "vue";

type Size = "sm" | "md" | "lg";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface LinkIconProps {
  size: Size | ResponsiveSize;
  icon: string;
  href: string;
  target?: string;
  ariaLabel: string;
}

const { size, target } = defineProps<LinkIconProps>();

const sizeClasses = computed(() => {
  if (typeof size === "string") {
    return size;
  }

  const classes = [`${size.base}_base`];

  if (size.mobile) classes.push(`${size.mobile}_mobile`);
  if (size.tablet) classes.push(`${size.tablet}_tablet`);
  if (size.desktop) classes.push(`${size.desktop}_desktop`);
  if (size.wide) classes.push(`${size.wide}_wide`);

  return classes.join(" ");
});

const rel = computed(() =>
  target === "_blank" ? "noopener noreferrer" : undefined,
);
</script>

<template>
  <a
    class="link"
    :class="sizeClasses"
    :href="href"
    :target="target"
    :rel="rel"
    :aria-label="ariaLabel"
  >
    <img :src="icon" alt="" class="link_icon" />
  </a>
</template>

<style scoped>
.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--link-size);
  height: var(--link-size);
  /* Only the keyboard ring reads it: the box itself paints nothing. */
  border-radius: var(--radius-4);
  -webkit-tap-highlight-color: transparent;

  /* The click target never drops under 24; logos are wider than tall, so only its min-width is
     set. */
  &.sm {
    --link-size: var(--size-24);
    --link-icon: 16px;
  }

  &.md {
    --link-size: var(--size-32);
    --link-icon: 20px;
  }

  &.lg {
    --link-size: var(--size-40);
    --link-icon: 24px;
  }

  &.sm_base {
    --link-size: var(--size-24);
    --link-icon: 16px;
  }

  &.md_base {
    --link-size: var(--size-32);
    --link-icon: 20px;
  }

  &.lg_base {
    --link-size: var(--size-40);
    --link-icon: 24px;
  }

  @media (min-width: 480px) {
    &.sm_mobile {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_mobile {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_mobile {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  @media (min-width: 768px) {
    &.sm_tablet {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_tablet {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_tablet {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  @media (min-width: 1024px) {
    &.sm_desktop {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_desktop {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_desktop {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  @media (min-width: 1440px) {
    &.sm_wide {
      --link-size: var(--size-24);
      --link-icon: 16px;
    }

    &.md_wide {
      --link-size: var(--size-32);
      --link-icon: 20px;
    }

    &.lg_wide {
      --link-size: var(--size-40);
      --link-icon: 24px;
    }
  }

  .link_icon {
    width: auto;
    height: var(--link-icon);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}
</style>