Add buttonlink component

opengento · Jan 27, 2025 · 2576779 · 2576779
1 parent e9f4b50
commit 2576779
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 23 deletions.
diff --git a/src/components/ButtonLink/ButtonLink.tsx b/src/components/ButtonLink/ButtonLink.tsx
@@ -0,0 +1,87 @@
+import Link from "next/link";
+import React, {ReactNode} from "react";
+import classNames from "classnames";
+import {ButtonLinkProps} from "@/components/ButtonLink/ButtonLinkProps";
+
+const ButtonLink = ({
+  variant,
+  href,
+  target,
+  rel,
+  iconPosition,
+  icon,
+  children
+}: ButtonLinkProps) => {
+
+  const variantClass = {
+    primary: "bg-white text-black",
+    secondary: "bg-white text-primary hover:bg-primary hover:text-white",
+    "secondary-invert": "bg-primary text-white hover:bg-white hover:text-primary",
+    "soft-pink": "bg-purple-500 text-white hover:bg-white hover:text-purple-500",
+  };
+
+  const iconClass = {
+    primary: "bg-none text-black",
+    secondary: "bg-primary text-white group-hover:bg-white group-hover:text-primary",
+    "secondary-invert": "bg-white text-primary group-hover:bg-primary group-hover:text-white",
+    "soft-pink": "bg-purple-500 text-white group-hover:bg-white group-hover:text-purple-500",
+  };
+
+  const extraClass = iconPosition !== undefined
+    ? "pl-5 pr-3"
+    : "px-5";
+
+  const renderContent = (content: ReactNode) => {
+    const iconClassName: string = "inline-block p-1 rounded-full";
+
+    if (iconPosition === "left") {
+      return (
+        <>
+          <div className={classNames(
+            "self-start",
+            iconClass[variant],
+            iconClassName
+          )}>
+            {icon}
+          </div>
+          <div className="flex-1">
+            {content}
+          </div>
+        </>
+      );
+    }
+    if (iconPosition === "right") {
+      return (
+        <>
+          <div className="flex-1">
+            {content}
+          </div>
+          <div className={classNames(
+            "self-end",
+            iconClass[variant],
+            iconClassName
+          )}>
+            {icon}
+          </div>
+        </>
+      );
+    }
+
+    return (<>{content}</>);
+  };
+
+  return (
+    <Link href={href}
+          target={target}
+          rel={rel}
+          className={classNames(
+            "inline-flex group gap-3 items-center justify-between py-2.5 rounded-3xl font-medium duration-300",
+            extraClass,
+            variantClass[variant]
+          )}>
+      {renderContent(children)}
+    </Link>
+  );
+};
+
+export default ButtonLink;
diff --git a/src/components/ButtonLink/ButtonLinkProps.ts b/src/components/ButtonLink/ButtonLinkProps.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+export type ButtonLinkProps = {
+  variant: "primary" | "secondary" | "secondary-invert" | "soft-pink",
+  href: string,
+  target?: string,
+  rel?: string,
+  icon?: ReactNode,
+  iconPosition?: "left" | "right",
+  children?: ReactNode
+};
diff --git a/src/components/Speakers/Speakers.tsx b/src/components/Speakers/Speakers.tsx
@@ -3,6 +3,8 @@ import React from "react";
 import Typography from "../Typography/Typography";
 import BackgroundImage from "../BackgroundImage/BackgroundImage";
 import SpeakersList from "./SpeakersList";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import { IoIosArrowForward } from "react-icons/io";
 
 const Speakers = () => {
   return (
@@ -34,7 +36,18 @@ const Speakers = () => {
               imagePath="/images/pattern_speakers.svg"
               className="w-full md:w-1/2"
             >
-              <div></div>
+              <div className="">
+                <ButtonLink
+                  variant="secondary"
+                  href="https://forms.gle/M6Y8V2xP7PGw5VD8A"
+                  target="_blank"
+                  rel="noopener"
+                  iconPosition="right"
+                  icon={<IoIosArrowForward />}
+                >
+                  Rejoignez les conférenciers de MM25FR
+                </ButtonLink>
+              </div>
             </BackgroundImage>
           </div>
         </div>

diff --git a/src/components/Speakers/SpeakersList.tsx b/src/components/Speakers/SpeakersList.tsx
@@ -10,6 +10,7 @@ import ClientOnly from "@/helpers/ClientOnly";
 import TopBanner from "@/components/TopBanner/TopBanner";
 import Speaker from "./Speaker/Speaker";
 import SpeakerPopIn from "./Speaker/SpeakerPopIn";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
 
 const speakers: Speaker[] = [
   {
@@ -103,10 +104,11 @@ const SpeakersList = () => {
         <TopBanner
           title="Appel à speakers"
           backgroundImage="/images/pattern_top-banner_speakers.svg"
-          canSlide={true}
           onPrevClick={handlePrev}
           onNextClick={handleNext}
-        />
+        >
+          <ButtonLink variant="secondary" href="#speakers">Découvrir les speakers</ButtonLink>
+        </TopBanner>
       </div>
       <ClientOnly>
         <Swiper

diff --git a/src/components/SponsorList/SponsorList.tsx b/src/components/SponsorList/SponsorList.tsx
@@ -6,6 +6,9 @@ import {SponsorProps, SponsorTypeProps} from "@/components/SponsorList/Sponsor/S
 import {SponsorListProps} from "@/components/SponsorList/SponsorListProps";
 import Container from "@/layouts/Container";
 import TopBanner from "@/components/TopBanner/TopBanner";
+import React from "react";
+import Link from "next/link";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
 
 const SponsorList = ({
                        items
@@ -38,10 +41,10 @@ const SponsorList = ({
     <BackgroundImage imagePath="/images/bg-gradiant-purple.jpg" className=''>
       <Container size="large" className={'overflow-hidden'}>
         <div className="mt-12">
-          <TopBanner
-            title="Merci à nos sponsors"
-            backgroundImage="/images/pattern_top-banner_speakers.svg"
-          />
+          <TopBanner title="Merci à nos sponsors" backgroundImage="/images/pattern_top-banner_speakers.svg">
+            <ButtonLink variant="secondary" href="#sponsors">Devenir sponsor</ButtonLink>
+            <ButtonLink variant="soft-pink" href="#sponsors">Voir tous les sponsors</ButtonLink>
+          </TopBanner>
         </div>
         <ul className={'clear-both overflow-hidden -mx-1 mt-6 mb-9 md:mb-10 md:max-w-[1350px]'}>
           {sortedSponsors.map((sponsor: SponsorProps, key: number) => (

diff --git a/src/components/TopBanner/TopBanner.tsx b/src/components/TopBanner/TopBanner.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {ReactNode} from "react";
 import Typography from "../Typography/Typography";
 import BackgroundImage from "../BackgroundImage/BackgroundImage";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
@@ -8,35 +8,38 @@ import ClientOnly from "@/helpers/ClientOnly";
 interface TopBannerProps {
   title: string;
   backgroundImage?: string;
-  canSlide?: boolean;
+  children?: ReactNode;
   onPrevClick?: () => void;
   onNextClick?: () => void;
 }
 
 const TopBanner = ({
   title,
   backgroundImage,
-  canSlide,
+  children,
   onPrevClick,
   onNextClick,
 }: TopBannerProps) => {
   const { width } = useWindowSize();
   const bannerContent = (
     <ClientOnly>
-      <div className="top-banner-content flex flex-col md:flex-row justify-between">
+      <div className="top-banner-content flex flex-col md:flex-row justify-between items-center">
         <Typography variant="h4" className="text-white" weight="normal">
           {title}
         </Typography>
-        {canSlide && width > 768 && (
-          <div className="flex gap-2">
-            <button onClick={onPrevClick} className="p-2 rounded bg-white/20">
-              <IoIosArrowBack className="text-white" size={24} />
-            </button>
-            <button onClick={onNextClick} className="p-2 rounded bg-white/20 ">
-              <IoIosArrowForward className="text-white" size={24} />
-            </button>
-          </div>
-        )}
+        <div className="flex gap-2">
+          {children}
+          {onPrevClick && onNextClick && width > 768 && (
+            <div className="flex gap-2 ml-4">
+              <button onClick={onPrevClick} className="p-2 rounded bg-white/20">
+                <IoIosArrowBack className="text-white" size={24} />
+              </button>
+              <button onClick={onNextClick} className="p-2 rounded bg-white/20 ">
+                <IoIosArrowForward className="text-white" size={24} />
+              </button>
+            </div>
+          )}
+        </div>
       </div>
     </ClientOnly>
   );
@@ -46,7 +49,7 @@ const TopBanner = ({
       {backgroundImage ? (
         <BackgroundImage
           imagePath={backgroundImage}
-          className="py-2 px-4 md:px-14"
+          className="py-3 px-4 md:px-14"
         >
           {bannerContent}
         </BackgroundImage>

diff --git a/src/layouts/Header/Header.tsx b/src/layouts/Header/Header.tsx
@@ -2,16 +2,22 @@ import BackgroundImage from "@/components/BackgroundImage/BackgroundImage";
 import Logo from "@/components/Logo/Logo";
 import Navigation from "./Navigation/Navigation";
 import Container from "../Container";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import {FaTicketAlt} from "react-icons/fa";
+import React from "react";
 
 const Header = () => {
   const HeaderContent = () => (
     <div className="w-full overflow-hidden rounded-b-xl md:rounded-xl">
       <BackgroundImage imagePath="/images/bg-gradiant-blue.jpg" priority>
         <div className="flex justify-between items-center">
           <div
-            className="flex w-full justify-between md:justify-start gap-12 items-center h-20 px-4 md:px-14">
+            className="flex w-full justify-between gap-12 items-center h-20 px-4 md:px-14">
             <Logo/>
             <Navigation/>
+            <ButtonLink variant="primary" href="" target="_blank" rel="noopener" iconPosition="left" icon={<FaTicketAlt />}>
+              J’achète mon billet
+            </ButtonLink>
           </div>
         </div>
       </BackgroundImage>