shadcn config + skeleton addition

app/dashboard/layout.tsx

@@ -2,6 +2,7 @@ import FetchUser from "@/components/fetchDataComponents/FetchUser";
 import HeaderNavBar from "@/components/navBars/HeaderNavBar";
 import MobileNavBar from "@/components/navBars/MobileNavBar";
 import SideNavBar from "@/components/navBars/SideNavBar";
+
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -23,6 +24,7 @@ export default function RootLayout({
       <HeaderNavBar />
       <div className="flex h-full">
         <SideNavBar />
+
         {children}
       </div>
     </div>

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "@/components/shadcn",
+    "utils": "@/lib/utils"
+  }
+}

components/navBars/HeaderNavBar.tsx

@@ -6,11 +6,12 @@ import UserProfileIcon from "../ui/UserProfileIcon";
 import Link from "next/link";
 import MobileShowBtn from "../ui/MobileShowBtn";
 
+
 import ModalUserProfile from "../ui/ModalUserProfile";
 
 const HeaderNavBar = () => {
   return (
-    <div className="flex h-[93px] items-center justify-between bg-dark-2 px-6 py-8 ">
+    <div className="bg-dark-2 flex h-[93px] items-center justify-between px-6 py-8 ">
       <HeaderNavLogo />
       <InputSearchBar />
       <div className="flex items-center space-x-10 max-2sm:hidden">
@@ -30,12 +31,13 @@ const HeaderNavBar = () => {
           Orders
         </Link>
         <div>
-          <UserProfileIcon
-            custumStylesImage="h-[50px] w-[50px]"
-            custumStylesOnline="h-[15px] w-[15px] -translate-y-3 translate-x-8"
-            showModal={true}
-          />
-
+
+            <UserProfileIcon
+              custumStylesImage="h-[50px] w-[50px]"
+              custumStylesOnline="h-[15px] w-[15px] -translate-y-3 translate-x-8"
+              showModal={true}
+            />
+
           <ModalUserProfile />
         </div>
       </div>

components/shadcn/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-slate-800", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/skeleton/UserProfileIconSkeleton.tsx

@@ -0,0 +1,7 @@
+import { Skeleton } from "../shadcn/ui/skeleton";
+
+const UserProfileIconSkeleton = () => {
+  return <Skeleton className=" h-[50px] w-[50px] rounded-full" />;
+};
+
+export default UserProfileIconSkeleton;

components/ui/UserProfileIcon.tsx

@@ -5,6 +5,8 @@ import { useDispatch } from "react-redux";
 import { showProfileModal } from "@/store/modalSlice";
 
 import Image from "next/image";
+import { useEffect } from "react";
+import UserProfileIconSkeleton from "../skeleton/UserProfileIconSkeleton";
 
 type Props = {
   custumStylesImage: string;
@@ -19,7 +21,15 @@ const UserProfileIcon = ({
 }: Props) => {
   const dispatch = useDispatch<any>();
   const user = useAppSelector((state) => state.user.user);
+  const userLoadingStatus = useAppSelector(
+    (state) => state.user.statusCurrentUser,
+  );
 
+  useEffect(() => {}, [userLoadingStatus]);
+  console.log(userLoadingStatus + "ffffff");
+  if (userLoadingStatus === "loading" || userLoadingStatus === "") {
+    return <UserProfileIconSkeleton />;
+  }
   return (
     <div
       onClick={() => showModal && dispatch(showProfileModal())}
@@ -30,13 +40,12 @@ const UserProfileIcon = ({
         alt="user profile image"
         width={50}
         height={50}
-        onLoadingComplete={(image) => image.classList.remove("opacity-0")}
-        className={`circle-image relative ${custumStylesImage}  cursor-pointer  
-        rounded-full object-cover object-center opacity-0 
-         transition-opacity duration-[2s]`}
+        className={`circle-image relative ${custumStylesImage}  duration-[2s]  
+        cursor-pointer rounded-full object-cover object-center 
+         `}
       />
       <div
-        className={`absolute ${custumStylesOnline} h-[15px] w-[15px] cursor-pointer -translate-y-3 translate-x-8 rounded-full border-[1px] border-white bg-[#1DBF73]`}
+        className={`absolute ${custumStylesOnline} h-[15px] w-[15px] -translate-y-3 translate-x-8 cursor-pointer rounded-full border-[1px] border-white bg-[#1DBF73]`}
       ></div>
     </div>
   );

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@next/bundle-analyzer": "^13.4.19",
+    "@radix-ui/react-slot": "^1.0.2",
     "@reduxjs/toolkit": "^1.9.5",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/node": "20.4.7",
@@ -20,9 +21,12 @@
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
     "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "cookie": "^0.5.0",
     "framer-motion": "^10.16.4",
     "jose": "^4.14.6",
+    "lucide-react": "^0.279.0",
     "mongoose": "^7.4.2",
     "next": "13.4.12",
     "postcss": "8.4.27",
@@ -31,7 +35,9 @@
     "react-redux": "^8.1.2",
     "react-select": "^5.7.4",
     "react-toastify": "^9.1.3",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "5.1.6",
     "uploadthing": "^5.3.3",
     "zod-validation-error": "^1.3.1"