banner added
This commit is contained in:
Cypro Freelance
parent
d3e13ef0aa
commit
35840cb751
2 changed files with 104 additions and 0 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
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 { Metadata } from "next";
|
import { Metadata } from "next";
|
||||||
|
|
||||||
// baseURL [ENV]
|
// baseURL [ENV]
|
||||||
|
|
@ -40,6 +41,13 @@ export default function PageLayout({
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-h-screen">
|
<div className="flex flex-col min-h-screen">
|
||||||
|
{/* Comment or edit this whenever required */}
|
||||||
|
<Banner
|
||||||
|
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"
|
||||||
|
/>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<div className="flex-grow flex-1 overflow-x-hidden">{children}</div>
|
<div className="flex-grow flex-1 overflow-x-hidden">{children}</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
|
||||||
96
components/widgets/Banner.tsx
Normal file
96
components/widgets/Banner.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { X } from "lucide-react";
|
||||||
|
|
||||||
|
interface BannerProps {
|
||||||
|
className?: string;
|
||||||
|
title?: string;
|
||||||
|
announcement: string;
|
||||||
|
link?: string;
|
||||||
|
buttonText?: string;
|
||||||
|
closeButton?: boolean;
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
onClose?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Banner({
|
||||||
|
className,
|
||||||
|
title,
|
||||||
|
announcement,
|
||||||
|
link,
|
||||||
|
buttonText = "Learn More",
|
||||||
|
closeButton = true,
|
||||||
|
icon,
|
||||||
|
onClose,
|
||||||
|
}: BannerProps) {
|
||||||
|
return (
|
||||||
|
<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",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
||||||
|
}}
|
||||||
|
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
||||||
|
}}
|
||||||
|
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||||
|
{icon && <div className="flex-none">{icon}</div>}
|
||||||
|
<p className="text-sm leading-6 text-gray-900">
|
||||||
|
{title && (
|
||||||
|
<>
|
||||||
|
<strong className="font-semibold">{title}</strong>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 2 2"
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mx-2 inline h-0.5 w-0.5 fill-current"
|
||||||
|
>
|
||||||
|
<circle r={1} cx={1} cy={1} />
|
||||||
|
</svg>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{announcement}
|
||||||
|
</p>
|
||||||
|
{link && (
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
className="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
||||||
|
>
|
||||||
|
{buttonText} <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{closeButton && (
|
||||||
|
<div className="flex flex-1 justify-end">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<span className="sr-only">Dismiss</span>
|
||||||
|
<X aria-hidden="true" className="h-5 w-5 text-gray-900" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue