skbeta/app/layout.tsx
2024-01-13 21:04:03 -05:00

74 lines
1.8 KiB
TypeScript

import type { Metadata } from "next";
import { Inter as FontSans } from "next/font/google";
import "@/styles/globals.css";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster";
export const fontSans = FontSans({
subsets: ["latin"],
variable: "--font-sans",
});
export const metadata: Metadata = {
title: "Skalara",
description: "Automated project management for indie developers.",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<style>
{`
@media (max-width: 768px) {
.desktop-content {
display: none;
}
.mobile-message {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
font-size: 20px;
}
}
@media (min-width: 769px) {
.mobile-message {
display: none;
}
}
`}
</style>
</head>
<body
className={cn(
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
<div className="desktop-content">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
<Toaster />
</ThemeProvider>
</div>
<div className="mobile-message font-semibold">
Skalara works best on a desktop browser. Please visit us again.
</div>
</body>
</html>
);
}