@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
72 lines • 4.38 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { Heading } from "..";
var randomImageEndpoint = "https://loremflickr.com";
var defaultCategoryTags = "abstract,nature,texture,pattern";
var themeClasses = {
responsive: "bg-white text-dark dark:bg-black dark:text-light",
dark: "dark bg-black 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 aspectRatios = {
auto: "aspect-auto",
square: "aspect-square",
video: "aspect-video",
landscape: "aspect-[4/3]",
};
var dimensions = {
auto: { width: 1200, height: 800 },
square: { width: 800, height: 800 },
video: { width: 1280, height: 720 },
landscape: { width: 1200, height: 900 },
};
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.aspectRatio, aspectRatio = _d === void 0 ? "auto" : _d, _e = _a.titleLevel, titleLevel = _e === void 0 ? 1 : _e, titleTransform = _a.titleTransform, titleWeight = _a.titleWeight, _f = _a.theme, theme = _f === void 0 ? "responsive" : _f, bgImage = _a.bgImage, bgVideo = _a.bgVideo, bgVideoPoster = _a.bgVideoPoster, _g = _a.randomImage, randomImage = _g === void 0 ? false : _g, _h = _a.categoryTags, categoryTags = _h === void 0 ? defaultCategoryTags : _h, _j = _a.bgBlur, bgBlur = _j === void 0 ? false : _j, _k = _a.bgGrayscale, bgGrayscale = _k === void 0 ? "none" : _k, children = _a.children, _l = _a.className, className = _l === void 0 ? "" : _l, style = _a.style;
var _m = useState(), bgImageStyle = _m[0], setBgImageStyle = _m[1];
var _o = useState(), bgVideoSrc = _o[0], setBgVideoSrc = _o[1];
var generatedImage = useMemo(function () {
if (!randomImage)
return null;
var _a = dimensions[aspectRatio] || dimensions.auto, width = _a.width, height = _a.height;
return {
url: "".concat(randomImageEndpoint, "/").concat(width, "/").concat(height, "/").concat(categoryTags || defaultCategoryTags, "?random=").concat(Date.now()),
width: width,
height: height,
};
}, [randomImage, categoryTags, aspectRatio]);
useEffect(function () {
var finalImage = randomImage ? generatedImage === null || generatedImage === void 0 ? void 0 : generatedImage.url : bgImage;
if (finalImage) {
setBgImageStyle({
backgroundImage: "url(".concat(finalImage, ")"),
});
}
else {
setBgImageStyle(null);
}
}, [bgImage, generatedImage, randomImage]);
useEffect(function () {
if (bgVideo) {
setBgVideoSrc(bgVideo);
}
}, [bgVideo]);
return (_jsxs("div", { className: twMerge("hero relative overflow-hidden grid justify-between ".concat(aspectRatios[aspectRatio], " ").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;
//# sourceMappingURL=Hero.js.map