Hackathons/Bitcamp-2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile Vs Web

Browse Source
This commit is contained in:
GamerBoss101
2025-04-12 13:23:38 -04:00
parent ef934d2b36
commit 94c2d58a73
4 changed files with 87 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/layout.tsx
View File

@@ -1,7 +1,12 @@
import type { Metadata } from "next"; "use client";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { useEffect, useState } from "react";
import * as rdd from "react-device-detect";
import { useRouter } from "next/navigation";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
@@ -12,16 +17,30 @@ const geistMono = Geist_Mono({
subsets: ["latin"], subsets: ["latin"],
}); });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const router = useRouter();
const [isSafari, setIsSafari] = useState<boolean>(false);
const [isMobile, setIsMobile] = useState<boolean>(false);
useEffect(() => {
setIsSafari(rdd.isSafari);
setIsMobile(rdd.isMobile);
console.log("isMobile", isMobile);
console.log("isSafari", isSafari);
}, []);
useEffect(() => {
if (isMobile && isSafari) {
router.push("/mobile");
}
}, [isMobile, isSafari, router]);
return ( return (
<html data-theme="rose" lang="en"> <html data-theme="rose" lang="en">
<body <body

6
src/app/metadata.ts Normal file
View File

@@ -0,0 +1,6 @@
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Drinkify",
description: "Drinkify health check app / game",
};

53
src/app/mobile/page.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client";
import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
Welcome to Mobile.s!
</h1>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
src/app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
</div>
);
}

27
src/app/page.tsx
View File

@@ -1,37 +1,14 @@
"use client"; "use client";
import Image from "next/image"; import Image from "next/image";
import { useEffect, useState } from "react";
import * as rdd from "react-device-detect";
export default function Home() { export default function Home() {
const [browser, setBrowser] = useState<string | null>(null);
useEffect(() => {
setBrowser(rdd.isSafari ? "safari" : rdd.browserName);
}, []);
return ( return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
{browser === "safari" ? ( <h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
<div className="text-center"> Welcome to Next.s!
<h1 className="text-2xl font-bold text-blue-600">
Welcome, Safari User!
</h1> </h1>
<p className="text-lg text-blue-500">
This is a custom experience just for Safari.
</p>
</div>
) : (
<div className="text-center">
<h1 className="text-2xl font-bold">
Welcome, {browser} User!
</h1>
<p className="text-lg text-gray-600">
Enjoy the default experience.
</p>
</div>
)}
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]"> <li className="mb-2 tracking-[-.01em]">
Get started by editing{" "} Get started by editing{" "}