@object-ui/plugin-calendar 2.0.0 → 3.0.0

package/src/CalendarView.tsx

@@ -46,6 +46,7 @@ export interface CalendarViewProps {
   onViewChange?: (view: "month" | "week" | "day") => void
   onNavigate?: (date: Date) => void
   onAddClick?: () => void
+  onEventDrop?: (event: CalendarEvent, newStart: Date, newEnd?: Date) => void
   className?: string
 }
 
@@ -59,6 +60,7 @@ function CalendarView({
   onViewChange,
   onNavigate,
   onAddClick,
+  onEventDrop,
   className,
 }: CalendarViewProps) {
   const [selectedView, setSelectedView] = React.useState(view)
@@ -73,6 +75,23 @@ function CalendarView({
     setSelectedView(view)
   }, [view])
 
+  // Auto-switch to day view on mobile
+  const onViewChangeRef = React.useRef(onViewChange)
+  onViewChangeRef.current = onViewChange
+
+  React.useEffect(() => {
+    const mq = window.matchMedia("(max-width: 639px)")
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      if (e.matches) {
+        setSelectedView("day")
+        onViewChangeRef.current?.("day")
+      }
+    }
+    handleChange(mq)
+    mq.addEventListener("change", handleChange)
+    return () => mq.removeEventListener("change", handleChange)
+  }, [])
+
   const handlePrevious = () => {
     const newDate = new Date(selectedDate)
     if (selectedView === "month") {
@@ -138,6 +157,23 @@ function CalendarView({
     }
   }
 
+  // Swipe navigation for mobile
+  const touchStart = React.useRef<number>(0)
+  const handleTouchStart = (e: React.TouchEvent) => {
+    touchStart.current = e.touches[0].clientX
+  }
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    const diff = touchStart.current - e.changedTouches[0].clientX
+    if (Math.abs(diff) > 50) {
+      const newDate = new Date(selectedDate)
+      if (selectedView === "day") newDate.setDate(newDate.getDate() + (diff > 0 ? 1 : -1))
+      else if (selectedView === "week") newDate.setDate(newDate.getDate() + (diff > 0 ? 7 : -7))
+      else newDate.setMonth(newDate.getMonth() + (diff > 0 ? 1 : -1))
+      setSelectedDate(newDate)
+      onNavigate?.(newDate)
+    }
+  }
+
   const handleDateSelect = (date: Date | undefined) => {
     if (date) {
       setSelectedDate(date)
@@ -146,18 +182,19 @@ function CalendarView({
   }
 
   return (
-    <div className={cn("flex flex-col h-full bg-background", className)}>
+    <div role="region" aria-label="Calendar" className={cn("flex flex-col h-full bg-background", className)}>
       {/* Header */}
       <div className="flex items-center justify-between p-4 border-b">
         <div className="flex items-center gap-4">
           <div className="flex items-center bg-muted/50 rounded-lg p-1 gap-1">
-             <Button variant="ghost" size="sm" onClick={handleToday} className="h-8">
+             <Button variant="ghost" size="sm" onClick={handleToday} className="h-8" aria-label="Go to today">
                Today
              </Button>
              <div className="h-4 w-px bg-border mx-1" />
              <Button
                variant="ghost"
                size="icon"
+               aria-label="Previous period"
                onClick={handlePrevious}
                className="h-8 w-8"
              >
@@ -166,6 +203,7 @@ function CalendarView({
              <Button
                variant="ghost"
                size="icon"
+               aria-label="Next period"
                onClick={handleNext}
                className="h-8 w-8"
              >
@@ -177,6 +215,7 @@ function CalendarView({
             <PopoverTrigger asChild>
               <Button 
                 variant="ghost" 
+                aria-label={`Current date: ${getDateLabel()}`}
                 className={cn(
                   "text-xl font-semibold h-auto px-3 py-1 hover:bg-muted/50 transition-colors",
                   "flex items-center gap-2"
@@ -221,19 +260,21 @@ function CalendarView({
       </div>
 
       {/* Calendar Grid */}
-      <div className="flex-1 overflow-auto">
+      <div className="flex-1 overflow-auto" onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
         {selectedView === "month" && (
           <MonthView
             date={selectedDate}
             events={events}
             onEventClick={onEventClick}
             onDateClick={onDateClick}
+            onEventDrop={onEventDrop}
           />
         )}
         {selectedView === "week" && (
           <WeekView
             date={selectedDate}
             events={events}
+            locale={locale}
             onEventClick={onEventClick}
             onDateClick={onDateClick}
           />
@@ -243,6 +284,7 @@ function CalendarView({
             date={selectedDate}
             events={events}
             onEventClick={onEventClick}
+            onDateClick={onDateClick}
           />
         )}
       </div>
@@ -322,20 +364,79 @@ interface MonthViewProps {
   events: CalendarEvent[]
   onEventClick?: (event: CalendarEvent) => void
   onDateClick?: (date: Date) => void
+  onEventDrop?: (event: CalendarEvent, newStart: Date, newEnd?: Date) => void
 }
 
-function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps) {
+function MonthView({ date, events, onEventClick, onDateClick, onEventDrop }: MonthViewProps) {
   const days = getMonthDays(date)
   const today = new Date()
   const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+  const [draggedEventId, setDraggedEventId] = React.useState<string | number | null>(null)
+  const [dropTargetIndex, setDropTargetIndex] = React.useState<number | null>(null)
+
+  const handleDragStart = (e: React.DragEvent, event: CalendarEvent) => {
+    setDraggedEventId(event.id)
+    e.dataTransfer.effectAllowed = "move"
+    e.dataTransfer.setData("text/plain", String(event.id))
+  }
+
+  const handleDragEnd = () => {
+    setDraggedEventId(null)
+    setDropTargetIndex(null)
+  }
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    setDropTargetIndex(index)
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    // Only clear when actually leaving the cell, not when moving over child elements
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setDropTargetIndex(null)
+    }
+  }
+
+  const handleDrop = (e: React.DragEvent, targetDay: Date) => {
+    e.preventDefault()
+    setDropTargetIndex(null)
+    setDraggedEventId(null)
+
+    if (!onEventDrop) return
+
+    const eventId = e.dataTransfer.getData("text/plain")
+    const draggedEvent = events.find((ev) => String(ev.id) === eventId)
+    if (!draggedEvent) return
+
+    const oldStart = new Date(draggedEvent.start)
+    const oldStartDay = new Date(oldStart)
+    oldStartDay.setHours(0, 0, 0, 0)
+
+    const newTargetDay = new Date(targetDay)
+    newTargetDay.setHours(0, 0, 0, 0)
+
+    const deltaMs = newTargetDay.getTime() - oldStartDay.getTime()
+    if (deltaMs === 0) return
+
+    const newStart = new Date(oldStart.getTime() + deltaMs)
+
+    let newEnd: Date | undefined
+    if (draggedEvent.end) {
+      newEnd = new Date(new Date(draggedEvent.end).getTime() + deltaMs)
+    }
+
+    onEventDrop(draggedEvent, newStart, newEnd)
+  }
 
   return (
     <div className="flex flex-col h-full">
       {/* Week day headers */}
-      <div className="grid grid-cols-7 border-b">
+      <div role="row" className="grid grid-cols-7 border-b">
         {weekDays.map((day) => (
           <div
             key={day}
+            role="columnheader"
             className="p-2 text-center text-sm font-medium text-muted-foreground border-r last:border-r-0"
           >
             {day}
@@ -344,7 +445,7 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
       </div>
 
       {/* Calendar days */}
-      <div className="grid grid-cols-7 flex-1 auto-rows-fr">
+      <div role="grid" aria-label="Calendar grid" className="grid grid-cols-7 flex-1 auto-rows-fr">
         {days.map((day, index) => {
           const dayEvents = getEventsForDate(day, events)
           const isCurrentMonth = day.getMonth() === date.getMonth()
@@ -353,11 +454,17 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
           return (
             <div
               key={index}
+              role="gridcell"
+              aria-label={`${day.toLocaleDateString("default", { weekday: "long", month: "long", day: "numeric", year: "numeric" })}${dayEvents.length > 0 ? `, ${dayEvents.length} event${dayEvents.length > 1 ? "s" : ""}` : ""}`}
               className={cn(
                 "border-b border-r last:border-r-0 p-2 min-h-[100px] cursor-pointer hover:bg-accent/50",
-                !isCurrentMonth && "bg-muted/30 text-muted-foreground"
+                !isCurrentMonth && "bg-muted/30 text-muted-foreground",
+                dropTargetIndex === index && "ring-2 ring-primary"
               )}
               onClick={() => onDateClick?.(day)}
+              onDragOver={(e) => handleDragOver(e, index)}
+              onDragLeave={handleDragLeave}
+              onDrop={(e) => handleDrop(e, day)}
             >
               <div
                 className={cn(
@@ -365,6 +472,7 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
                   isToday &&
                     "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground h-6 w-6"
                 )}
+                {...(isToday ? { "aria-current": "date" as const } : {})}
               >
                 {day.getDate()}
               </div>
@@ -372,9 +480,15 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
                 {dayEvents.slice(0, 3).map((event) => (
                   <div
                     key={event.id}
+                    role="button"
+                    aria-label={event.title}
+                    draggable={!!onEventDrop}
+                    onDragStart={(e) => handleDragStart(e, event)}
+                    onDragEnd={handleDragEnd}
                     className={cn(
                       "text-xs px-2 py-1 rounded truncate cursor-pointer hover:opacity-80",
-                      event.color || DEFAULT_EVENT_COLOR
+                      event.color || DEFAULT_EVENT_COLOR,
+                      draggedEventId === event.id && "opacity-50"
                     )}
                     style={
                       event.color && event.color.startsWith("#")
@@ -406,11 +520,28 @@ function MonthView({ date, events, onEventClick, onDateClick }: MonthViewProps)
 interface WeekViewProps {
   date: Date
   events: CalendarEvent[]
+  locale?: string
   onEventClick?: (event: CalendarEvent) => void
   onDateClick?: (date: Date) => void
 }
 
-function WeekView({ date, events, onEventClick, onDateClick }: WeekViewProps) {
+function WeekView({ date, events, locale = "default", onEventClick, onDateClick }: WeekViewProps) {
+  const longPressTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleSlotTouchStart = (day: Date) => {
+    if (!onDateClick) return
+    longPressTimer.current = setTimeout(() => {
+      onDateClick(day)
+    }, 500)
+  }
+
+  const handleSlotTouchEnd = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current)
+      longPressTimer.current = null
+    }
+  }
+
   const weekStart = getWeekStart(date)
   const weekDays = Array.from({ length: 7 }, (_, i) => {
     const day = new Date(weekStart)
@@ -448,21 +579,27 @@ function WeekView({ date, events, onEventClick, onDateClick }: WeekViewProps) {
       </div>
 
       {/* Week events */}
-      <div className="grid grid-cols-7 flex-1">
+      <div role="grid" className="grid grid-cols-7 flex-1">
         {weekDays.map((day) => {
           const dayEvents = getEventsForDate(day, events)
           return (
             <div
               key={day.toISOString()}
+              role="gridcell"
+              aria-label={`${day.toLocaleDateString("default", { weekday: "long", month: "long", day: "numeric", year: "numeric" })}${dayEvents.length > 0 ? `, ${dayEvents.length} event${dayEvents.length > 1 ? "s" : ""}` : ""}`}
               className="border-r last:border-r-0 p-2 min-h-[400px] cursor-pointer hover:bg-accent/50"
               onClick={() => onDateClick?.(day)}
+              onTouchStart={() => handleSlotTouchStart(day)}
+              onTouchEnd={handleSlotTouchEnd}
             >
               <div className="space-y-2">
                 {dayEvents.map((event) => (
                   <div
                     key={event.id}
+                    role="button"
+                    aria-label={event.title}
                     className={cn(
-                      "text-sm px-3 py-2 rounded cursor-pointer hover:opacity-80",
+                      "text-xs sm:text-sm px-2 sm:px-3 py-1.5 sm:py-2 rounded cursor-pointer hover:opacity-80",
                       event.color || DEFAULT_EVENT_COLOR
                     )}
                     style={
@@ -475,7 +612,7 @@ function WeekView({ date, events, onEventClick, onDateClick }: WeekViewProps) {
                       onEventClick?.(event)
                     }}
                   >
-                    <div className="font-medium">{event.title}</div>
+                    <div className="font-medium truncate">{event.title}</div>
                     {!event.allDay && (
                       <div className="text-xs opacity-90 mt-1">
                         {event.start.toLocaleTimeString("default", {
@@ -499,15 +636,33 @@ interface DayViewProps {
   date: Date
   events: CalendarEvent[]
   onEventClick?: (event: CalendarEvent) => void
+  onDateClick?: (date: Date) => void
 }
 
-function DayView({ date, events, onEventClick }: DayViewProps) {
+function DayView({ date, events, onEventClick, onDateClick }: DayViewProps) {
   const dayEvents = getEventsForDate(date, events)
   const hours = Array.from({ length: 24 }, (_, i) => i)
+  const longPressTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleSlotTouchStart = (hour: number) => {
+    if (!onDateClick) return
+    longPressTimer.current = setTimeout(() => {
+      const clickDate = new Date(date)
+      clickDate.setHours(hour, 0, 0, 0)
+      onDateClick(clickDate)
+    }, 500)
+  }
+
+  const handleSlotTouchEnd = () => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current)
+      longPressTimer.current = null
+    }
+  }
 
   return (
     <div className="flex flex-col h-full">
-      <div className="flex-1 overflow-auto">
+      <div role="list" className="flex-1 overflow-auto">
         {hours.map((hour) => {
           const hourEvents = dayEvents.filter((event) => {
             if (event.allDay) return hour === 0
@@ -516,7 +671,7 @@ function DayView({ date, events, onEventClick }: DayViewProps) {
           })
 
           return (
-            <div key={hour} className="flex border-b min-h-[60px]">
+            <div key={hour} role="listitem" className="flex border-b min-h-[60px]">
               <div className="w-20 p-2 text-sm text-muted-foreground border-r">
                 {hour === 0
                   ? "12 AM"
@@ -526,12 +681,17 @@ function DayView({ date, events, onEventClick }: DayViewProps) {
                   ? "12 PM"
                   : `${hour - 12} PM`}
               </div>
-              <div className="flex-1 p-2 space-y-2">
+              <div
+                className="flex-1 p-2 space-y-2"
+                onTouchStart={() => handleSlotTouchStart(hour)}
+                onTouchEnd={handleSlotTouchEnd}
+              >
                 {hourEvents.map((event) => (
                   <div
                     key={event.id}
+                    aria-label={event.title}
                     className={cn(
-                      "px-3 py-2 rounded cursor-pointer hover:opacity-80",
+                      "px-2 sm:px-3 py-1.5 sm:py-2 rounded cursor-pointer hover:opacity-80",
                       event.color || DEFAULT_EVENT_COLOR
                     )}
                     style={
@@ -541,7 +701,7 @@ function DayView({ date, events, onEventClick }: DayViewProps) {
                     }
                     onClick={() => onEventClick?.(event)}
                   >
-                    <div className="font-medium">{event.title}</div>
+                    <div className="font-medium truncate">{event.title}</div>
                     {!event.allDay && (
                       <div className="text-xs opacity-90 mt-1">
                         {event.start.toLocaleTimeString("default", {

package/src/ObjectCalendar.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/ObjectCalendar',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Event',
+    viewType: 'calendar',
+    calendar: {
+      startDateField: 'startDate',
+      endDateField: 'endDate',
+      titleField: 'title',
+    },
+    columns: [
+      { field: 'title', header: 'Title' },
+      { field: 'startDate', header: 'Start Date' },
+      { field: 'endDate', header: 'End Date' },
+      { field: 'category', header: 'Category' },
+    ],
+    data: [
+      { id: 1, title: 'Team Standup', startDate: '2024-03-04T09:00:00', endDate: '2024-03-04T09:30:00', category: 'Meeting' },
+      { id: 2, title: 'Sprint Planning', startDate: '2024-03-05T10:00:00', endDate: '2024-03-05T12:00:00', category: 'Meeting' },
+      { id: 3, title: 'Design Review', startDate: '2024-03-06T14:00:00', endDate: '2024-03-06T15:00:00', category: 'Review' },
+      { id: 4, title: 'Product Demo', startDate: '2024-03-07T16:00:00', endDate: '2024-03-07T17:00:00', category: 'Demo' },
+      { id: 5, title: 'Retrospective', startDate: '2024-03-08T11:00:00', endDate: '2024-03-08T12:00:00', category: 'Meeting' },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+export const MonthlyEvents: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Appointment',
+    viewType: 'calendar',
+    calendar: {
+      startDateField: 'date',
+      titleField: 'name',
+    },
+    columns: [
+      { field: 'name', header: 'Name' },
+      { field: 'date', header: 'Date' },
+      { field: 'type', header: 'Type' },
+    ],
+    data: [
+      { id: 1, name: 'Board Meeting', date: '2024-03-01T10:00:00', type: 'Corporate' },
+      { id: 2, name: 'Client Call', date: '2024-03-05T14:00:00', type: 'Sales' },
+      { id: 3, name: 'Team Lunch', date: '2024-03-12T12:00:00', type: 'Social' },
+      { id: 4, name: 'Quarterly Review', date: '2024-03-15T09:00:00', type: 'Corporate' },
+      { id: 5, name: 'Workshop', date: '2024-03-20T13:00:00', type: 'Training' },
+      { id: 6, name: 'Release Day', date: '2024-03-25T08:00:00', type: 'Engineering' },
+    ],
+    className: 'w-full',
+  } as any,
+};

package/src/ObjectCalendar.tsx

@@ -25,6 +25,9 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData, CalendarConfig } from '@object-ui/types';
 import { CalendarView, type CalendarEvent } from './CalendarView';
+import { usePullToRefresh } from '@object-ui/mobile';
+import { useNavigationOverlay } from '@object-ui/react';
+import { NavigationOverlay } from '@object-ui/components';
 
 export interface CalendarSchema {
   type: 'calendar';
@@ -44,6 +47,7 @@ export interface ObjectCalendarProps {
   dataSource?: DataSource;
   className?: string;
   onEventClick?: (record: any) => void;
+  onRowClick?: (record: any) => void;
   onDateClick?: (date: Date) => void;
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
@@ -136,6 +140,7 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   dataSource,
   className,
   onEventClick,
+  onRowClick,
   onDateClick,
   onNavigate,
   onViewChange,
@@ -147,6 +152,16 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [currentDate, setCurrentDate] = useState(new Date());
   const [view, setView] = useState<'month' | 'week' | 'day'>('month');
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const handlePullRefresh = useCallback(async () => {
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: handlePullRefresh,
+    enabled: !!dataSource && !!schema.objectName,
+  });
 
   const dataConfig = useMemo(() => getDataConfig(schema), [
     (schema as any).data,
@@ -232,7 +247,7 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
 
     fetchData();
     return () => { isMounted = false; };
-  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort]);
+  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, refreshKey]);
 
   // Fetch object schema for field metadata
   useEffect(() => {
@@ -292,6 +307,14 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
     onDateClick?.(today);
   }, [onDateClick]);
 
+  // --- NavigationConfig support ---
+  // Must be called before any early returns to satisfy React hooks rules
+  const navigation = useNavigationOverlay({
+    navigation: (schema as any).navigation,
+    objectName: schema.objectName,
+    onRowClick,
+  });
+
   if (loading) {
     return (
       <div className={className}>
@@ -325,13 +348,24 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   }
 
   return (
-    <div className={className}>
-      <div className="border rounded-lg bg-background h-[calc(100vh-200px)] min-h-[600px]">
+    <div ref={pullRef} className={className}>
+      {pullDistance > 0 && (
+        <div
+          className="flex items-center justify-center text-xs text-muted-foreground"
+          style={{ height: pullDistance }}
+        >
+          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+        </div>
+      )}
+      <div className="border rounded-lg bg-background h-[calc(100vh-120px)] sm:h-[calc(100vh-160px)] md:h-[calc(100vh-200px)] min-h-[400px] sm:min-h-[600px]">
         <CalendarView
           events={events}
           currentDate={currentDate}
           view={(schema as any).defaultView || 'month'}
-          onEventClick={(event) => onEventClick?.(event.data)}
+          onEventClick={(event) => {
+            navigation.handleClick(event.data);
+            onEventClick?.(event.data);
+          }}
           onDateClick={onDateClick}
           onNavigate={(date) => {
             setCurrentDate(date);
@@ -344,6 +378,22 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
           onAddClick={handleCreate}
         />
       </div>
+      {navigation.isOverlay && (
+        <NavigationOverlay {...navigation} title="Event Details">
+          {(record) => (
+            <div className="space-y-3">
+              {Object.entries(record).map(([key, value]) => (
+                <div key={key} className="flex flex-col">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {key.replace(/_/g, ' ')}
+                  </span>
+                  <span className="text-sm">{String(value ?? '—')}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </NavigationOverlay>
+      )}
     </div>
   );
 };