svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated banner

Browse source
This commit is contained in:
Cypro Freelance 2024-08-30 23:06:10 +05:30
parent 35840cb751
commit f9a172acdb
2 changed files with 75 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/(root)/layout.tsx
View file

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

16
components/widgets/Banner.tsx
View file

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