feat: add dynamic screen size table component

Author: sabeerbikba

src/pages/ScreenSize.jsx

@@ -0,0 +1,74 @@
+import { useState, useEffect } from "react";
+
+const ScreenSize = () => {
+  const getViewport = () => {
+    if (window.visualViewport) {
+      return {
+        width: window.visualViewport.width,
+        height: window.visualViewport.height,
+        dpr: window.devicePixelRatio,
+      };
+    }
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      dpr: window.devicePixelRatio,
+    };
+  };
+
+  const [size, setSize] = useState(getViewport());
+
+  useEffect(() => {
+    const handleResize = () => setSize(getViewport());
+
+    window.addEventListener("resize", handleResize);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", handleResize);
+    }
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleResize);
+      }
+    };
+  }, []);
+
+  const getReducedRatio = (w, h) => {
+    const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
+    const divisor = gcd(Math.round(w), Math.round(h));
+    return `${Math.round(w / divisor)}:${Math.round(h / divisor)}`;
+  };
+
+  return (
+    <div className="flex justify-center items-center min-h-screen">
+      <table className="table-auto border-collapse border border-gray-400 shadow-lg rounded-lg">
+        <thead className="bg-white/10">
+          <tr>
+            <th className="border border-gray-400 px-4 py-2">Property</th>
+            <th className="border border-gray-400 px-4 py-2">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries({
+            Width: `${size.width.toFixed(2)}px`,
+            Height: `${size.height.toFixed(2)}px`,
+            "Aspect Ratio": `${getReducedRatio(size.width, size.height)} (${(
+              size.width / size.height
+            ).toFixed(2)})`,
+            "Device Pixel Ratio": size.dpr.toFixed(2),
+          }).map(([key, value]) => (
+            <tr key={key}>
+              <td className="border border-gray-400 px-4 py-2 capitalize text-center">
+                {key}
+              </td>
+              <td className="border border-gray-400 px-4 py-2 text-center">{value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ScreenSize;

src/routes.jsx

@@ -17,7 +17,8 @@ import {
   Hash,
   ClipboardList,
   ListChecks,
-  CaseSensitive
+  CaseSensitive,
+  Monitor,
 } from "lucide-react";
 
 import HomePage from "@/Home";
@@ -30,6 +31,7 @@ const SQIPPreviewer = lazy(() => import("@/pages/SQIPPreviewer"));
 const TypescriptPlayground = lazy(() => import("@/pages/TypescriptPlayground"));
 const GrapesJSEditor = lazy(() => import("@/pages/GrapesJSEditor"));
 const LoremIpsumGenerator = lazy(() => import("@/pages/LoremIpsumGenrator"));
+import ScreenSize from "@/pages/ScreenSize";
 import UnitConverter from "@/pages/UnitConverter";
 const MarkdownEditor = lazy(() => import("@/pages/MarkdownEditor"));
 const DiffViewer = lazy(() => import("@/pages/DiffViewer"));
@@ -40,7 +42,7 @@ import StringConverter from "@/pages/StringConverter";
 const QrCodeGenerator = lazy(() => import("@/pages/QRCodeGenrator"));
 const HashGenerator = lazy(() => import("@/pages/HashGenerator"));
 const ImageMetadataViewer = lazy(() => import("@/pages/ImageMetadataViewer"));
-const TextStylingTool = lazy(() => import("./pages/CssTextStyling"));
+const TextStylingTool = lazy(() => import("@/pages/CssTextStyling"));
 import Websites from "@/pages/Websites";
 // import Test from "@/pages/testing/Test"; // Testing purpose
 import NoPage from "@/pages/NoPage";
@@ -227,6 +229,15 @@ const routes = [
     category: "Color",
     icon: <Palette className={size5} />,
   },
+  {
+    isNew: true,
+    path: "screen-size",
+    element: <ScreenSize />,
+    description:
+      "Check your device screen width, height, and viewport dimensions in real time.",
+    category: "Utility",
+    icon: <Monitor className={size5} />,
+  },
   {
     path: "css-unit-converter",
     element: <UnitConverter />,
@@ -245,6 +256,16 @@ const routes = [
     category: "css",
     icon: <CaseSensitive className={size5} />,
   },
+  /* 
+  { // Testing purpose
+    path: "test",
+    element: <Test />,
+    description:
+      "Interactive text style playground for tweaking fonts, gradients, shadows, strokes, and advanced CSS properties. Copy-ready output.",
+    category: "null",
+    icon: <CaseSensitive className={size5} />,
+  }, 
+  */
   {
     path: "websites",
     element: <Websites />,

src/styles/output.css

@@ -2,6 +2,7 @@
 
 ## Tasks for allready exist component
 
+- every tool change need to be reflect in SEO meta tags for better seo
 - add tool link: https://www.fontfabric.com/font-tester/?srsltid=AfmBOoqkzkNO_pSMffdfgjkWiVRWqj2p51Dj6mSX4DtUuZJyxg9AqHWz
 - done just remove lib with command, [ ] remove `store` lib instead use locaStorageState hook if it is good option,
 - For editor if mobile need to load simple simple textarea and initially monaco editor take time to load until need to show normal editor if until user allready type something need to show ask first want to change editor to monaco to better experiance
@@ -70,7 +71,6 @@
   * normal sms <<!--** https://salam.qanawat-me.com/Alnufais/ **-->>
   * \*find more
 - [ ] (Browser Info) browser all api support need to show table with api name and supprt yes or no example
-  - [ ] screen width and height live specially for mobile means mobile first
     - also need add tip how to check in dev-tools like as you resize in dev tools show screen widthxheight in top-right corner
   - [ ] device info with navigator API