nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Time-ranged event block for rendering inside calendar day/week grids. Shows title, time span, and color category. Supports overlapping events with column stacking. The visual unit that populates calendar-day-view and calendar-week-view slots.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
interface EventBlockProps extends React.ComponentProps<"div"> {
title: string
startTime?: string
endTime?: string
color?: string
category?: string
onClick?: () => void
compact?: boolean
}
function EventBlock({ title, startTime, endTime, color = "var(--color-malachite,#64FFDA)", category, onClick, compact = false, loading = false, className, ...props }: EventBlockProps) {
return (
<div
data-slot="event-block" data-portal="https://design.nyuchi.com/components/event-block"
role={onClick ? "button" : undefined}
tabIndex={onClick ? 0 : undefined}
onClick={onClick}
className={cn(
"overflow-hidden rounded-[var(--radius-sm,7px)] border-l-[3px] px-2 transition-colors",
compact ? "py-0.5" : "py-1.5",
onClick && "cursor-pointer hover:opacity-80",
className
)}
style={{ borderLeftColor: color, backgroundColor: `${color}15` }}
{...props}
>
<div className={cn("font-medium truncate", compact ? "text-[10px]" : "text-xs")}>{title}</div>
{!compact && startTime && (
<div className="text-[10px] text-muted-foreground">
{startTime}{endTime ? ` – ${endTime}` : ""}
</div>
)}
</div>
)
}
export { EventBlock }
export type { EventBlockProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/event-blockFetch this component's metadata and source code from the registry API.
/api/v1/ui/event-block