@theguild/components
Version:
74 lines (73 loc) • 2.31 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { addBasePath } from "next/dist/client/add-base-path";
import clsx from "clsx";
import { useMounted } from "nextra/hooks";
import ReactPlayer from "react-player/lazy";
import { Anchor } from "./anchor";
const HeroVideo = ({
title,
description,
link,
video,
flipped,
className,
videoProps
}) => {
const mounted = useMounted();
return /* @__PURE__ */ jsx("section", { className: clsx("bg-gray-100 dark:bg-neutral-800", className), children: /* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"container flex flex-wrap py-8 md:flex-nowrap md:items-center md:justify-center",
flipped && "md:flex-row-reverse"
),
children: [
/* @__PURE__ */ jsxs("div", { className: "mb-16 mt-8 md:my-0", children: [
/* @__PURE__ */ jsx("h2", { className: "m-0 max-w-sm text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx("p", { className: "mb-3 mt-1 max-w-md text-base text-gray-500 dark:text-gray-400", children: description }),
link && /* @__PURE__ */ jsx(
Anchor,
{
...link,
className: clsx(
"mt-auto w-max text-sm text-cyan-400 hover:text-cyan-300",
link.className
)
}
)
] }),
/* @__PURE__ */ jsx(
"div",
{
className: clsx(
"h-72 w-full overflow-hidden rounded-xl bg-white shadow-xl sm:h-96 md:h-72 md:w-3/5 lg:h-96",
flipped ? "md:mr-8" : "md:ml-8"
),
children: mounted && /* @__PURE__ */ jsx(
ReactPlayer,
{
url: video.src,
light: video.placeholder.startsWith("/") ? addBasePath(video.placeholder) : video.placeholder,
controls: true,
height: "100%",
width: "100%",
config: {
youtube: {
playerVars: {
autoplay: 1
}
}
},
...videoProps
}
)
}
)
]
}
) });
};
export {
HeroVideo
};