Added banner to inform project is for demo only

pranav-kural · Sep 24, 2024 · 3d78975 · 3d78975
1 parent a3610f1
commit 3d78975
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 3 deletions.
diff --git a/app/components/header/DemoHeadline.tsx b/app/components/header/DemoHeadline.tsx
@@ -0,0 +1,21 @@
+import Link from 'next/link';
+import {FC} from 'react';
+
+export const DemoHeadline: FC = () => {
+  return (
+    <div className="w-full py-2 bg-violet-900 text-violet-300 text-sm text-center">
+      <p className="text-center">
+        This project is for demonstration purposes only. For more information,
+        check{' '}
+        <Link
+          href="https://www.pkural.ca/projects/#plamatio-e-commerce"
+          className="underline hover:font-[500]">
+          here
+        </Link>
+        .
+      </p>
+    </div>
+  );
+};
+
+export default DemoHeadline;
diff --git a/app/components/header/Header.tsx b/app/components/header/Header.tsx
@@ -10,7 +10,7 @@ const greatVibes = Great_Vibes({weight: '400', subsets: ['latin']});
 export const Header = () => {
   return (
     <div className="flex flex-col align-middle justify-center w-full my-5">
-      <div className="w-full flex flex-col items-center justify-center mt-5 xs:mt-0">
+      <div className="w-full flex flex-col items-center justify-center mt-2 xs:mt-0">
         <Link
           href="/"
           className={`${greatVibes.className} text-violet-900 text-[3.5rem]`}>

diff --git a/app/components/header/cart/CartDropdownMenu.tsx b/app/components/header/cart/CartDropdownMenu.tsx
@@ -1,15 +1,32 @@
+'use client';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import {ShoppingBagIcon} from 'lucide-react';
 import {CartDropdownItems} from './CartDropdownItems';
+import {useAppSelector} from '@/app/lib/store/storeHooks';
+import {selectCartItems} from '@/app/lib/store/reducers/cart/cartReducer';
 
 const CartDropdownMenu = () => {
+  // const userId: string | undefined = undefined;
+  const cartItems = useAppSelector(selectCartItems);
+
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
           className="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-violet-800 bg-white outline-none hover:bg-violet3"
           aria-label="Cart Items">
-          <ShoppingBagIcon size={35} strokeWidth={1} />
+          <div className="relative">
+            <ShoppingBagIcon
+              size={35}
+              strokeWidth={1}
+              className="mt-1 relative"
+            />
+            {cartItems.length > 0 && (
+              <span className="absolute -bottom-1 right-0 bg-violet-700 text-white text-xs font-bold rounded-full px-1">
+                {cartItems.length}
+              </span>
+            )}
+          </div>
         </button>
       </DropdownMenu.Trigger>
 

diff --git a/app/components/header/nav/NavMenu.tsx b/app/components/header/nav/NavMenu.tsx
@@ -59,7 +59,7 @@ const NavMenus = async () => {
   return (
     <>
       <NavigationMenu.Root className="relative z-[1] flex w-screen justify-center">
-        <NavigationMenu.List className="center m-0 flex list-none rounded-[6px] p-1">
+        <NavigationMenu.List className="center m-0 flex list-none rounded-[6px]">
           {menuItems &&
             menuItems.map((item) => <NavMenuItem key={item.id} item={item} />)}
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,6 +8,7 @@ import LoadCartItems from './components/auxiliary/LoadCartItems';
 import LoadProducts from './components/auxiliary/LoadProducts';
 import {CreateUserBridge} from './components/landing/CreateUserBridge';
 import {Analytics} from '@vercel/analytics/react';
+import DemoHeadline from './components/header/DemoHeadline';
 
 const workSans = Work_Sans({subsets: ['latin']});
 
@@ -34,6 +35,7 @@ export default function RootLayout({
           <body
             className={`${workSans.className} w-full h-full flex flex-row align-middle justify-center bg-fuchsia-50/15`}>
             <div className="max-w-[1620px]">
+              <DemoHeadline />
               <Header />
               {children}
             </div>