@primer/react-brand/esm/Hero/sub-components/HeroVideo.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../node_modules/clsx/dist/clsx.js";
import { useProvidedRefOrCreate as t } from "../../hooks/useRef.js";
import { Box as n } from "../../Box/Box.js";
import { Text as r } from "../../Text/Text.js";
import i from "../Hero.module.js";
import { MarkGithubIcon as a } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
import { Image as o } from "../../Image/Image.js";
import { PlayIcon as s } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
import c, { forwardRef as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
//#region src/Hero/sub-components/HeroVideo.tsx
var f = l(({ className: n, children: r, position: a = "block-end", padding: o = "default", poster: s, posterTitle: l, posterAltText: d, enableBorder: f, "data-testid": m, ...h }, g) => {
	let [_, v] = c.useState(!s), y = t(g), b = a.startsWith("inline"), x = e(i["Hero-video"], i["Hero-media"], i[`Hero-media--pos-${a}`], b && i["Hero-media--pos-inline"], o === "all" && i["Hero-media--padding-all"], o === "none" && i["Hero-media--padding-none"], n), S = () => v(!0), C = /* @__PURE__ */ u("div", {
		className: x,
		ref: y,
		"data-testid": m || "Hero-video",
		...h,
		children: r
	});
	return _ ? C : /* @__PURE__ */ u(p, {
		posterSrc: s,
		posterAlt: d,
		posterTitle: l,
		onClick: S,
		className: x
	});
});
function p({ posterSrc: e, posterAlt: t, posterTitle: c, onClick: l, className: f }) {
	return /* @__PURE__ */ u(n, {
		className: f,
		children: /* @__PURE__ */ d("button", {
			"aria-label": "Play video",
			onClick: l,
			className: i["Hero-video-poster-button"],
			children: [
				/* @__PURE__ */ u(o, {
					src: e,
					alt: t,
					className: i["Hero-video-poster-image"]
				}),
				/* @__PURE__ */ u(s, { className: i["Hero-video-poster-icon"] }),
				/* @__PURE__ */ d("span", {
					className: i["Hero-video-poster-header"],
					children: [/* @__PURE__ */ u(a, {
						size: 48,
						className: i["Hero-video-header-poster-icon"]
					}), /* @__PURE__ */ u(r, {
						size: "350",
						className: i["Hero-video-poster-text"],
						children: c
					})]
				})
			]
		})
	});
}
//#endregion
export { f as HeroVideo };

//# sourceMappingURL=HeroVideo.js.map