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>

136
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,77 +21,84 @@ 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 (
<div isBannerVisible && (
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 <div
aria-hidden="true" className={cn(
className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" "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
)}
> >
<div <div
style={{ aria-hidden="true"
clipPath: className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
"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%)", >
}} <div
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30" style={{
/> clipPath:
</div> "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%)",
<div }}
aria-hidden="true" className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30"
className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" />
> </div>
<div <div
style={{ aria-hidden="true"
clipPath: className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
"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%)", >
}} <div
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30" style={{
/> clipPath:
</div> "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%)",
<div className="flex flex-wrap items-center gap-x-4 gap-y-2"> }}
{icon && <div className="flex-none">{icon}</div>} className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30"
<p className="text-sm leading-6 text-gray-900"> />
{title && ( </div>
<> <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<strong className="font-semibold">{title}</strong> {icon && <div className="flex-none">{icon}</div>}
<svg <p className="text-sm leading-6 text-gray-900">
viewBox="0 0 2 2" {title && (
aria-hidden="true" <>
className="mx-2 inline h-0.5 w-0.5 fill-current" <strong className="font-semibold">{title}</strong>
> <svg
<circle r={1} cx={1} cy={1} /> viewBox="0 0 2 2"
</svg> 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">&rarr;</span>
</a>
)} )}
{announcement} </div>
</p> {closeButton && (
{link && ( <div className="flex flex-1 justify-end">
<a <button
href={link} type="button"
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" className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
> onClick={handleClose}
{buttonText} <span aria-hidden="true">&rarr;</span> >
</a> <span className="sr-only">Dismiss</span>
<X aria-hidden="true" className="h-5 w-5 text-gray-900" />
</button>
</div>
)} )}
</div> </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>
); );
} }