Hero.tsx

import React from "react"

import { Button, Card, Carousel } from "@onegeo-suite/gatsby-theme-onegeo"
import cx from "classix"
import { merge } from "../utils"

interface Service {
    name: string
    description: string
    image: string
    url: string
}
interface Action {
    name: string
    url: string
}
interface Bg {
    src: string
}
interface Props {
    title?: string
    subtitle?: string
    content?: string
    action?: Action
    services?: Array<Service>
    bgImage?: Array<Bg>
    size?: "xs" | "base" | "xl"
}

const Hero = (props: Props) => {
    // Data structure (default value)
    const {
        title = "eGEO Project",
        subtitle = "Hub géospatial collaboratif",
        content = "Solution Open Source sur-mesure pour communiquer et valoriser les données disponibles sur votre territoire ou vos infrastructures.",
        action = {
            name: "Découvres nos cartes interactives",
            url: "#",
        },
        services = [
            {
                name: "Datastore",
                description: "Accédez à votre catalogue de données.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
            {
                name: "Map",
                description:
                    "Consulter, gérer, mettre à jour et diffuser vos contenus cartographiques.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
            {
                name: "Dataviz",
                description: "Croisez et mettez en forme vos données.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
            {
                name: "Contrib",
                description: "Validez et collectez vos informations.",
                image: "../images/hero/datastore.png",
                url: "#",
            },
        ],
        bgImage = [
            {
                src: "https://images.unsplash.com/photo-1608501078713-8e445a709b39?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8d2FsbHBhcGVyJTIwNGt8ZW58MHx8MHx8&w=1000&q=80",
            },
            {
                src: "https://images.unsplash.com/photo-1608501078713-8e445a709b39?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8d2FsbHBhcGVyJTIwNGt8ZW58MHx8MHx8&w=1000&q=80",
            },
            {
                src: "https://images.unsplash.com/photo-1608501078713-8e445a709b39?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8d2FsbHBhcGVyJTIwNGt8ZW58MHx8MHx8&w=1000&q=80",
            },
        ],
        size = "base",
        options = {},
    } = props

    let imageFondList, imageFond

    if (bgImage.length > 1) {
        imageFondList = bgImage
        imageFond = [
            imageFondList.map((image: any) => {
                return image
            }),
        ]
    } else {
        imageFond = bgImage![0]
    }

    return (
        <div
            className={cx(
                "relative z-0 bg-cover",
                size == "base" ? "mb-28 h-[60vh]" : "",
                size == "xl" ? "h-[75vh]" : "",
                size == "xs" ? "mb-56 h-[50vh]" : ""
            )}
            style={{ backgroundImage: `url(${imageFond})` }}
        >
            {bgImage!.length > 1 && (
                <Carousel
                    height={`${size == "base" ? "h-[60vh]" : ""} ${
                        size == "xl" ? "h-[75vh]" : ""
                    } ${size == "xs" ? "h-[50vh]" : ""}`}
                    images={imageFond[0]}
                    animation="fade"
                    delay={3000}
                />
            )}
            <div className="absolute top-0 z-10 h-full w-full bg-gradient-to-r from-slate-500 opacity-80"></div>
            <div className={"absolute top-0 z-20 mb-5 w-full text-center"}>
                <div className="mx-auto mt-20 max-w-4xl">
                    <h1 className="text-neutral-content mb-5 text-3xl font-extrabold tracking-tight lg:text-6xl">
                        {title}
                        <div className="text-primary">{subtitle}</div>
                    </h1>
                    <p className="mb-5">{content}</p>
                    {action && action.name !== "" ? (
                        <Button
                            className="btn-primary mt-10 text-white"
                            {...action}
                        />
                    ) : null}
                </div>
            </div>
            <div
                className={cx(
                    "absolute z-20 flex w-full flex-row flex-wrap justify-center gap-6",
                    size == "base" ? "-bottom-12" : "",
                    size == "xl" ? "bottom-6" : "",
                    size == "xs" ? "-bottom-52" : ""
                )}
            >
                {services &&
                    services.map((service, idx) => (
                        <Card
                            key={idx}
                            layout="left"
                            size="xs"
                            {...service}
                            options={merge(
                                {
                                    class: {
                                        main: "w-96",
                                        body: "place-content-center",
                                        image: "m-auto h-16",
                                        imageComponent: "object-scale-down",
                                    },
                                },
                                merge(options?.card, service?.options)
                            )}
                        />
                    ))}
            </div>
        </div>
    )
}

export default Hero