@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
3 lines (2 loc) • 1.63 kB
JavaScript
"use client";
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{cloneElement as o}from"react";import n from"@mui/material/Stack";import r from"@mui/material/Typography";import i from"@mui/icons-material/PersonOutlined";import a from"@mui/icons-material/CalendarTodayOutlined";import m from"@mui/material/Box";import{HeroBannerComponent as s}from"./HeroBanner.component.js";import{prefix as c}from"./constant.js";const l=l=>{const{backgroundImage:p,backgroundColor:d,title:h,description:f,authorName:u,lastUpdated:g,actionElements:x=[],...y}=l,C="string"==typeof h?t(r,{color:"inherit",border:0,variant:"h2",mt:2,className:`${c}-title`,children:h}):h,N=f&&("string"==typeof f?t(r,{variant:"subtitle1",component:"p",width:{xs:1,sm:"525px"},sx:{fontWeight:400,mt:5},className:`${c}-description`,color:"inherit",children:f}):f),b=Array.isArray(x)&&x.length>0&&t(n,{sx:{mt:8},direction:{xs:"column",sm:"row"},spacing:4,className:`${c}-actions`,children:x.map(((t,e)=>o(t,{key:e,sx:{zIndex:1}})))}),k=u&&("string"==typeof u?e(m,{display:"flex",alignItems:"center",justifyContent:"center",className:`${c}-authorName`,children:[t(i,{}),t(r,{component:"span",variant:"h6",fontWeight:400,sx:{ml:3},children:u})]}):u),j=g&&("string"==typeof g?e(m,{display:"flex",alignItems:"center",justifyContent:"center",ml:u?15:0,className:`${c}-lastUpdated`,children:[t(a,{}),t(r,{component:"span",variant:"h6",fontWeight:400,sx:{ml:3},children:g})]}):g);return t(s,{...{backgroundImage:p,backgroundColor:d,titleComponent:C,descriptionComponent:N,authorNameComponent:k,lastUpdatedComponent:j,actionComponent:b},...y})};export{l as HeroBanner};