react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
15 lines (14 loc) • 1.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Button } from '../../atoms/Button';
import { Icon } from '../../atoms/Icon';
import './Hero.scss';
export const Hero = ({ title, subtitle, description, actions = [], size = 'md', background = 'gradient', backgroundImage, variant = 'primary', className = '', children }) => {
const renderActions = () => {
if (actions.length === 0)
return null;
return (_jsx("div", { className: "hero__actions", children: actions.map((action, index) => (_jsxs(Button, { variant: action.variant || 'primary', size: action.size || 'lg', onClick: action.onClick, disabled: action.disabled, className: "hero__action", children: [action.icon && _jsx(Icon, { name: action.icon, className: "action-icon" }), action.label] }, index))) }));
};
const backgroundStyle = backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {};
return (_jsx("section", { className: `hero hero--${size} hero--${background} hero--${variant} ${className}`, style: backgroundStyle, children: _jsx("div", { className: "hero__container", children: _jsxs("div", { className: "hero__content", children: [_jsxs("div", { className: "hero__text", children: [subtitle && (_jsx("p", { className: "hero__subtitle", children: subtitle })), _jsx("h1", { className: "hero__title", children: title }), description && (_jsx("p", { className: "hero__description", children: description })), renderActions()] }), children && (_jsx("div", { className: "hero__children", children: children }))] }) }) }));
};