From d60108912fa9bc61706d1c4ddacbe95b56ac909d Mon Sep 17 00:00:00 2001
From: Hasan Yahya <hasna786yahya@gmail.com>
Date: Sun, 28 Jul 2024 10:25:42 +0500
Subject: [PATCH] refactor: Update Apology component with dark mode support and
 lazy loading for images

---
 src/components/component/apology.jsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/component/apology.jsx b/src/components/component/apology.jsx
index a38a606..dd24275 100644
--- a/src/components/component/apology.jsx
+++ b/src/components/component/apology.jsx
@@ -1,12 +1,31 @@
+import { useTheme } from "@/components/theme-provider";
+import { useEffect } from "react";
+
+const isDesktop = () => {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    const isMobile = /mobile|android|iphone|ipad|tablet|touch|samsung|fridge/i.test(userAgent);
+    const isSmallScreen = window.innerWidth <= 1024;
+    return !isMobile && !isSmallScreen;
+};
+
 export default function Apology() {
+    const { setTheme } = useTheme();
+    const isDesktopDevice = isDesktop();
+
+    useEffect(() => {
+        if (isDesktopDevice === false) {
+            setTheme("system");
+        }
+    }, []);
+
     return (
-        <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
+        <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-background dark:bg-black px-4 py-12 sm:px-6 lg:px-8">
             <div className="mx-auto max-w-md text-center">
                 <SmartphoneIcon className="mx-auto h-12 w-12 text-primary" />
-                <h1 className="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+                <h1 className="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl dark:text-white">
                     Sorry, this website is only available for desktop
                 </h1>
-                <p className="mt-4 text-muted-foreground">
+                <p className="mt-4 text-muted-foreground dark:text-gray-400">
                     We apologize for the inconvenience, but our website is currently optimized for desktop devices only. Please
                     try accessing this site from a computer or laptop.
                 </p>