@nexusui/components/core/EventLog/components/EventItem.js

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.

import{jsxs as t,jsx as i}from"react/jsx-runtime";import r from"react";import{useTheme as e}from"@mui/material/styles";import o from"@mui/material/Box";import a from"@mui/material/Stack";import n from"@mui/material/ListItem";import l from"@mui/material/ListItemIcon";import m from"@mui/material/ListItemText";import c from"@mui/material/Tooltip";import s from"@mui/material/Typography";import p from"lodash/truncate";import d,{linkStyle as f}from"./EventItem.styles.js";const h=h=>{const{title:x,icon:u,timestamp:g,description:y,severity:I,links:v,isMinWidth:k,"data-testid":S}=h,b=e().vars.palette[I.toLowerCase()||"info"];return t(n,{divider:!1,alignItems:"center",sx:{...d.listItem},component:"div","data-testid":S,children:[i(l,{sx:t=>({...d.listIcon,backgroundColor:b[50],...t.applyStyles("light",{backgroundColor:`color-mix(in srgb, ${b[500]}, transparent 88%)`})}),children:r.cloneElement(u,{sx:{color:b.main,fontSize:32}})}),i(m,{sx:{pl:4,pr:3},children:t(a,{spacing:3/4,alignItems:"flex-start",children:[i(s,{variant:"caption",color:"text.secondary",children:g}),i(o,{sx:{alignSelf:"normal",fontSize:"12px",lineHeight:4/3},children:i(s,{variant:"caption",color:"text.primary",fontWeight:700,children:x})}),i(s,{variant:"caption",color:"text.secondary",sx:{wordBreak:"break-word"},children:y}),i(a,{direction:k?"column":"row",alignSelf:"normal",children:v&&v.map((t=>i(c,{title:t.title,enterDelay:1e3,arrow:!0,children:i(s,{sx:{...d.noWrapOne,...f(k)},variant:"caption",color:b.main,onClick:()=>t.onClick(h),tabIndex:0,children:p(t.title,{length:30})})},t.title)))})]})})]})};export{h as EventItem};