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

29
src/app/page.tsx
View File

@@ -1,37 +1,14 @@
"use client";
import Image from "next/image";
import { useEffect, useState } from "react";
import * as rdd from "react-device-detect";
export default function Home() {
const [browser, setBrowser] = useState<string | null>(null);
useEffect(() => {
setBrowser(rdd.isSafari ? "safari" : rdd.browserName);
}, []);
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">
{browser === "safari" ? (
<div className="text-center">
<h1 className="text-2xl font-bold text-blue-600">
Welcome, Safari User!
</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>
)}
<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
Welcome to Next.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{" "}