updated banner

app/(root)/layout.tsx

@@ -1,6 +1,7 @@
 import Footer from "@/components/shared/Footer";
 import Navbar from "@/components/shared/Navbar";
 import Banner from "@/components/widgets/Banner";
+import { Home } from "lucide-react";
 import { Metadata } from "next";
 
 // baseURL [ENV]
@@ -43,10 +44,12 @@ export default function PageLayout({
 		<div className="flex flex-col min-h-screen">
 			{/* Comment or edit this whenever required */}
 			<Banner
+				icon={<Home />}
 				title="SVR.JS 4.0.0 is now on beta!"
 				announcement="The latest beta version is SVR.JS 4.0.0-beta3."
 				link="https://blog.svrjs.org/2024/08/30/SVR-JS-4-0-0-beta3-has-been-released/"
 				buttonText="Read more"
+				className={""}
 			/>
 			<Navbar />
 			<div className="flex-grow flex-1 overflow-x-hidden">{children}</div>

components/widgets/Banner.tsx

@@ -1,5 +1,7 @@
+"use client";
 import { cn } from "@/lib/utils";
 import { X } from "lucide-react";
+import { useState } from "react";
 
 interface BannerProps {
 	className?: string;
@@ -9,7 +11,6 @@ interface BannerProps {
 	buttonText?: string;
 	closeButton?: boolean;
 	icon?: React.ReactNode;
-	onClose?: () => void;
 }
 
 export default function Banner({
@@ -20,12 +21,18 @@ export default function Banner({
 	buttonText = "Learn More",
 	closeButton = true,
 	icon,
-	onClose,
 }: BannerProps) {
+	const [isBannerVisible, setIsBannerVisible] = useState(true);
+
+	const handleClose = () => {
+		setIsBannerVisible(false);
+	};
+
 	return (
+		isBannerVisible && (
 			<div
 				className={cn(
-				"relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1 border-b",
+					"relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2 sm:px-3.5 sm:before:flex-1 border-b",
 					className
 				)}
 			>
@@ -84,7 +91,7 @@ export default function Banner({
 						<button
 							type="button"
 							className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
-						onClick={onClose}
+							onClick={handleClose}
 						>
 							<span className="sr-only">Dismiss</span>
 							<X aria-hidden="true" className="h-5 w-5 text-gray-900" />
@@ -92,5 +99,6 @@ export default function Banner({
 					</div>
 				)}
 			</div>
+		)
 	);
 }