﻿<template>
  <div>
    <div v-if="screenSize === 'sm'" class="size-code bg-blue-500 text-white">
      sm
    </div>

    <div v-if="screenSize === 'md'" class="size-code bg-green-500 text-white">
      md
    </div>

    <div v-if="screenSize === 'lg'" class="size-code bg-yellow-500 text-black">
      lg
    </div>

    <div v-if="screenSize === 'xl'" class="size-code bg-red-500 text-white">
      xl
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenSize: '',
    };
  },
  mounted() {
    this.detectScreenSize();
    window.addEventListener('resize', this.detectScreenSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.detectScreenSize);
  },
  methods: {
    detectScreenSize() {
      const width = window.innerWidth;

      if (width < 640) {
        this.screenSize = 'sm';
      } else if (width >= 640 && width < 1024) {
        this.screenSize = 'md';
      } else if (width >= 1024 && width < 1280) {
        this.screenSize = 'lg';
      } else {
        this.screenSize = 'xl';
      }
    },
  },
};
</script>

<style scoped>
.size-code {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 50;
  padding: 0.5rem;
  margin: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  font-weight: 600;
  text-transform: capitalize;
  border-radius: 0.25rem;
}
</style>
