"use client";

import Sidebar from "./(components)/Sidebar";
import Navbar from "./(components)/Navbar";
import Particles from "@/components/magicui/particles";
import React, { useState } from "react";
import Kbar from "./(components)/ui/kbar";
import { motion } from "framer-motion";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [color] = useState("#FFC0CB");

  // Create a unique key based on a counter or a route identifier if using routing.
  const uniqueKey = new Date().getTime(); // Or use a route-based identifier

  return (
    <div className="grid text-white  min-h-screen bg-black-100 w-full lg:grid-cols-[280px_1fr]">
      <Particles
        className="absolute z-20 inset-0"
        quantity={100}
        ease={80}
        color={color}
        refresh
      />
      <Sidebar />
      <div className="flex-1">
        <Navbar>
          <main className="z-40 relative pb-5   flex flex-col gap-4 px-5 lg:gap-6">
            <Kbar />


              {children}
          </main>
        </Navbar>
      </div>
    </div>
  );
}

- App
  - (home) // Main application routes
    - layout.tsx // Contains Header and Footer for the main pages
    // Add subfolders or files here to define root routes for home

  - dashboard // Dashboard-specific routes
    - layout.tsx // Layout without Header and Footer
    // Add subfolders or files here to define dashboard routes