@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 { Image as a } from "../../Image/Image.js";
import { PlayIcon as o } from "../../VideoPlayer/components/PlayIcon/PlayIcon.js";
import { MarkGithubIcon as s } from "../../node_modules/@primer/octicons-react/dist/index.esm.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", poster: o, posterTitle: s, posterAltText: l, enableBorder: d, "data-testid": f, ...m }, h) => {
	let [g, _] = c.useState(!o), v = t(h), y = a.startsWith("inline"), b = a.endsWith("-padded"), x = e(i["Hero-video"], i["Hero-media"], i[`Hero-media--pos-${a}`], y && i["Hero-media--pos-inline"], y && b && i["Hero-media--pos-inline-padded"], n), S = () => _(!0), C = /* @__PURE__ */ u("div", {
		className: x,
		ref: v,
		"data-testid": f || "Hero-video",
		...m,
		children: r
	});
	return g ? C : /* @__PURE__ */ u(p, {
		posterSrc: o,
		posterAlt: l,
		posterTitle: s,
		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(a, {
					src: e,
					alt: t,
					className: i["Hero-video-poster-image"]
				}),
				/* @__PURE__ */ u(o, { className: i["Hero-video-poster-icon"] }),
				/* @__PURE__ */ d("span", {
					className: i["Hero-video-poster-header"],
					children: [/* @__PURE__ */ u(s, {
						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