Tailwindcss Screen Size Helper

"use client";
import React, { useState, useEffect } from "react";

const ScreenSize = () => {
  // Ekran boyutunu tutacak state
  const [screenSize, setScreenSize] = useState("");

  // Ekran boyutunu kontrol eden fonksiyon
  const updateScreenSize = () => {
    const width = window.innerWidth;
    if (width < 640) {
      setScreenSize("xs ");
    } else if (width > 640 && width < 768) {
      setScreenSize("sm ");
    } else if (width >= 768 && width < 1024) {
      setScreenSize("md ");
    } else if (width >= 1024 && width < 1280) {
      setScreenSize("lg ");
    } else if (width >= 1280 && width < 1536) {
      setScreenSize("xl ");
    } else if (width >= 1536) {
      setScreenSize("2xl");
    }
  };

  // Ekran boyutunu değiştirdiğinde çalışacak effect
  useEffect(() => {
    updateScreenSize(); // Sayfa ilk yüklendiğinde ekran boyutunu ayarla

    // Ekran boyutu değiştiğinde updateScreenSize fonksiyonunu çağır
    window.addEventListener("resize", updateScreenSize);

    // Temizleme fonksiyonu (component unmount olduğunda event listener'ı kaldırmak için)
    return () => {
      window.removeEventListener("resize", updateScreenSize);
    };
  }, []);

  return (
    <div
      className="fixed bottom-10 left-10 bg-yellow-600 text-white   p-2 rounded-full uppercase font-bold
      2xl:bg-red-900 xl:bg-blue-700 lg:bg-green-700 md:bg-orange-700 sm:bg-slate-500
      "
      style={{ fontSize: "14px" }}
    >
      {screenSize}
    </div>
  );
};

export default ScreenSize;