@smitch/fluid
Version:
A Next/React ui-component libray.
44 lines (43 loc) • 2.92 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import { Heading } from '..';
var themeClasses = {
responsive: 'bg-white text-dark dark:bg-dark dark:text-light',
dark: 'dark bg-dark text-light',
light: 'bg-white text-dark',
};
var alignClasses = {
left: 'text-left',
center: 'text-center',
right: 'text-right',
};
var layoutClasses = {
col: 'grid-cols-1',
row: 'grid-cols-1 md:grid-cols-2',
};
var grayscaleClasses = {
none: '',
grayscale: 'grayscale',
sepia: 'sepia',
};
var Hero = function (_a) {
var title = _a.title, body = _a.body, _b = _a.align, align = _b === void 0 ? 'center' : _b, _c = _a.layout, layout = _c === void 0 ? 'col' : _c, _d = _a.titleLevel, titleLevel = _d === void 0 ? 1 : _d, titleTransform = _a.titleTransform, titleWeight = _a.titleWeight, _e = _a.theme, theme = _e === void 0 ? 'responsive' : _e, bgImage = _a.bgImage, bgVideo = _a.bgVideo, bgVideoPoster = _a.bgVideoPoster, _f = _a.bgBlur, bgBlur = _f === void 0 ? false : _f, _g = _a.bgGrayscale, bgGrayscale = _g === void 0 ? 'none' : _g, children = _a.children, _h = _a.className, className = _h === void 0 ? '' : _h, style = _a.style;
var _j = useState(), bgImageStyle = _j[0], setBgImageStyle = _j[1];
var _k = useState(), bgVideoSrc = _k[0], setBgVideoSrc = _k[1];
useEffect(function () {
if (bgImage) {
setBgImageStyle({
backgroundImage: "url(".concat(bgImage, ")"),
});
}
}, [bgImage]);
useEffect(function () {
if (bgVideo) {
setBgVideoSrc(bgVideo);
}
}, [bgVideo]);
return (_jsxs("div", { className: twMerge("hero relative overflow-hidden grid justify-between ".concat(layoutClasses[layout], " gap-x-4 gap-y-8 px-4 py-5 ").concat(themeClasses[theme]), className), style: style, children: [bgImageStyle ? (_jsx("div", { className: "bg-cover bg-no-repeat bg-center absolute inset-0 ".concat(bgBlur ? 'blur-sm' : '', " ").concat(grayscaleClasses[bgGrayscale]), style: bgImageStyle })) : null, bgVideoSrc ? (_jsx("video", { className: "absolute inset-0 h-full w-full object-cover ".concat(bgBlur ? 'blur-sm' : '', " ").concat(grayscaleClasses[bgGrayscale]), src: bgVideoSrc, poster: bgVideoPoster, loop: true, autoPlay: true, muted: true, controls: false, preload: 'auto' })) : null, _jsxs("div", { className: 'max-w-xl relative mx-auto z-10 w-full', children: [_jsx(Heading, { level: titleLevel, align: align, transform: titleTransform, weight: titleWeight, className: 'mb-6 drop-shadow-lg', children: title }), body ? _jsx("div", { className: alignClasses[align], children: body }) : ''] }), children ? (_jsx("div", { className: "max-w-xl flex items-center ".concat(layout === 'col' ? 'mx-auto' : ''), children: children })) : null] }));
};
export default Hero;