franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix errors

Browse Source
This commit is contained in:
Aman Varshney
2025-02-15 13:17:27 +05:30
parent d12849501a
commit c03c469838
10 changed files with 308 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/web/src/app/(home)/_components/CenterLines.tsx
View File

@@ -1,18 +1,22 @@
import React from 'react'
import React from "react";
const CenterLines = () => {
return (
<>
<div className='absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
return (
<>
<div
className="absolute top-3/4 -translate-y-1/2 left-0 w-80 h-14
rounded-bl-3xl transform rotate-180
border-b-2 border-l-2 border-slate-700
shadow-lg backdrop-blur-sm' />
<div className='absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
shadow-lg backdrop-blur-sm"
/>
<div
className="absolute top-3/4 -translate-y-1/2 right-0 w-80 h-14
rounded-br-3xl transform rotate-180
border-b-2 border-r-2 border-slate-700
shadow-lg backdrop-blur-sm' />
</>
)
}
shadow-lg backdrop-blur-sm"
/>
</>
);
};
export default CenterLines
export default CenterLines;

216
apps/web/src/app/(home)/_components/CodeContainer.tsx
View File

@@ -1,123 +1,131 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { ChevronRight } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import PackageIcon from "./Icons";
const CodeContainer = () => {
const [isOpen, setIsOpen] = useState(false);
const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">("npm");
const [copied, setCopied] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const [isOpen, setIsOpen] = useState(false);
const [selectedPM, setSelectedPM] = useState<"npm" | "yarn" | "pnpm" | "bun">(
"npm",
);
const [copied, setCopied] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
const commands = {
npm: "npx create-better-t-stack@latest",
yarn: "yarn dlx create better-t-stack",
pnpm: "pnpm dlx create better-t-stack",
bun: "bunx create-better-t-stack"
};
const commands = {
npm: "npx create-better-t-stack@latest",
yarn: "yarn dlx create better-t-stack",
pnpm: "pnpm dlx create better-t-stack",
bun: "bunx create-better-t-stack",
};
const copyToClipboard = async (pm: "npm" | "yarn" | "pnpm" | "bun") => {
await navigator.clipboard.writeText(commands[pm]);
setSelectedPM(pm);
setCopied(true);
setIsOpen(false);
setTimeout(() => setCopied(false), 2000);
};
const copyToClipboard = async (pm: "npm" | "yarn" | "pnpm" | "bun") => {
await navigator.clipboard.writeText(commands[pm]);
setSelectedPM(pm);
setCopied(true);
setIsOpen(false);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="w-full max-w-3xl mx-auto mt-12">
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200"></div>
<div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
<div className="p-4 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
<div className="flex items-center gap-2">
<ChevronRight />
<span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400">
{commands[selectedPM]}
</span>
</div>
<div className="relative" ref={menuRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center space-x-2 px-3 py-2 w-10 justify-center rounded-md cursor-pointer hover:bg-white/10 transition-colors text-gray-300 hover:text-white relative"
>
{copied ? (
<span className="flex items-center space-x-2">
<CheckIcon className="w-5 h-5" />
</span>
) : (
<span className="flex items-center space-x-2">
<CopyIcon className="w-5 h-5" />
</span>
)}
</button>
{isOpen && (
<div className="absolute right-6 top-8 mt-2 w-24 rounded-lg backdrop-blur-lg bg-violet-950/10 shadow-xl ring-1 ring-white/10 divide-y divide-gray-700/30 transition-all duration-200">
{(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => (
<button
key={pm}
onClick={() => copyToClipboard(pm)}
className="group cursor-pointer flex items-center w-full px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 first:rounded-t-lg last:rounded-b-lg"
>
<PackageIcon className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform" pm={pm} /> {pm}
</button>
))}
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
return (
<div className="w-full max-w-3xl mx-auto mt-12">
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg backdrop-blur-lg opacity-25 transition duration-1000 group-hover:duration-200" />
<div className="relative rounded-lg p-1 bg-slate-900/30 backdrop-blur-xl">
<div className="p-4 font-mono text-gray-300 text-sm bg-black/20 rounded-lg flex items-center justify-between">
<div className="flex items-center gap-2">
<ChevronRight />
<span className="text-base bg-clip-text text-transparent bg-gradient-to-br from-purple-400 via-pink-400 to-yellow-400">
{commands[selectedPM]}
</span>
</div>
<div className="relative" ref={menuRef}>
<button
type="button"
onClick={() => setIsOpen(!isOpen)}
className="flex items-center space-x-2 px-3 py-2 w-10 justify-center rounded-md cursor-pointer hover:bg-white/10 transition-colors text-gray-300 hover:text-white relative"
>
{copied ? (
<span className="flex items-center space-x-2">
<CheckIcon className="w-5 h-5" />
</span>
) : (
<span className="flex items-center space-x-2">
<CopyIcon className="w-5 h-5" />
</span>
)}
</button>
{isOpen && (
<div className="absolute right-6 top-8 mt-2 w-24 rounded-lg backdrop-blur-lg bg-violet-950/10 shadow-xl ring-1 ring-white/10 divide-y divide-gray-700/30 transition-all duration-200">
{(["npm", "yarn", "pnpm", "bun"] as const).map((pm) => (
<button
type="button"
key={pm}
onClick={() => copyToClipboard(pm)}
className="group cursor-pointer flex items-center w-full px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 first:rounded-t-lg last:rounded-b-lg"
>
<PackageIcon
className="h-4 w-4 mr-2 group-hover:scale-110 transition-transform"
pm={pm}
/>{" "}
{pm}
</button>
))}
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
};
const CopyIcon = ({ className = "" }) => (
<svg
className={className}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
<svg
className={className}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>copy</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
);
const CheckIcon = ({ className = "" }) => (
<svg
className={className}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
<svg
className={className}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>check</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
);
export default CodeContainer;
export default CodeContainer;

104
apps/web/src/app/(home)/_components/CodeExample.tsx
View File

@@ -1,58 +1,58 @@
/** eslint-disable react/jsx-no-comment-textnodes */
import React from 'react'
import React from "react";
const CodeExample = () => {
return (
<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-900 border border-slate-700">
<div className="flex items-center px-4 py-2 bg-slate-800">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
</div>
<span className="ml-4 text-sm text-slate-400">example.ts</span>
</div>
return (
<div className="max-w-2xl mx-auto mt-8 rounded-lg overflow-hidden bg-slate-900 border border-slate-700">
<div className="flex items-center px-4 py-2 bg-slate-800">
<div className="flex space-x-2">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
</div>
<span className="ml-4 text-sm text-slate-400">example.ts</span>
</div>
<div className="p-4 font-mono text-sm relative">
<div className="space-y-2">
<div className="text-slate-400">{"// ❌ Without Type Safety"}</div>
<div className="text-white">
function processUser(user) {
<span className="text-red-400">console.log(user.namee)</span>
}
</div>
<div className="text-red-400 text-xs bg-red-900/30 p-2 rounded">
Property &apos;namee&apos; does not exist on type &apos;User&apos;.
Did you mean &apos;name&apos;?
</div>
<div className="p-4 font-mono text-sm relative">
<div className="space-y-2">
<div className="text-slate-400">{"// ❌ Without Type Safety"}</div>
<div className="text-white">
function processUser(user){" "}
{<span className="text-red-400">console.log(user.namee)</span>}
</div>
<div className="text-red-400 text-xs bg-red-900/30 p-2 rounded">
Property &apos;namee&apos; does not exist on type &apos;User&apos;.
Did you mean &apos;name&apos;?
</div>
<div className="mt-6 text-slate-400">{"// ✅ With Type Safety"}</div>
<div>
<span className="text-blue-400">interface</span>
<span className="text-green-400"> User</span>
<span className="text-white"> {'{'}</span>
</div>
<div className="pl-4 text-slate-200">
name: string;
<br />
age: number;
</div>
<div className="text-white">{'}'}</div>
<div>
<span className="text-blue-400">function</span>
<span className="text-yellow-400"> processUser</span>
<span className="text-white">(user: </span>
<span className="text-green-400">User</span>
<span className="text-white">) {'{'}</span>
</div>
<div className="pl-4 text-slate-200">
console.log(user.name) <span className="text-slate-400">{"// ✨ Type checked!"}</span>
</div>
<div className="text-white">{'}'}</div>
</div>
</div>
</div>
)
}
<div className="mt-6 text-slate-400">{"// ✅ With Type Safety"}</div>
<div>
<span className="text-blue-400">interface</span>
<span className="text-green-400"> User</span>
<span className="text-white"> {"{"}</span>
</div>
<div className="pl-4 text-slate-200">
name: string;
<br />
age: number;
</div>
<div className="text-white">{"}"}</div>
<div>
<span className="text-blue-400">function</span>
<span className="text-yellow-400"> processUser</span>
<span className="text-white">(user: </span>
<span className="text-green-400">User</span>
<span className="text-white">) {"{"}</span>
</div>
<div className="pl-4 text-slate-200">
console.log(user.name){" "}
<span className="text-slate-400">{"// ✨ Type checked!"}</span>
</div>
<div className="text-white">{"}"}</div>
</div>
</div>
</div>
);
};
export default CodeExample
export default CodeExample;

4
apps/web/src/app/(home)/_components/Icons.tsx
View File

@@ -18,6 +18,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
strokeLinejoin="round"
strokeMiterlimit="2"
>
<title>yarn</title>
<path
d="M256 0c141.344 0 256 114.656 256 256S397.344 512 256 512 0 397.344 0 256 114.656 0 256 0z"
fill="#2c8ebb"
@@ -39,7 +40,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
>
<title>file_type_pnpm</title>
<title>pnpm</title>
<path d="M30,10.75H21.251V2H30Z" style={{ fill: "#f9ad00" }} />
<path d="M20.374,10.75h-8.75V2h8.75Z" style={{ fill: "#f9ad00" }} />
<path d="M10.749,10.75H2V2h8.749Z" style={{ fill: "#f9ad00" }} />
@@ -58,6 +59,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
fill="none"
viewBox="0 0 100 100"
>
<title>bun</title>
<path
fill="#000"
d="M89.237 32.3c-.2-.213-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625-.212-.2-.412-.425-.625-.625A33.08 33.08 0 0 1 94.75 51c0 20.712-21.025 37.562-46.875 37.562-14.475 0-27.425-5.287-36.038-13.575l.625.625.625.625.625.625.625.625.625.625.625.625.625.625c8.6 8.638 21.838 14.2 36.663 14.2 25.85 0 46.875-16.85 46.875-37.5 0-8.825-3.8-17.187-10.513-23.762"

21
apps/web/src/app/(home)/_components/NpmPackage.tsx
View File

@@ -5,20 +5,22 @@ import { useEffect, useState } from "react";
const NpmPackage = () => {
const [version, setVersion] = useState("");
const getLatestVersion = async () => {
const res = await fetch(
"https://registry.npmjs.org/create-better-t-stack/latest",
);
const data = await res.json();
setVersion(data.version);
};
useEffect(() => {
const getLatestVersion = async () => {
const res = await fetch(
"https://registry.npmjs.org/create-better-t-stack/latest",
);
const data = await res.json();
setVersion(data.version);
};
getLatestVersion();
}, []);
return (
<button className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block">
<button
type="button"
className="bg-slate-800 no-underline group cursor-pointer relative shadow-2xl shadow-zinc-900 rounded-full p-px text-xs font-semibold leading-6 text-white inline-block"
>
<span className="absolute inset-0 overflow-hidden rounded-full">
<span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
</span>
@@ -31,6 +33,7 @@ const NpmPackage = () => {
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<title>arrow</title>
<path
d="M10.75 8.75L14.25 12L10.75 15.25"
stroke="currentColor"

11
apps/web/src/app/(home)/_components/SafetyMessage.tsx
View File

@@ -1,10 +1,5 @@
const SafetyMessage = () => {
return (
<div className="relative">
return <div className="relative" />;
};
</div>
)
}
export default SafetyMessage
export default SafetyMessage;

93
apps/web/src/app/(home)/page.tsx
View File

@@ -1,53 +1,62 @@
import React from "react";
import ShinyText from "components/ShinyText/ShinyText";
import { Poppins } from "next/font/google";
import React from "react";
import BackgroundGradients from "./_components/BackgroundGradients";
import Spotlight from "./_components/Spotlight";
import CodeContainer from "./_components/CodeContainer";
import NpmPackage from "./_components/NpmPackage";
import SideCircles from "./_components/SideCircles";
import CodeContainer from "./_components/CodeContainer";
import ShinyText from "components/ShinyText/ShinyText";
import Spotlight from "./_components/Spotlight";
const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
subsets: ["latin"],
weight: ["400", "500", "600", "700"],
});
export default function HomePage() {
return (
<main className="min-h-screen flex flex-col items-center justify-start p-8" style={poppins.style}>
<BackgroundGradients />
<Spotlight />
<SideCircles />
<div className="max-w-6xl mx-auto text-center mb-16 relative z-50">
<div className="relative z-10">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<NpmPackage />
<h1 className="text-6xl font-extrabold text-white">
<span className="block text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">Better-T Stack</span>
<span className="relative">
<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 via-pink-500 to-rose-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
</span>
</h1>
return (
<main
className="min-h-screen flex flex-col items-center justify-start p-8"
style={poppins.style}
>
<BackgroundGradients />
<Spotlight />
<SideCircles />
<div className="max-w-6xl mx-auto text-center mb-16 relative z-50">
<div className="relative z-10">
<div className="flex flex-col items-center justify-center space-y-4 text-center">
<NpmPackage />
<h1 className="text-6xl font-extrabold text-white">
<span className="block text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-500 via-pink-400 to-yellow-200">
Better-T Stack
</span>
<span className="relative">
<span className="absolute -bottom-1 left-0 right-0 h-1 bg-gradient-to-r from-purple-400 via-pink-500 to-rose-500 transform origin-left transition-transform duration-300 ease-out scale-x-0 group-hover:scale-x-100" />
</span>
</h1>
<p className="text-2xl font-medium text-gray-300 max-w-2xl">
<span className="inline-block transform hover:scale-105 transition-transform duration-200">
Scaffold
</span>{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">
production-ready
</span>{" "}
<span className="inline-block transition-transform duration-200">
Better-T projects in seconds
</span>
</p>
<CodeContainer />
<ShinyText text="Be the safest developer with typesafe Typescript" speed={3} className="text-lg" />
</div>
</div>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20 blur-3xl transform -skew-y-12" />
</div>
</div>
</main>
);
<p className="text-2xl font-medium text-gray-300 max-w-2xl">
<span className="inline-block transform hover:scale-105 transition-transform duration-200">
Scaffold
</span>{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400">
production-ready
</span>{" "}
<span className="inline-block transition-transform duration-200">
Better-T projects in seconds
</span>
</p>
<CodeContainer />
<ShinyText
text="Be the safest developer with typesafe Typescript"
speed={3}
className="text-lg"
/>
</div>
</div>
<div className="absolute inset-0 -z-10">
<div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20 blur-3xl transform -skew-y-12" />
</div>
</div>
</main>
);
}

40
apps/web/src/app/global.css
View File

@@ -5,32 +5,34 @@
@source '../../../../node_modules/fumadocs-ui/dist/**/*.js';
.bg-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
}
.shiny-text {
color: #b5b5b5a4;
background: linear-gradient(120deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 60%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
display: inline-block;
animation: shine 5s linear infinite;
color: #b5b5b5a4;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 60%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
display: inline-block;
animation: shine 5s linear infinite;
}
@keyframes shine {
0% {
background-position: 100%;
}
0% {
background-position: 100%;
}
100% {
background-position: -100%;
}
100% {
background-position: -100%;
}
}
.shiny-text.disabled {
animation: none;
}
animation: none;
}

42
apps/web/src/app/layout.tsx
View File

@@ -1,34 +1,32 @@
import "./global.css";
import { RootProvider } from "fumadocs-ui/provider";
import { Inter } from "next/font/google";
import { Suspense, type ReactNode } from "react";
import { type ReactNode, Suspense } from "react";
import Navbar from "./(home)/_components/Navbar";
const inter = Inter({
subsets: ["latin"],
subsets: ["latin"],
});
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="flex flex-col min-h-screen relative bg-black">
<RootProvider>
<Navbar />
<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 pt-20 transition-colors duration-300 overflow-hidden">
<Suspense fallback={<LoadingSpinner />}>
{children}
</Suspense>
</div>
</RootProvider>
</body>
</html>
);
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="flex flex-col min-h-screen relative bg-black">
<RootProvider>
<Navbar />
<div className="relative z-10 bg-zinc-50 dark:bg-zinc-950 pt-20 transition-colors duration-300 overflow-hidden">
<Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
</div>
</RootProvider>
</body>
</html>
);
}
function LoadingSpinner() {
return (
<div className="flex items-center justify-center min-h-[200px]">
<div className="w-8 h-8 border-4 border-zinc-300 border-t-zinc-800 rounded-full animate-spin" />
</div>
);
}
return (
<div className="flex items-center justify-center min-h-[200px]">
<div className="w-8 h-8 border-4 border-zinc-300 border-t-zinc-800 rounded-full animate-spin" />
</div>
);
}