Merge pull request #283 from karannfr/prod

added feat: #268 dynamic banner

Author: karannfr

src/components/BannerAlert.tsx

@@ -10,7 +10,7 @@ import { ArrowDownLeftIcon, Pin, ArrowUpRight, ChevronDown } from "lucide-react"
 import FloatingNavbar from "./FloatingNavbar";
 import PWAInstallButton from "./ui/PWAInstallButton";
 import SearchBarChild from "./Searchbar/searchbar-child";
-import FresherBanner from "@/components/FreshersBanner"
+import Banner from "@/components/bannerDismiss"
 import type { ICourses } from "@/interface"; 
 import {
   DropdownMenu,
@@ -92,7 +92,15 @@ function Navbar() {
 
   return (
     <div className="sticky top-0 z-[50] w-full bg-[#B2B8FF] dark:bg-[#130E1F]">
-      <FresherBanner/>
+        <Banner
+          bannerId="freshers"
+          bgColor="#fef3c7"
+          textColor="#5a3000"
+          iconColor="#d97706"
+          accentColor="#78350f"
+          title="Attention Freshers!"
+          message="If papers for your subject are not yet available, click on your subject and explore related subjects until papers become available, as these are newly introduced courses."
+        />
        <div className="flex items-center justify-between bg-inherit px-4 py-4 md:px-8 md:py-5">
         {}
         <div className="flex items-center gap-4 relative">

src/components/BannerDevsoc.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Info, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface BannerProps {
+  bannerId: string;
+  bgColor?: string;
+  textColor?: string;
+  iconColor?: string;
+  accentColor?: string;
+  message: string;
+  title: string;
+}
+
+export default function Banner({
+  bannerId,
+  bgColor = "#fef3c7",
+  textColor = "#5a3000",
+  iconColor = "#d97706",
+  accentColor = "#78350f",
+  message,
+  title,
+}: BannerProps) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const bannerStatus = localStorage.getItem("banner_" + bannerId);
+    if (bannerStatus !== "dismissed") {
+      setVisible(true);
+    }
+  }, [bannerId]);
+
+  const closeBanner = () => {
+    localStorage.setItem("banner_" + bannerId, "dismissed");
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div className="z-[60] w-full shadow-sm" style={{ backgroundColor: bgColor, color: textColor }}>
+      <div className="relative mx-auto flex max-w-screen-2xl flex-col items-start justify-between gap-3 px-4 py-3 sm:justify-center sm:flex-row sm:items-center sm:gap-4 md:px-8 md:py-3">
+        <div className="flex items-center gap-2">
+          <Info className="h-5 w-5" style={{ color: iconColor }} />
+          <span className="font-semibold text-base tracking-wide" style={{ color: accentColor }}>
+            {title}
+          </span>
+        </div>
+
+        <p className="text-sm flex-1 sm:text-right">{message}</p>
+
+        <button
+          onClick={closeBanner}
+          className="absolute right-4 top-4 transition hover:opacity-75 sm:static sm:self-start"
+          aria-label="Dismiss banner"
+          style={{ color: accentColor }}
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/FreshersBanner.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Button } from "./ui/button";
+import Image from "next/image";
+import Link from "next/link";
+
+interface EventBannerProps {
+  bgColor?: string;
+  textColor?: string;
+  buttonColor?: string;
+  mobileText?: string;
+  desktopText?: string;
+  buttonText?: string;
+  link: string;
+  icon: string;
+}
+
+export default function EventBanner({
+  bgColor = "#ba4343",
+  textColor = "#ffffff",
+  buttonColor = "#AA7AE7",
+  mobileText = "Join the biggest hackathon of the year!",
+  desktopText = "DevSOC'25 registrations are now LIVE! Don't miss out 🚀",
+  buttonText = "Register Now",
+  link,
+  icon,
+}: EventBannerProps) {
+  return (
+    <div
+      className="z-50 flex h-fit w-full items-center justify-center px-6 py-3 text-center sm:h-14 sm:py-0 md:sticky md:top-0 md:justify-between md:text-left"
+      style={{ backgroundColor: bgColor, color: textColor }}
+    >
+      <div className="flex items-center gap-x-2">
+        <Image
+          src={icon}
+          alt="event logo"
+          height={40}
+          width={40}
+          className="md:hidden"
+        />
+        <span className="hidden text-sm font-medium md:block">
+          {desktopText}
+        </span>
+        <Link
+          href={link}
+          className="block text-sm font-medium md:hidden underline"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {mobileText}
+        </Link>
+      </div>
+      <div className="hidden md:block">
+        <Button style={{ backgroundColor: buttonColor }}>
+          <Link
+            className="flex items-center gap-x-2"
+            href={link}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <Image src={icon} alt="icon" height={20} width={20} />
+            <span className="font-yerk text-xs">{buttonText}</span>
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Info } from "lucide-react";
+
+interface BannerProps {
+  bgColor?: string;
+  textColor?: string;
+  iconColor?: string;
+  title: string;
+  message: string;
+}
+
+export default function Banner({
+  bgColor = "#AA7AE7",
+  textColor = "#ffffff",
+  iconColor = "#ffffff",
+  title,
+  message,
+}: BannerProps) {
+  return (
+    <div
+      className="z-50 w-full px-6 py-3 shadow-sm md:sticky md:top-0"
+      style={{ backgroundColor: bgColor, color: textColor }}
+    >
+      <div className="mx-auto flex max-w-screen-xl flex-col items-center justify-between gap-2 sm:flex-row sm:gap-0">
+        <div className="flex items-center gap-2">
+          <Info className="h-5 w-5" style={{ color: iconColor }} />
+          <span className="font-semibold tracking-wide text-base sm:text-lg">
+            {title}
+          </span>
+        </div>
+
+        <p className="text-center text-sm sm:text-base sm:text-right font-medium" style={{ color: textColor + "e6" }}>
+          {message}
+        </p>
+      </div>
+    </div>
+  );
+}