mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11:25 +00:00
add PWA detector
This commit is contained in:
parent
2ad2916d6e
commit
cfda0b75f8
@ -4,6 +4,7 @@ import Settings from "./components/Settings";
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import Thread from "./components/Thread";
|
||||
import Header from "./components/Header/Header";
|
||||
import AddToHomeScreenPrompt from "./components/Modals/CheckMobile/CheckMobile";
|
||||
|
||||
function App() {
|
||||
|
||||
@ -15,6 +16,7 @@ function App() {
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/thread/:id" element={<Thread />} />
|
||||
</Routes>
|
||||
<AddToHomeScreenPrompt/>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
@ -267,7 +267,7 @@ const NewNoteCard = ({
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile || comment === "" ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
|
||||
className={`h-9 inline-flex items-center justify-center px-4 rounded-lg text-white font-medium text-sm ${doingWorkProp || uploadingFile ? 'bg-blue-900 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}
|
||||
disabled={doingWorkProp || uploadingFile}
|
||||
>
|
||||
Submit
|
||||
|
@ -19,9 +19,6 @@ export default function Header() {
|
||||
href="/settings"
|
||||
className="text-neutral-300 inline-flex gap-4 items-center"
|
||||
>
|
||||
<button>
|
||||
<QuestionMarkCircleIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<button>
|
||||
<Cog6ToothIcon className="h-5 w-5" />
|
||||
</button>
|
||||
|
73
client/src/components/Modals/CheckMobile/CheckMobile.tsx
Normal file
73
client/src/components/Modals/CheckMobile/CheckMobile.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { XMarkIcon } from "@heroicons/react/24/solid";
|
||||
import { ArrowUpOnSquareIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
declare global {
|
||||
interface Navigator {
|
||||
standalone?: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
const AddToHomeScreenPrompt: React.FC = () => {
|
||||
const [inMobileBrowser, setInMobileBrowser] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const checkPWA = () => {
|
||||
return (
|
||||
!window.navigator.standalone ||
|
||||
!window.matchMedia('(display-mode: standalone)').matches
|
||||
);
|
||||
};
|
||||
|
||||
// Function to detect mobile browser
|
||||
const detectMobileBrowser = () => {
|
||||
return (
|
||||
(navigator.userAgent.match(/Android/i) ||
|
||||
navigator.userAgent.match(/webOS/i) ||
|
||||
navigator.userAgent.match(/iPhone/i) ||
|
||||
navigator.userAgent.match(/iPad/i) ||
|
||||
navigator.userAgent.match(/iPod/i) ||
|
||||
navigator.userAgent.match(/Windows Phone/i))
|
||||
);
|
||||
};
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setInMobileBrowser(Boolean(checkPWA() && detectMobileBrowser()));
|
||||
}, 2000); // 3000 milliseconds = 3 seconds
|
||||
|
||||
// Cleanup function to clear the timeout if the component unmounts before the timeout finishes
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
if (!inMobileBrowser) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overscroll-contain fixed inset-0 bg-gray-800/40 flex items-center justify-center animate-fade-in">
|
||||
<div className="fixed bottom-0 left-0 right-0 p-4 bg-neutral-900 rounded-lg m-2 border border-neutral-700 shadow-md flex justify-between items-center animate-slide-up">
|
||||
<div className="flex flex-col text-white">
|
||||
<span className="font-semibold">Stay Wired</span>
|
||||
<p className="text-xs">Add Wired to your home screen for a better experience</p>
|
||||
<ul className="list-none mt-2 text-sm">
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2">{'>'}</span> Click on <ArrowUpOnSquareIcon className="h-6 w-6 ml-1 text-blue-500" /> <span className="font-semibold text-blue-500">Share</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2">{'>'}</span> Click <PlusCircleIcon className="h-6 w-6 ml-1 text-blue-500" /> <span className="font-semibold text-blue-500">Add to Home Screen</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<button className="absolute top-2 right-2" onClick={() => {setInMobileBrowser(!inMobileBrowser);}}>
|
||||
<XMarkIcon className="h-6 w-6 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddToHomeScreenPrompt;
|
@ -2,7 +2,22 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.25s ease-in-out',
|
||||
'slide-up': 'slideUp 0.25s ease-in-out',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(100%)' },
|
||||
'100%': { transform: 'translateY(0)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
|
Loading…
Reference in New Issue
Block a user